Feature/improve theme (#171)

Author: JeremyDolle

template/src/Containers/Example/Index.js

@@ -1,6 +1,12 @@
 import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { View, ActivityIndicator, Text, TextInput, Button } from 'react-native'
+import {
+  View,
+  ActivityIndicator,
+  Text,
+  TextInput,
+  TouchableOpacity,
+} from 'react-native'
 import { Brand } from '@/Components'
 import { useTheme } from '@/Theme'
 import FetchOne from '@/Store/User/FetchOne'
@@ -37,7 +43,9 @@ const IndexExampleContainer = () => {
         {fetchOneUserError ? (
           <Text style={Fonts.textRegular}>{fetchOneUserError.message}</Text>
         ) : (
-          <Text style={Fonts.textRegular}>{t('example.helloUser', { name: user.name })}</Text>
+          <Text style={Fonts.textRegular}>
+            {t('example.helloUser', { name: user.name })}
+          </Text>
         )}
       </View>
       <View
@@ -49,7 +57,7 @@ const IndexExampleContainer = () => {
           Common.backgroundPrimary,
         ]}
       >
-        <Text style={[Layout.fill, Fonts.textCenter]}>
+        <Text style={[Layout.fill, Fonts.textCenter, Fonts.textSmall]}>
           {t('example.labels.userId')}
         </Text>
         <TextInput
@@ -62,10 +70,26 @@ const IndexExampleContainer = () => {
           style={[Layout.fill, Common.textInput]}
         />
       </View>
-      <Text style={Fonts.textRegular}>DarkMode :</Text>
-      <Button onPress={() => changeTheme({ darkMode: null })} title="Auto" />
-      <Button onPress={() => changeTheme({ darkMode: true })} title="Dark" />
-      <Button onPress={() => changeTheme({ darkMode: false })} title="Light" />
+      <Text style={[Fonts.textRegular, Gutters.smallBMargin]}>DarkMode :</Text>
+
+      <TouchableOpacity
+        style={[Common.button.rounded, Gutters.regularBMargin]}
+        onPress={() => changeTheme({ darkMode: null })}
+      >
+        <Text style={Fonts.textRegular}>Auto</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[Common.button.outlineRounded, Gutters.regularBMargin]}
+        onPress={() => changeTheme({ darkMode: true })}
+      >
+        <Text style={Fonts.textRegular}>Dark</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[Common.button.outline, Gutters.regularBMargin]}
+        onPress={() => changeTheme({ darkMode: false })}
+      >
+        <Text style={Fonts.textRegular}>Light</Text>
+      </TouchableOpacity>
     </View>
   )
 }

template/src/Theme/Common.js

@@ -4,32 +4,32 @@
  * Use it to define generic component styles (e.g. the default text styles, default button styles...).
  */
 import { StyleSheet } from 'react-native'
-
+import buttonStyles from './components/Buttons'
 /**
  *
  * @param Theme can be spread like {Colors, NavigationColors, Gutters, Layout, Common, ...args}
  * @return {*}
  */
-export default function ({ Colors }) {
-  return StyleSheet.create({
-    button: {
-      backgroundColor: Colors.primary,
-    },
-    backgroundPrimary: {
-      backgroundColor: Colors.primary,
-    },
-    backgroundReset: {
-      backgroundColor: Colors.transparent,
-    },
-    textInput: {
-      borderWidth: 1,
-      borderColor: Colors.text,
-      backgroundColor: Colors.inputBackground,
-      color: Colors.text,
-      minHeight: 50,
-      textAlign: 'center',
-      marginTop: 10,
-      marginBottom: 10,
-    },
-  })
+export default function ({ Colors, ...args }) {
+  return {
+    button: buttonStyles({ Colors, ...args }),
+    ...StyleSheet.create({
+      backgroundPrimary: {
+        backgroundColor: Colors.primary,
+      },
+      backgroundReset: {
+        backgroundColor: Colors.transparent,
+      },
+      textInput: {
+        borderWidth: 1,
+        borderColor: Colors.text,
+        backgroundColor: Colors.inputBackground,
+        color: Colors.text,
+        minHeight: 50,
+        textAlign: 'center',
+        marginTop: 10,
+        marginBottom: 10,
+      },
+    }),
+  }
 }

template/src/Theme/Variables.js

@@ -27,9 +27,9 @@ export const NavigationColors = {
  * FontSize
  */
 export const FontSize = {
-  small: 12,
-  regular: 14,
-  large: 18,
+  small: 16,
+  regular: 20,
+  large: 40,
 }
 
 /**

template/src/Theme/components/Buttons.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native'
+
+export default function ({ Colors, Gutters, Layout }) {
+  const base = {
+    ...Layout.center,
+    ...Gutters.largeHPadding,
+    height: 40,
+    backgroundColor: Colors.primary,
+  }
+  const rounded = {
+    ...base,
+    borderRadius: 20,
+  }
+
+  return StyleSheet.create({
+    base,
+    rounded,
+    outline: {
+      ...base,
+      backgroundColor: Colors.transparent,
+      borderWidth: 2,
+      borderColor: Colors.primary,
+    },
+    outlineRounded: {
+      ...rounded,
+      backgroundColor: Colors.transparent,
+      borderWidth: 2,
+      borderColor: Colors.primary,
+    },
+  })
+}

template/src/Theme/hooks/useTheme.js

@@ -35,9 +35,13 @@ export default function () {
   const baseTheme = {
     Fonts: Fonts(themeVariables),
     Gutters: Gutters(themeVariables),
-    Common: Common(themeVariables),
     Images: Images(themeVariables),
     Layout: Layout(themeVariables),
+    Common: Common({
+      ...themeVariables,
+      Layout: Layout(themeVariables),
+      Gutters: Gutters(themeVariables),
+    }),
     ...themeVariables,
   }