refactor: use config for colors

mrevanzak · Oct 29, 2023 · 01da3ce · 01da3ce
1 parent 229df44
commit 01da3ce
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { Button } from "react-native-ui-lib";
+import { Button, Colors } from "react-native-ui-lib";
 import { Tabs } from "expo-router";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import { colors } from "@/utils/constant";
 
 export default function TabsLayout() {
   return (
@@ -10,7 +11,7 @@ export default function TabsLayout() {
       screenOptions={{
         tabBarShowLabel: false,
         tabBarStyle: {
-          backgroundColor: "#157DC1",
+          backgroundColor: colors.primary,
           borderTopLeftRadius: 15,
           borderTopRightRadius: 15,
           height: 70,
@@ -39,7 +40,7 @@ export default function TabsLayout() {
           tabBarItemStyle: {
             top: -35,
             borderRadius: 120,
-            backgroundColor: "white",
+            backgroundColor: Colors.white,
             aspectRatio: 1,
           },
           tabBarIconStyle: {
@@ -58,7 +59,7 @@ export default function TabsLayout() {
                     : "md-checkmark-circle"
                 }
                 size={70}
-                color="#FDBC12"
+                color={colors.secondary}
               />
             </Button>
           ),
@@ -74,7 +75,7 @@ export default function TabsLayout() {
             <Ionicons
               name={focused ? "md-person" : "md-person-outline"}
               size={32}
-              color="white"
+              color={Colors.white}
             />
           ),
         }}

diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
@@ -1,28 +1,29 @@
 import type { ImageSourcePropType } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { Button, Image, View } from "react-native-ui-lib";
+import { Button, Image, Colors, View } from "react-native-ui-lib";
 import { LinearGradient } from "expo-linear-gradient";
 import { Link } from "expo-router";
 
 import Logo from "~/full-logo.png";
+import { colors } from "@/utils/constant";
 
 export default function WelcomeScreen() {
   return (
     <SafeAreaView className="flex-1">
       <LinearGradient
-        colors={["#157DC1", "#FFFFFF"]}
+        colors={[colors.primary, Colors.white]}
         locations={[0.17, 0.64]}
         className="flex-1"
       >
         <View flex center>
-          <Image source={Logo as ImageSourcePropType} className="" />
+          <Image source={Logo as ImageSourcePropType} />
         </View>
         <View flex centerH>
           <Link replace href="/(tabs)/home" asChild>
             <Button
               label="Login"
               size="medium"
-              backgroundColor="#157DC1"
+              bg-primary
               className="w-1/2 p-3"
             />
           </Link>

diff --git a/apps/expo/src/components/Header.tsx b/apps/expo/src/components/Header.tsx
@@ -62,7 +62,6 @@ export default function Header(
           />
         </Button>
       </Link>
-      {/* </View> */}
     </SafeAreaView>
   );
 }
diff --git a/apps/expo/src/utils/constant.ts b/apps/expo/src/utils/constant.ts
@@ -1,6 +1,6 @@
 import { Colors } from "react-native-ui-lib";
 
-const colors = {
+export const colors = {
     primary: "#157DC1",
     secondary: "#FDBC12",
 } as const;

diff --git a/apps/expo/tailwind.config.ts b/apps/expo/tailwind.config.ts
@@ -1,8 +1,17 @@
+import { colors } from "@/utils/constant";
 import type { Config } from "tailwindcss";
 
 import baseConfig from "@vivat/tailwind-config";
 
 export default {
   content: ["./src/**/*.{ts,tsx}"],
   presets: [baseConfig],
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.primary,
+        secondary: colors.secondary,
+      },
+    },
+  },
 } satisfies Config;