enh

apps/user-ui/app/(drawer)/(tabs)/home/index.tsx

@@ -11,7 +11,8 @@ import {
   LoadingDialog,
   AppContainer,
   MyTouchableOpacity,
-  MyText, MyTextInput, SearchBar, useStatusBarStore
+  MyText, MyTextInput, SearchBar, useStatusBarStore,
+  colors
 } from "common-ui";
 
 import dayjs from "dayjs";
@@ -73,7 +74,7 @@ const RenderStore = ({
       </View>
 
       <MyText
-        style={tw`font-bold text-xs text-center text-white tracking-wide drop-shadow-sm text-white`}
+        style={tw`font-bold text-xs text-center tracking-wide drop-shadow-sm text-neutral-800`}
         numberOfLines={1}
       >
         {item.name.replace(/^The\s+/i, "")}
@@ -82,9 +83,8 @@ const RenderStore = ({
   );
 };
 
-// const headerColor = '#fedf89'
-// const headerColor = '#444ce7'
-const headerColor = '#f81260'
+
+const headerColor = colors.secondaryPink;
 
 export default function Dashboard() {
   const router = useRouter();
@@ -199,24 +199,8 @@ export default function Dashboard() {
   });
 
   const handleScroll = (event: any) => {
-    // const scrollY = event.nativeEvent.contentOffset.y;
-    // const stickyBarBottom = stickyBarLayout.y + stickyBarLayout.height;
-    // const whiteSectionTop = whiteSectionLayout.y;
-
-    // const shouldBeWhite = scrollY + stickyBarBottom >= whiteSectionTop;
-
-    // if (shouldBeWhite) {
-    //   updateStatusBarColor('dark', '#ffffff');
-    // } else {
-    //   updateStatusBarColor('light', headerColor);
-    // }
   };
 
-  // React.useFocu(() => {
-  //   // Initial status bar color
-  //   return () => updateStatusBarColor('dark', '#ffffff');
-  // }, []);
-
   if (isLoading || isLoadingConsts) {
     return (
       <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
@@ -332,11 +316,11 @@ export default function Dashboard() {
               <View style={tw`flex-row items-center justify-between mb-4 px-1`}>
                 <View>
                   <MyText
-                    style={tw`text-xl font-extrabold text-white tracking-tight drop-shadow-md text-white`}
+                    style={tw`text-xl font-extrabold text-white tracking-tight drop-shadow-md text-neutral-800`}
                   >
                     Our Stores
                   </MyText>
-                  <MyText style={tw`text-xs text-white/80 font-medium mt-0.5 text-white`}>
+                  <MyText style={tw`text-xs font-medium mt-0.5 text-neutral-800`}>
                     Fresh from our locations
                   </MyText>
                 </View>

apps/user-ui/components/AddressSelector.tsx

@@ -126,15 +126,16 @@ const AddressSelector: React.FC<AddressSelectorProps> = ({
                 <MaterialIcons
                   name="location-pin"
                   size={18}
+                  style={tw`text-neutral-800`}
                   // color={theme.colors.gray900}
-                  color={'#fff'}
+                  // color={'#fff'}
                 />
               </View>
               <View style={tw``}>
                 <View style={tw`flex-row`}>
                   <MyText
                     numberOfLines={1}
-                    style={tw`text-white text-xs font-bold uppercase tracking-widest`}
+                    style={tw`text-neutral-800 text-xs font-bold uppercase tracking-widest`}
                   >
                     to {name}
                   </MyText>
@@ -146,7 +147,7 @@ const AddressSelector: React.FC<AddressSelectorProps> = ({
                   /> */}
                 </View>
                 <MyText
-                  style={tw`text-white text-sm font-medium opacity-90`}
+                  style={tw`text-neutral-800 text-sm font-medium opacity-90`}
                   numberOfLines={1}
                 >
                   {address}

packages/ui/src/lib/status-bar-store.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { StatusBarStyle } from 'expo-status-bar';
+import { colors } from './theme-colors';
 
 interface StatusBarState {
   barStyle: StatusBarStyle;
@@ -9,7 +10,8 @@ interface StatusBarState {
 
 export const useStatusBarStore = create<StatusBarState>((set) => ({
   barStyle: 'light',
-  backgroundColor: '#f81260',
+  // backgroundColor: '#FFD6D9',
+  backgroundColor: colors.secondaryPink,
   updateStatusBarColor: (barStyle, backgroundColor) =>
     set({ barStyle, backgroundColor }),
 }));

packages/ui/src/lib/theme-colors.ts

@@ -52,6 +52,7 @@ export const colors = {
     gray700: "#414651",
     gray800: "#252B37",
     gray900: "#101828",
+    secondaryPink: '#fff',
     get error() { return this.red1; }, // alias, not hardcoded
   }