feat(apps/mobile): add dark mode

twodoorsdev · Oct 13, 2024 · 50f7bf1 · 50f7bf1
1 parent 26488e3
commit 50f7bf1
Show file tree

Hide file tree

Showing 16 changed files with 233 additions and 62 deletions.
diff --git a/apps/mobile/app.json b/apps/mobile/app.json
@@ -6,6 +6,7 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "scheme": "kittygram",
+    "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",

diff --git a/apps/mobile/src/app/_layout.tsx b/apps/mobile/src/app/_layout.tsx
@@ -1,6 +1,7 @@
 import { Stack } from 'expo-router/stack';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Toast from 'react-native-toast-message';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
 import { Provider } from 'react-redux';
 import { CustomToast } from '../components/CustomToast';
 import { store } from '../store/store';
@@ -11,20 +12,27 @@ const toastConfig = {
 };
 
 const NavigationLayout = () => {
+  const { styles } = useStyles(stylesheet);
   return (
     <Stack>
-      <Stack.Screen name="index" options={{ title: 'KittyGram' }} />
+      <Stack.Screen
+        name="index"
+        options={{ headerStyle: styles.header, title: 'KittyGram' }}
+      />
     </Stack>
   );
 };
 
+const stylesheet = createStyleSheet((theme) => ({
+  header: { backgroundColor: theme.colors.background.$3 },
+}));
+
 const ProviderLayout = () => {
   return (
     <GestureHandlerRootView>
       <Provider store={store}>
         <NavigationLayout />
         <Toast config={toastConfig} />
-        {/*<Toast />*/}
       </Provider>
     </GestureHandlerRootView>
   );

diff --git a/apps/mobile/src/app/index.tsx b/apps/mobile/src/app/index.tsx
@@ -56,7 +56,8 @@ const Home = () => {
 const stylesheet = createStyleSheet((theme, runtime) => ({
   container: {
     flex: 1,
-    padding: 16,
+    padding: theme.space.$2,
+    backgroundColor: theme.colors.background.$5,
   },
   overlay: {
     position: 'absolute',

diff --git a/apps/mobile/src/components/BottomSheet.tsx b/apps/mobile/src/components/BottomSheet.tsx
@@ -21,6 +21,8 @@ export const BottomSheet = ({
 
   return (
     <RNBottomSheet
+      backgroundStyle={styles.root}
+      // containerStyle={styles.root}
       enablePanDownToClose={true}
       index={open ? 0 : -1}
       snapPoints={[200]}
@@ -35,7 +37,7 @@ export const BottomSheet = ({
 
 const stylesheet = createStyleSheet((theme, runtime) => ({
   root: {
-    flex: 1,
+    backgroundColor: theme.colors.background.$3,
   },
   content: {
     flex: 1,

diff --git a/apps/mobile/src/components/CustomToast.tsx b/apps/mobile/src/components/CustomToast.tsx
@@ -1,15 +1,18 @@
 import { ComponentProps } from 'react';
 import { BaseToast } from 'react-native-toast-message';
+import { useStyles } from 'react-native-unistyles';
 
 export const CustomToast = (props: ComponentProps<typeof BaseToast>) => {
+  const { theme } = useStyles();
+
   return (
     <BaseToast
       {...props}
       style={{ borderLeftColor: 'transparent' }}
       contentContainerStyle={{ paddingHorizontal: 15 }}
       text1Style={{
-        fontSize: 15,
-        fontWeight: '400',
+        fontSize: theme.fontSizes.$2,
+        fontWeight: theme.fontWeights.bold,
       }}
     />
   );

diff --git a/apps/mobile/src/components/ImageSource.tsx b/apps/mobile/src/components/ImageSource.tsx
@@ -1,8 +1,10 @@
 import { FontAwesome5 } from '@expo/vector-icons';
 import { ComponentProps } from 'react';
-import { Pressable, StyleProp, Text, ViewStyle } from 'react-native';
+import { Pressable, StyleProp, ViewStyle } from 'react-native';
 import { createStyleSheet, useStyles } from 'react-native-unistyles';
 
+import { Text } from './Text';
+
 export type ImageSourceProps = ComponentProps<typeof Pressable> & {
   icon: string;
   label?: string;
@@ -28,9 +30,10 @@ const stylesheet = createStyleSheet((theme) => ({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: theme.colors.background.$5,
     borderStyle: 'dashed',
-    borderWidth: 1,
-    borderRadius: 10,
-    rowGap: 8,
+    borderWidth: theme.borderWidths.$1,
+    borderRadius: theme.radii.$2,
+    rowGap: theme.space.$2,
   },
 }));
diff --git a/apps/mobile/src/components/Text.tsx b/apps/mobile/src/components/Text.tsx
@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+import { Text as RNText } from 'react-native';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+
+export type TextProps = ComponentProps<typeof RNText>;
+
+export const Text = ({ style, ...props }: TextProps) => {
+  const { styles } = useStyles(stylesheet);
+  return <RNText style={[styles.root, style]} {...props} />;
+};
+
+const stylesheet = createStyleSheet((theme) => ({
+  root: {
+    color: theme.colors.typography.$5,
+  },
+}));
diff --git a/apps/mobile/src/features/CatCard/CardActions.tsx b/apps/mobile/src/features/CatCard/CardActions.tsx
@@ -65,17 +65,17 @@ export const CardActions = ({ item }: CardProps) => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const stylesheet = createStyleSheet((theme) => ({
   root: {},
   inner: {
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    backgroundColor: theme.colors.background.translucent,
     flexDirection: 'row',
     justifyContent: 'space-around',
-    borderBottomLeftRadius: 15,
-    borderBottomRightRadius: 15,
+    borderBottomLeftRadius: theme.radii.$3,
+    borderBottomRightRadius: theme.radii.$3,
   },
   voteCount: {
     alignSelf: 'center',
-    fontSize: 20,
+    fontSize: theme.fontSizes.$3,
   },
-});
+}));
diff --git a/apps/mobile/src/features/CatCard/CatCard.tsx b/apps/mobile/src/features/CatCard/CatCard.tsx
@@ -18,15 +18,15 @@ export const CatCard = ({ item }: CardProps) => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const stylesheet = createStyleSheet((theme) => ({
   root: {
-    width: '100%',
+    width: theme.space.full,
   },
   image: {
-    borderTopLeftRadius: 15,
-    borderTopRightRadius: 15,
-    width: '100%',
+    borderTopLeftRadius: theme.radii.$3,
+    borderTopRightRadius: theme.radii.$3,
+    width: theme.space.full,
     height: 200,
-    backgroundColor: 'white',
+    backgroundColor: theme.colors.background.$5,
   },
-});
+}));
diff --git a/apps/mobile/src/features/CatCard/ImageOverlay.tsx b/apps/mobile/src/features/CatCard/ImageOverlay.tsx
@@ -54,18 +54,18 @@ export const ImageOverlay = ({ item }: CardProps) => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const stylesheet = createStyleSheet((theme) => ({
   root: {
     position: 'absolute',
     right: 0,
   },
   favorite: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
-    borderRadius: 100,
-    margin: 8,
-    padding: 16,
-    flex: 1,
+    backgroundColor: theme.colors.background.translucent,
+    borderRadius: theme.radii.circle,
+    margin: theme.space.$1,
+    padding: theme.space.$2,
   },
-});
+}));
diff --git a/apps/mobile/src/features/CatCard/VoteButton.tsx b/apps/mobile/src/features/CatCard/VoteButton.tsx
@@ -18,10 +18,10 @@ export const VoteButton = ({ style, iconProps, ...props }: VoteButtonProps) => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const stylesheet = createStyleSheet((theme) => ({
   root: {
-    marginVertical: 8,
+    marginVertical: theme.space.$2,
     flexDirection: 'row',
-    columnGap: 8,
+    columnGap: theme.space.$2,
   },
-});
+}));
diff --git a/apps/mobile/src/features/HomePage/ImageList.tsx b/apps/mobile/src/features/HomePage/ImageList.tsx
@@ -24,10 +24,10 @@ export const ImageList = () => {
 
 const stylesheet = createStyleSheet((theme) => ({
   root: {
-    width: '100%',
-    height: '100%',
+    width: theme.space.full,
+    height: theme.space.full,
   },
   list: {
-    rowGap: 16,
+    rowGap: theme.space.$2,
   },
 }));
diff --git a/apps/mobile/src/features/HomePage/NoImagesFound.tsx b/apps/mobile/src/features/HomePage/NoImagesFound.tsx
@@ -22,12 +22,12 @@ const stylesheet = createStyleSheet((theme) => ({
     alignItems: 'center',
   },
   message: {
-    borderRadius: 15,
-    padding: 16,
-    backgroundColor: 'lightgrey',
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    columnGap: 16,
-    flexDirection: 'row',
+    padding: theme.space.$2,
+    borderRadius: theme.radii.$3,
+    backgroundColor: theme.colors.background.$6,
+    columnGap: theme.space.$2,
   },
 }));
diff --git a/apps/mobile/src/features/UploadImageModal/UploadImageSheet.tsx b/apps/mobile/src/features/UploadImageModal/UploadImageSheet.tsx
@@ -10,8 +10,8 @@ export type UploadImageSheetProps = ComponentProps<typeof BottomSheet>;
 export const UploadImageSheet = ({ open, onClose }: UploadImageSheetProps) => {
   const { styles } = useStyles(stylesheet);
   return (
-    <BottomSheet open={open} onClose={onClose}>
-      <View style={styles.root}>
+    <BottomSheet style={styles.root} open={open} onClose={onClose}>
+      <View style={styles.inner}>
         <ImageSourceButton source="camera" />
         <ImageSourceButton source="library" />
       </View>
@@ -21,9 +21,12 @@ export const UploadImageSheet = ({ open, onClose }: UploadImageSheetProps) => {
 
 const stylesheet = createStyleSheet((theme) => ({
   root: {
+    // backgroundColor: theme.colors.background.$3
+  },
+  inner: {
     flex: 1,
     flexDirection: 'row',
-    padding: 16,
-    columnGap: 16,
+    padding: theme.space.$2,
+    columnGap: theme.space.$2,
   },
 }));