Improve visibilty in create trip

andrew-bierman · Sep 8, 2024 · f8537ff · f8537ff
1 parent f3a080c
commit f8537ff
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/packages/app/components/trip/TripCards/TripPlaceCard.tsx b/packages/app/components/trip/TripCards/TripPlaceCard.tsx
@@ -10,6 +10,7 @@ import {
   RStack,
 } from '@packrat/ui';
 import Carousel from 'app/components/carousel';
+import { current } from 'immer';
 
 const RCard: any = OrirginalRCard;
 const RParagraph: any = OriginalRParagraph;
@@ -29,19 +30,19 @@ const TripPlaceCard = ({
   title,
   selectedValue = [],
 }: TripPlaceCardProps) => {
-  const { isDark } = useTheme();
+  const { currentTheme } = useTheme();
 
   return (
     <TripCardBase icon={icon} title={title}>
       <RStack style={{ flex: 1, maxWidth: '100%' }}>
-        <Carousel iconColor={isDark ? '#fff' : '#000'}>
+        <Carousel iconColor={currentTheme.colors.text}>
           {data?.map((item) => {
             return (
               <RCard
                 key={item.id}
                 backgroundColor={
                   selectedValue.includes(item.id)
-                    ? theme.colors.background
+                    ? currentTheme.colors.background
                     : null
                 }
                 onPress={() => {
@@ -53,7 +54,11 @@ const TripPlaceCard = ({
               >
                 <RCard.Header padded>
                   <RParagraph
-                    color={selectedValue.includes(item.id) ? 'white' : 'black'}
+                    color={
+                      selectedValue.includes(item.id)
+                        ? currentTheme.colors.secondaryBlue
+                        : currentTheme.colors.text
+                    }
                   >
                     {item.name}
                   </RParagraph>

diff --git a/packages/app/screens/trip/createTrip.tsx b/packages/app/screens/trip/createTrip.tsx
@@ -81,18 +81,22 @@ function Trips() {
   );
 }
 
-const loadStyles = () => ({
-  mutualStyles: {
-    backgroundColor: theme.colors.background,
-    flex: 1,
-    flexDirection: 'column',
-    height: '100%',
-    paddingBottom: 30,
-  },
-  container: {
-    gap: 50,
-    padding: 20,
-  },
-});
+const loadStyles = () => {
+  const { currentTheme } = useTheme();
+
+  return {
+    mutualStyles: {
+      backgroundColor: currentTheme.colors.background,
+      flex: 1,
+      flexDirection: 'column',
+      height: '100%',
+      paddingBottom: 30,
+    },
+    container: {
+      gap: 50,
+      padding: 20,
+    },
+  };
+};
 
 export default Trips;
diff --git a/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx b/packages/ui/src/Bento/elements/datepickers/RangePicker.tsx
@@ -21,6 +21,7 @@ import {
 } from './common/dateParts';
 import { Platform } from 'react-native';
 import { useDateAnimation } from './DatePicker';
+import useTheme from 'app/hooks/useTheme';
 
 const RANGE_STYLE: { [key: string]: GetProps<typeof View> } = {
   'in-range': {
@@ -305,6 +306,7 @@ export function RangePicker({
       setOpen(false);
     }
   }, [selectedDates]);
+  const { currentTheme } = useTheme();
 
   // uncomment this to limit the range of dates
   //   const M = now.getMonth()
@@ -323,6 +325,7 @@ export function RangePicker({
           }}
           onButtonPress={() => setOpen(true)}
           width={260}
+          color={currentTheme.colors.text}
         />
       </DatePicker.Trigger>