Merge pull request #109 from Hugo-NF/100_style_refactor

Major styles refactoring
Hugo-NF · May 18, 2021 · 837f8aa · 837f8aa
2 parents 58cdfdb + 8a9b55f
commit 837f8aa
Show file tree

Hide file tree

Showing 37 changed files with 671 additions and 419 deletions.
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -36,7 +36,6 @@
       android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
       android:launchMode="singleTask"
       android:windowSoftInputMode="adjustResize"
-      android:theme="@style/Theme.App.SplashScreen"
       android:screenOrientation="portrait"
     >
       <intent-filter>

diff --git a/src/components/AsyncButton/styles.ts b/src/components/AsyncButton/styles.ts
@@ -18,6 +18,7 @@ export const Button = styled.TouchableOpacity<ButtonType>`
   align-self: ${(props) => props.alignSelf};
   align-items: ${(props) => props.alignItems};
   justify-content: ${(props) => props.justifyContent};
+  elevation: ${(props) => props.elevation};
 `;
 
 Button.defaultProps = {
@@ -34,4 +35,5 @@ Button.defaultProps = {
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
+  elevation: 3,
 };
diff --git a/src/components/CustomTextInput/index.tsx b/src/components/CustomTextInput/index.tsx
@@ -1,29 +1,56 @@
 import React from 'react';
+import Lodash from 'lodash';
 import {
-  HelperText, TextInput,
-} from 'react-native-paper';
+  NativeSyntheticEvent,
+  StyleProp,
+  TextInputFocusEventData,
+  TextStyle,
+} from 'react-native';
+import { HelperText, TextInput, useTheme } from 'react-native-paper';
 
-import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 import { ICustomTextInput } from '../../types/components/CustomTextInput';
 
+import { defaultProps, styles } from './styles';
+
 const CustomTextInput = <T, >({
-  formikHelpers, fieldName, ...rest
+  formikHelpers, fieldName, iconColor, ...rest
 } : ICustomTextInput<T>) : JSX.Element => (
   <>
     <TextInput
       onChangeText={formikHelpers.handleChange(fieldName)}
       onBlur={formikHelpers.handleBlur(fieldName) as (e: NativeSyntheticEvent<TextInputFocusEventData>) => void}
       value={formikHelpers.values[fieldName] as unknown as (string | undefined)}
-      error={Boolean(formikHelpers.touched[fieldName] && formikHelpers.errors[fieldName])}
-      {...rest}
+      right={
+        (formikHelpers.touched[fieldName] && !formikHelpers.errors[fieldName]) && (
+        <TextInput.Icon
+          color={
+            iconColor
+            || (rest.theme as ReactNativePaper.Theme)?.colors.primary
+            || useTheme().colors.primary
+          }
+          name="check"
+          style={styles.textInputIcon}
+        />
+        )
+      }
+      placeholderTextColor={styles.placeholderTextColor}
+      underlineColor={styles.textInputUnderlineColor}
+      {...Lodash.omit(rest, ['style', 'helperTextStyle'])}
+      style={[
+        styles.textInputDefaultStyles,
+        rest.style as StyleProp<TextStyle>,
+      ]}
     />
     <HelperText
       type="error"
+      style={rest.helperTextStyle as StyleProp<TextStyle>}
       visible={Boolean(formikHelpers.touched[fieldName] && formikHelpers.errors[fieldName])}
     >
       {formikHelpers.touched[fieldName] && formikHelpers.errors[fieldName]}
     </HelperText>
   </>
   );
 
+CustomTextInput.defaultProps = defaultProps;
+
 export default CustomTextInput;
diff --git a/src/components/CustomTextInput/styles.ts b/src/components/CustomTextInput/styles.ts
@@ -0,0 +1,27 @@
+// Style imports.
+import { Theme } from '../../constants';
+
+// Default Props.
+export const defaultProps = {
+  iconColor: undefined,
+};
+
+// Styles.
+export const styles = {
+  placeholderTextColor: Theme.elements.textFaded,
+
+  textInputDefaultStyles: {
+    backgroundColor: 'transparent',
+    color: Theme.elements.fieldText,
+    maxHeight: 58,
+    paddingHorizontal: 4,
+    width: 312,
+  },
+
+  textInputIcon: {
+    marginBottom: -16,
+    marginRight: -24,
+  },
+
+  textInputUnderlineColor: Theme.elements.textInputUnderlineColor,
+};
diff --git a/src/components/DrawerContent/index.tsx b/src/components/DrawerContent/index.tsx
@@ -11,7 +11,6 @@ import useIsMounted from 'ismounted';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
-import { Theme } from '../../constants';
 import { useAuth } from '../../contexts/user/context';
 
 import userAPI from '../../services/user/api';
@@ -108,13 +107,13 @@ const DrawerContent = ({ parentDrawerOpen, setParentDrawerOpen } : IDrawerProps)
           <List.Section style={styles.SpacedListSection}>
             <List.Subheader>Opções</List.Subheader>
             <List.Item
-              left={(props) => <List.Icon {...props} icon="login" color={Theme.elements.icon} />}
+              left={(props) => <List.Icon {...props} icon="login" color={styles.iconColor} />}
               title="Login"
               titleStyle={styles.ListItemText}
               onPress={() => navigateTo('Login')}
             />
             <List.Item
-              left={(props) => <List.Icon {...props} icon="account-plus" color={Theme.elements.icon} />}
+              left={(props) => <List.Icon {...props} icon="account-plus" color={styles.iconColor} />}
               title="Cadastro"
               titleStyle={styles.ListItemText}
               onPress={() => navigateTo('Registration')}
@@ -135,7 +134,10 @@ const DrawerContent = ({ parentDrawerOpen, setParentDrawerOpen } : IDrawerProps)
                 <Avatar.Text
                   size={64}
                   label={getNameInitials(userDetails.displayName)}
-                  style={{ backgroundColor: Theme.default.background, ...styles.Avatar }}
+                  style={{
+                    backgroundColor: styles.userInitialsBackgrond,
+                    ...styles.Avatar,
+                  }}
                 />
                 ) : (
                   <Avatar.Image
@@ -159,7 +161,11 @@ const DrawerContent = ({ parentDrawerOpen, setParentDrawerOpen } : IDrawerProps)
           <List.Accordion
             title={userDetails?.displayName}
             left={() => <></>}
-            style={{ backgroundColor: Theme.default.primary, ...styles.ListAccordion }}
+            style={{
+              backgroundColor: styles.settingsDrawerPrimaryBackground,
+              ...styles.ListAccordion,
+              ...styles.ListMainAccordion,
+            }}
             titleStyle={styles.SectionTitle}
           >
             <List.Item
@@ -184,9 +190,12 @@ const DrawerContent = ({ parentDrawerOpen, setParentDrawerOpen } : IDrawerProps)
         </List.Section>
         <List.Section style={styles.ListSection}>
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="paw" color={Theme.elements.icon} />}
+            left={(props) => <List.Icon {...props} icon="paw" color={styles.iconColor} />}
             title="Atalhos"
-            style={{ backgroundColor: Theme.elements.headerSecondary, ...styles.ListAccordion }}
+            style={{
+              backgroundColor: styles.settingsDrawerSecondaryLightBackground,
+              ...styles.ListAccordion,
+            }}
             titleStyle={styles.SectionTitle}
           >
             <List.Item
@@ -203,9 +212,12 @@ const DrawerContent = ({ parentDrawerOpen, setParentDrawerOpen } : IDrawerProps)
         </List.Section>
         <List.Section style={styles.ListSection}>
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="information" color={Theme.elements.icon} />}
+            left={(props) => <List.Icon {...props} icon="information" color={styles.iconColor} />}
             title="Informações"
-            style={{ backgroundColor: Theme.elements.headerPrimary, ...styles.ListAccordion }}
+            style={{
+              backgroundColor: styles.settingsDrawerPrimaryLightBackground,
+              ...styles.ListAccordion,
+            }}
             titleStyle={styles.SectionTitle}
           >
             <List.Item
@@ -232,9 +244,12 @@ const DrawerContent = ({ parentDrawerOpen, setParentDrawerOpen } : IDrawerProps)
         </List.Section>
         <List.Section style={styles.ListSection}>
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="toolbox" color={Theme.elements.icon} />}
+            left={(props) => <List.Icon {...props} icon="cog" color={styles.iconColor} />}
             title="Configurações"
-            style={{ backgroundColor: Theme.elements.settingsDrawerBackground, ...styles.ListAccordion }}
+            style={{
+              backgroundColor: styles.settingsDrawerDefaultBackground,
+              ...styles.ListAccordion,
+            }}
             titleStyle={styles.SectionTitle}
           >
             <List.Item
@@ -243,11 +258,15 @@ const DrawerContent = ({ parentDrawerOpen, setParentDrawerOpen } : IDrawerProps)
             />
           </List.Accordion>
         </List.Section>
+        {/*
         <List.Section style={styles.ListSection}>
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="android-debug-bridge" color={Theme.elements.icon} />}
+            left={(props) => <List.Icon {...props} icon="android-debug-bridge" color={styles.iconColor} />}
             title="Desenvolvimento"
-            style={{ backgroundColor: Theme.elements.settingsDrawerBackground, ...styles.ListAccordion }}
+            style={{
+              backgroundColor: styles.settingsDrawerDefaultBackground,
+              ...styles.ListAccordion,
+            }}
             titleStyle={styles.SectionTitle}
           >
             <List.Item
@@ -257,6 +276,7 @@ const DrawerContent = ({ parentDrawerOpen, setParentDrawerOpen } : IDrawerProps)
             />
           </List.Accordion>
         </List.Section>
+        */}
         <LogoutButton
           onPress={() => logout()}
         >

diff --git a/src/components/DrawerContent/styles.ts b/src/components/DrawerContent/styles.ts
@@ -14,6 +14,7 @@ export const styledComponents = {
   AvatarContainer: styled.View<ViewProps>`
     height: 152px;
     background-color: ${Theme.default.primary};
+    elevation: 3;
     flex-direction: row;
   `,
 
@@ -74,5 +75,17 @@ export const styles = {
     fontSize: 14,
     color: Theme.elements.buttonTextDisabled,
   },
-  ListAccordion: { paddingVertical: 0 },
+  ListAccordion: {
+    paddingVertical: 0,
+  },
+  ListMainAccordion: {
+    elevation: 3,
+  },
+
+  iconColor: Theme.elements.icon,
+  settingsDrawerDefaultBackground: Theme.elements.settingsDrawerDefaultBackground,
+  settingsDrawerPrimaryBackground: Theme.elements.settingsDrawerPrimaryBackground,
+  settingsDrawerPrimaryLightBackground: Theme.elements.settingsDrawerPrimaryLightBackground,
+  settingsDrawerSecondaryLightBackground: Theme.elements.settingsDrawerSecondaryLightBackground,
+  userInitialsBackgrond: Theme.default.background,
 };
diff --git a/src/constants/theme.ts b/src/constants/theme.ts
@@ -21,6 +21,7 @@ const Theme = {
     divider: '#E0E0E0',
     statusBarPrimary: '#88C9BF',
     statusBarPrimaryDark: '#589B9B',
+    statusBarSecondary: '#FFD358',
     statusBarSecondaryDark: '#F7A800',
     headerPrimary: '#CFE9E5',
     headerPrimaryDark: '#88C9BF',
@@ -37,7 +38,6 @@ const Theme = {
     photoBackground: '#E6E7E7',
     photoIcon: '#757575',
     drawerBackground: '#F7F7F7',
-    settingsDrawerBackground: '#E6E7E8',
     animalPhotosInputBackground: '#F1F2F2',
     icon: '#757575',
     iconBackground: '#E6E7E7',
@@ -54,6 +54,13 @@ const Theme = {
     chatSendBall: '#88C9BF',
     chatText: '#434343',
     chatBubleUser: '#CFE9E5',
+    textInputIconPrimary: '#589B9B',
+    textInputIconSecondary: '#F7A800',
+    textInputUnderlineColor: '#E6E7E8',
+    settingsDrawerDefaultBackground: '#E6E7E8',
+    settingsDrawerPrimaryBackground: '#88C9BF',
+    settingsDrawerPrimaryLightBackground: '#CFE9E5',
+    settingsDrawerSecondaryLightBackground: '#FEE29B',
   },
   named: {
     blue: '#007BFF',

diff --git a/src/layouts/HeaderLayout/index.tsx b/src/layouts/HeaderLayout/index.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import { useNavigation } from '@react-navigation/native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import { ScrollView } from 'react-native-gesture-handler';
@@ -68,7 +69,7 @@ export default function HeaderLayout({
       case 'search':
         return (
           <ActionButton>
-            <Ionicons
+            <MaterialIcons
               name="search"
               size={24}
               color={buttonType?.iconColor}
@@ -137,11 +138,7 @@ export default function HeaderLayout({
 
 HeaderLayout.defaultProps = {
   disableScrollView: false,
-  headerStyles: {
-    maxHeight: '56px',
-    height: '56px',
-    backgroundColor: Theme.elements.headerPrimary,
-  },
+  headerStyles: {},
   titleStyles: {
     fontFamily: 'Roboto_500Medium',
     fontSize: '20px',

diff --git a/src/layouts/HeaderLayout/styles.ts b/src/layouts/HeaderLayout/styles.ts
@@ -1,6 +1,7 @@
 import { TouchableOpacityProps, ViewProps } from 'react-native';
 import styled from 'styled-components/native';
 import Constants from 'expo-constants';
+import { Theme } from '../../constants';
 
 import { ITitleProps, IHeaderProps } from '../../types/layouts/HeaderLayout';
 
@@ -18,6 +19,9 @@ export const styledComponents = {
     justify-content: space-between;
     align-items: center;
     background-color: ${(props) => props.backgroundColor};
+    elevation: ${(props) => props.elevation};
+    border-top-width: 1px;
+    border-color: ${Theme.default.background};
   `,
   HeaderTitle: styled.Text<ITitleProps>`
     font-family: ${(props) => props.fontFamily};
@@ -33,3 +37,11 @@ export const styledComponents = {
     background-color: transparent;
   `,
 };
+
+// Default styled components props.
+styledComponents.HeaderContainer.defaultProps = {
+  maxHeight: '56px',
+  height: '56px',
+  backgroundColor: Theme.elements.headerPrimary,
+  elevation: 3,
+};
diff --git a/src/pages/Animal/Details/index.tsx b/src/pages/Animal/Details/index.tsx
@@ -278,7 +278,7 @@ export default function AnimalDetails() : JSX.Element {
                       <MaterialIcons
                         name="edit"
                         size={24}
-                        {...styles.floatingButtonIcon}
+                        color={styles.floatingButtonIconColor}
                       />
                     </FloatingButton>,
                   );
@@ -332,7 +332,7 @@ export default function AnimalDetails() : JSX.Element {
                       <MaterialIcons
                         name="favorite-border"
                         size={24}
-                        {...styles.floatingButtonIcon}
+                        color={styles.floatingButtonIconColor}
                       />
                     </FloatingButton>,
                   );