Fix: Category List, ListDivider, IOS Animation Nav

joaogomesdev · Jun 24, 2021 · f569c52 · f569c52
1 parent 5c6c9ac
commit f569c52
Show file tree

Hide file tree

Showing 13 changed files with 220 additions and 94 deletions.
diff --git a/src/components/Appointment/index.tsx b/src/components/Appointment/index.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
-import { RectButton, RectButtonProps, ScrollView } from 'react-native-gesture-handler'
-import { View, Image, Text} from 'react-native';
+import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
+import { View, Text } from 'react-native';
 
 import { styles } from './styles';
+import PlayerSvg from '../../assets/player.svg';
+import CalendarSvg from '../../assets/calendar.svg';
+
 import { GuildIcon } from '../GuildIcon';
 import { categories } from '../../utils/categories';
+import { theme } from '../../global/styles/theme';
 
 export type GuildProps = {
   id: string;
@@ -25,30 +29,50 @@ type Props = RectButtonProps & {
   data: AppointmentProps;
 } 
 
-export function Appointment({ data, ...rest }: Props){
+export function Appointment({ data, ...rest }: Props) {
   const [category] = categories.filter(item => item.id === data.category);
-
+  const { owner } = data.guild;
+  const { primary, on } = theme.colors;
+
   return (
-    <RectButton 
-      {...rest}
-    >
+    <RectButton {...rest}>
       <View style={styles.container}>
         <GuildIcon />
 
         <View style={styles.content}>
           <View style={styles.header}>
             <Text style={styles.title}>
-              {data.guild.name}
+              { data.guild.name }
             </Text>
 
             <Text style={styles.category}>
-              {data.guild.name}
+              { category.title }
             </Text>
           </View>
+
+          <View style={styles.footer}>
+            <View style={styles.dateInfo}>
+              <CalendarSvg />
+
+              <Text style={styles.date}>
+                { data.date }                
+              </Text>
+            </View>
+
+            <View style={styles.playersInfo}>
+              <PlayerSvg fill={ owner ? primary : on}/>
+
+              <Text style={[
+                styles.player, 
+                { color: owner ? primary : on }
+              ]}>
+                { owner ? 'Anfitrião' : 'Visitante' }
+              </Text>
+            </View>          
+          </View>
         </View>
       </View>
-
     </RectButton>
-  );
-}
+  )
 
+}
diff --git a/src/components/Appointment/styles.ts b/src/components/Appointment/styles.ts
@@ -1,10 +1,59 @@
-import { StyleSheet } from 'react-native'
-import { theme } from '../../global/styles/theme'
+import { StyleSheet } from 'react-native';
+import { theme } from '../../global/styles/theme';
 
-export  const styles = StyleSheet.create({
+export const styles = StyleSheet.create({
   container: {
-
+    width: '100%',
+    flexDirection: 'row',
+    alignSelf: 'center',
   },
-
-
-})
+  content: {
+    flex: 1,
+  },
+  header: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 12
+  },
+  title: {
+    fontFamily: theme.fonts.title700,
+    color: theme.colors.heading,
+    fontSize: 18,
+    marginLeft: 15
+  },
+  category: {
+    fontFamily: theme.fonts.text400,
+    color: theme.colors.highlight,
+    fontSize: 13,
+    marginRight: 24,
+
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  dateInfo: {
+    marginLeft: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  playersInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  date: {
+
+    fontFamily: theme.fonts.text500,
+    color: theme.colors.heading,
+    fontSize: 13,
+    marginLeft: 7
+  },
+  player: {
+    fontFamily: theme.fonts.text500,
+    fontSize: 13,
+    marginLeft: 7,
+    marginRight: 24
+  }
+});
diff --git a/src/components/Category/index.tsx b/src/components/Category/index.tsx
@@ -10,31 +10,39 @@ import { styles } from './styles';
 type CategoryProps = RectButtonProps &  {
   title: string,
   icon: React.FC<SvgProps>,
+  hasCheckedBox?: boolean,
   checked?: boolean 
 }
 export function Category({ 
   title,
   icon: Icon, 
-  checked = true,
+  hasCheckedBox = false,
+  checked = false,
   ...rest
 } : CategoryProps) {
 
-  const {secondary50, secondary70} = theme.colors;
+  const { secondary50, secondary70, secondary85, secondary40} = theme.colors;
 
   return (
     <RectButton
     {...rest}
     >
          <LinearGradient
-          style={styles.container}
-          colors={[secondary50, secondary70]}
+            style={styles.container}
+            colors={[secondary50, secondary70]}
           >
-            <View 
-              style={[styles.content, {opacity: checked ? 1 : 0.4}]}
+            <LinearGradient 
+              style={[styles.content, {opacity: checked ? 1 : 0.5}]}
+              colors={[checked ? secondary85 : secondary50, secondary40 ]}
             >
-              <View 
-                style={checked ? styles.checked : styles.check} 
-              />
+              {
+                hasCheckedBox && (
+                  <View 
+                  style={checked ? styles.checked : styles.check} 
+                />
+                )
+
+              }
 
               <Icon 
                   width={48}
@@ -45,7 +53,7 @@ export function Category({
                 {title}
               </Text>
 
-            </View>
+            </LinearGradient>
           </LinearGradient>
     </RectButton>
 

diff --git a/src/components/Category/styles.ts b/src/components/Category/styles.ts
@@ -13,32 +13,33 @@ export  const styles = StyleSheet.create({
   content: {
     width: 100,
     height: 116,
-    backgroundColor: theme.colors.secondary40,
     borderRadius: 8,
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingVertical: 7
+    paddingVertical: 20
   },
   check: {
+    position: 'absolute',
+    top: 7,
+    right: 7,
     width: 12,
     height: 12,
     backgroundColor: theme.colors.secondary100,
-    alignSelf: 'flex-end',
-    marginRight: 7,
     borderColor: theme.colors.secondary50,
     borderWidth: 2,
     borderRadius: 3
   },
   checked: {
+    position: 'absolute',
+    top: 7,
+    right: 7,
     width: 10,
     height: 10,
     backgroundColor: theme.colors.primary,
-    alignSelf: 'flex-end',
-    marginRight: 7,
     borderRadius: 3
   },
   title: {
-    fontFamily: theme.fonts.text500,
+    fontFamily: theme.fonts.title700,
     color: theme.colors.heading,
     fontSize: 15
   }

diff --git a/src/components/CategoryList/index.tsx b/src/components/CategoryList/index.tsx
@@ -8,10 +8,15 @@ import { Category } from '../Category';
 
 type CategoryListProps = {
   categorySelected: string,
+  hasCheckedBox?: boolean,
   setCategory: (categoryId: string) => void;
 }
 
-export function CategoryList({ categorySelected , setCategory}: CategoryListProps){
+export function CategoryList({ 
+  categorySelected , 
+  setCategory,
+  hasCheckedBox = false,
+}: CategoryListProps){
   return (
     <ScrollView
       horizontal
@@ -27,6 +32,7 @@ export function CategoryList({ categorySelected , setCategory}: CategoryListProp
             icon={category.icon}
             checked={category.id === categorySelected}
             onPress={() => setCategory(category.id)}
+            hasCheckedBox={hasCheckedBox}
           />
         ))
       }

diff --git a/src/components/ListDivider/index.tsx b/src/components/ListDivider/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { styles } from './styles';
+
+export function ListDivider()  {
+  return (
+    <View style={styles.container}>
+
+    </View>
+  );
+}
+
diff --git a/src/components/ListDivider/styles.ts b/src/components/ListDivider/styles.ts
@@ -0,0 +1,16 @@
+import { Inter_100Thin } from '@expo-google-fonts/inter'
+import { StyleSheet } from 'react-native'
+import { theme } from '../../global/styles/theme'
+
+export  const styles = StyleSheet.create({
+  container: {
+    width: '78%',
+    height: 1,
+    backgroundColor: theme.colors.secondary40,
+    marginTop: 2,
+    marginVertical: 31,
+    alignSelf: 'flex-end'
+  },
+
+
+})
diff --git a/src/components/ListHeader/index.tsx b/src/components/ListHeader/index.tsx
@@ -4,12 +4,12 @@ import { View, Image, Text} from 'react-native';
 
 import { styles } from './styles';
 
-type ListHeanderProps = {
+type ListHeaderProps = {
   title: string,
   subTitle: string,
 }
 
-export function ListHeander({title, subTitle}: ListHeanderProps){
+export function ListHeader({title, subTitle}: ListHeaderProps){
   return (
     <View style={styles.container}>
       <Text style={styles.title}>

diff --git a/src/global/styles/theme.ts b/src/global/styles/theme.ts
@@ -5,6 +5,7 @@ export const theme = {
     secondary100: '#0A1033',
     secondary90: '#0D133D',    
     secondary80: '#0E1647',
+    secondary85: '#171F52',
     secondary70: '#1B2565',
     secondary60: '#1B2565',
     secondary50: '#243189', 

diff --git a/src/routes/auth.routes.tsx b/src/routes/auth.routes.tsx
@@ -3,6 +3,7 @@ import { createStackNavigator } from '@react-navigation/stack'
 
 import { Home } from '../screens/Home'
 import { SignIn } from '../screens/SignIn'
+import { theme } from '../global/styles/theme';
 
 const { Navigator, Screen } = createStackNavigator();
 
@@ -12,7 +13,7 @@ export function AuthRoutes() {
       headerMode="none"
       screenOptions={{
         cardStyle: {
-          backgroundColor: 'transparent'
+          backgroundColor: theme.colors.secondary100
         },
 
       }}