From 74f81dc7dc3aba0fcfb14ea4fcec4ce7be252a34 Mon Sep 17 00:00:00 2001
From: NishilJ <78994772+NishilJ@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:56:48 -0600
Subject: [PATCH] color 2

---
 src/components/Departures.tsx    | 12 ++++++++----
 src/components/TripPlanner.tsx   |  6 ++++--
 src/components/UpdateAccount.tsx |  3 ++-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Departures.tsx b/src/components/Departures.tsx
index fb230e0..25ffe78 100644
--- a/src/components/Departures.tsx
+++ b/src/components/Departures.tsx
@@ -206,7 +206,8 @@ const Departures: React.FC = () => {
         <Flex direction="row" gap="size-200" alignItems="start" wrap="nowrap" width="100%">
             {/* First box for the ComboBox and Buttons */}
             <View
-                backgroundColor="gray-100"
+                colorVersion={6}
+                backgroundColor="seafoam-100"
                 padding="size-300"
                 borderRadius="medium"
                 flex="1"
@@ -253,7 +254,8 @@ const Departures: React.FC = () => {
                 {/* Conditional rendering for Favorites section */}
                 {showFavoritesMenu && (
                     <View
-                        backgroundColor="gray-100"
+                        colorVersion={6}
+                        backgroundColor="seafoam-100"
                         padding="size-300"
                         borderRadius="medium"
                         marginTop="size-200"
@@ -284,7 +286,8 @@ const Departures: React.FC = () => {
 
             {/* Second box for departures information */}
             <View
-                backgroundColor="gray-100"
+                colorVersion={6}
+                backgroundColor="seafoam-100"
                 padding="size-300"
                 paddingTop="size-200"
                 borderRadius="medium"
@@ -337,7 +340,8 @@ const Departures: React.FC = () => {
                                 const arrivalTime = selectedStop.place?.arrival;
 
                                 return (
-                                    <View key={idx} marginBottom="size-200" padding="size-200" backgroundColor="gray-200" borderRadius="medium">
+                                    <View key={idx} marginBottom="size-200" padding="size-200" colorVersion={6}
+                                          backgroundColor="seafoam-300" borderRadius="medium">
                                         <Text>
                                             <strong>Route:</strong> {selectedStop.routeShortName} <br />
                                             <strong>Headsign:</strong> {selectedStop.headsign} <br />
diff --git a/src/components/TripPlanner.tsx b/src/components/TripPlanner.tsx
index c8f5dea..1a57d13 100644
--- a/src/components/TripPlanner.tsx
+++ b/src/components/TripPlanner.tsx
@@ -300,7 +300,8 @@ const TripPlanner: React.FC = () => {
 
                 {/* Display Trip Suggestions */}
                 {showTrips && (
-                    <View backgroundColor="gray-100" padding="size-300" width="size-6000" marginX="auto"
+                    <View colorVersion={6}
+                          backgroundColor="seafoam-100" padding="size-300" width="size-6000" marginX="auto"
                           borderRadius="medium">
                         {error ? (
                             <Text UNSAFE_style={{color: 'red'}}>{error}</Text>
@@ -330,7 +331,8 @@ const TripPlanner: React.FC = () => {
             <Flex direction="column" justifyContent="center">
                 {/* Display Trip Details */}
                 {showTripDetails && (
-                    <View backgroundColor="gray-100" padding="size-300" borderRadius="medium" width="size-6000"
+                    <View colorVersion={6}
+                          backgroundColor="seafoam-100" padding="size-300" borderRadius="medium" width="size-6000"
                           marginTop="size-300" maxHeight="size-8000" overflow="auto">
                         <Content>
                             <Heading level={4}>{fromPlace?.name} - {toPlace?.name}</Heading>
diff --git a/src/components/UpdateAccount.tsx b/src/components/UpdateAccount.tsx
index 6277611..56c70ea 100644
--- a/src/components/UpdateAccount.tsx
+++ b/src/components/UpdateAccount.tsx
@@ -115,7 +115,8 @@ const UpdateAccount: React.FC = () => {
 
   return (
     <Flex justifyContent="center">
-      <View padding="size-300" backgroundColor="gray-50" width="size-4600" borderRadius="medium">
+      <View padding="size-300" colorVersion={6}
+            backgroundColor="seafoam-100" width="size-4600" borderRadius="medium">
         <Heading level={2}>Account Settings</Heading>
         <Divider marginBottom="size-300" />
         <Flex direction="column" gap="size-200">