Add icon to list shadow views

Xavier3372 · Mar 29, 2020 · 6de1d8e · 6de1d8e
1 parent 501e958
commit 6de1d8e
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 46 deletions.
diff --git a/App.tsx b/App.tsx
@@ -116,7 +116,7 @@ const App = (props: any) => {
                 tabBarOptions={{
                   activeTintColor: themeColor.contrast,
                   activeBackgroundColor: themeColor.secondaryBG,
-                  inactiveTintColor: 'gray',
+                  inactiveTintColor: `${themeColor.contrast}99`,
                   inactiveBackgroundColor: themeColor.secondaryBG,
                   style: {borderTopColor: themeColor.primaryBG},
                 }}>

diff --git a/src/components/Card/Content/index.tsx b/src/components/Card/Content/index.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import {ViewStyle, View, Text, Platform, ListRenderItem} from 'react-native';
+
+import {TouchableShadow} from '../../Shadow/Touchable';
+import {K} from '../../../store/constants';
+import {ViewShadow} from '../../Shadow/View';
+import {List, ListItem, Layout} from '@ui-kitten/components';
+
+export const ContentCard = (props: {
+  theme: string;
+  data: ReadonlyArray<any> | null | undefined;
+  style?: ViewStyle;
+  firstInPage?: boolean;
+  renderItem?({item, index}): JSX.Element;
+  backgroundColor?: string;
+  gradient: boolean;
+}) => {
+  const themeFont = Platform.OS === 'ios' ? K.fonts.ios : K.fonts.android;
+  const themeColor = props.theme === 'dark' ? K.colors.dark : K.colors.light;
+
+  const renderItem = ({item, index}) => {
+    return (
+      <ListItem
+        title={`${item.title}`}
+        onPress={item.onPress}
+        style={{height: 50}}
+        titleStyle={{
+          ...themeFont.subhead,
+          color: themeColor.primaryText,
+          marginLeft: 10,
+        }}
+      />
+    );
+  };
+
+  return (
+    <ViewShadow
+      theme={props.theme}
+      style={{
+        height: props.data.length * 50,
+        marginTop: props.firstInPage ? -20 : 0,
+        marginBottom: 20,
+        borderRadius: 20,
+        ...Platform.select({
+          ios: {},
+          android: {
+            overflow: 'hidden',
+          },
+        }),
+      }}>
+      <Layout style={{overflow: 'hidden', borderRadius: 20, height: 100, padding: 8, backgroundColor: props.backgroundColor}}>
+        <Text>{props.data}</Text>
+      </Layout>
+    </ViewShadow>
+  );
+};
diff --git a/src/components/Card/List/index.tsx b/src/components/Card/List/index.tsx
@@ -5,13 +5,15 @@ import {TouchableShadow} from '../../Shadow/Touchable';
 import {K} from '../../../store/constants';
 import {ViewShadow} from '../../Shadow/View';
 import {List, ListItem} from '@ui-kitten/components';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { Size } from '@ui-kitten/components/ui/measure/type';
 
 export const ListCard = (props: {
   theme: string;
   data: ReadonlyArray<any> | null | undefined;
   style?: ViewStyle;
   firstInPage?: boolean;
-  renderItem?({ item, index }): JSX.Element;
+  renderItem?({item, index}): JSX.Element;
 }) => {
   const themeFont = Platform.OS === 'ios' ? K.fonts.ios : K.fonts.android;
   const themeColor = props.theme === 'dark' ? K.colors.dark : K.colors.light;
@@ -22,7 +24,33 @@ export const ListCard = (props: {
         title={`${item.title}`}
         onPress={item.onPress}
         style={{height: 50}}
-        titleStyle={{...themeFont.subhead, color: themeColor.primaryText, marginLeft: 10}}
+        titleStyle={{
+          ...themeFont.subhead,
+          color: themeColor.primaryText,
+          marginLeft: 10,
+        }}
+        icon={
+          item.icon !== undefined
+            ? () => (
+                <View
+                  style={{
+                    height: 35,
+                    width: 35,
+                    backgroundColor: item.iconColor,
+                    borderRadius: 5,
+                  }}>
+                  <View
+                    style={{alignItems: 'center'}}>
+                    <Icon
+                      name={item.icon}
+                      size={25}
+                      style={{color: themeColor.white, marginTop: 4}}
+                    />
+                  </View>
+                </View>
+              )
+            : null
+        }
       />
     );
   };
@@ -39,14 +67,24 @@ export const ListCard = (props: {
           ios: {},
           android: {
             overflow: 'hidden',
-          }
-        })
+          },
+        }),
       }}>
       <List
         data={props.data}
         renderItem={props.renderItem ?? renderItem}
         scrollEnabled={false}
         style={{overflow: 'hidden', borderRadius: 20}}
+        ItemSeparatorComponent={() => (
+          <View
+            style={{
+              height: 0.5,
+              borderBottomColor: 'transparent',
+              backgroundColor: `${themeColor.contrast}33`,
+              marginLeft: 50,
+            }}
+          />
+        )}
       />
     </ViewShadow>
   );

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -7,9 +7,9 @@ import {K} from '../../store/constants';
 import {PageHeader} from '../../components/Page/PageHeader';
 import {ViewShadow} from '../../components/Shadow/View';
 import {TextButton} from '../../components/Button/Text';
+import {ContentCard} from '../../components/Card/Content';
 
 const HomePageC = (props: any) => {
-  console.log(props.theme);
   const themeColor = props.theme === 'dark' ? K.colors.dark : K.colors.light;
   const themeFont = Platform.OS === 'ios' ? K.fonts.ios : K.fonts.android;
 
@@ -23,44 +23,7 @@ const HomePageC = (props: any) => {
           navigation={props.navigation}
         />
         <Layout style={{marginHorizontal: 20}}>
-          <ViewShadow
-            theme={props.theme}
-            style={{marginTop: -20, borderRadius: 20, overflow: 'hidden'}}>
-              {/* //FIXME: SHADOW NOT SHOWING */}
-            <Layout
-              style={{
-                borderRadius: 20,
-                overflow: 'hidden',
-                padding: 20,
-                backgroundColor: '#E41C1C',
-              }}>
-              <Text
-                style={{
-                  ...themeFont.smallTitleE,
-                  color: themeColor.lightText,
-                  marginBottom: 10,
-                }}>
-                Add a user to track
-              </Text>
-              <Text
-                style={{
-                  ...themeFont.body,
-                  color: themeColor.lightText,
-                  width: 250,
-                  marginBottom: 20,
-                }}>
-                Add a user with dementia to keep track of them so that they
-                would never get lost again!
-              </Text>
-              <TextButton
-                theme={props.theme}
-                onPress={() =>
-                  props.navigation.navigate('Settings', {screen: 'People'})
-                }>
-                Add Now
-              </TextButton>
-            </Layout>
-          </ViewShadow>
+          <ContentCard theme={props.theme} data={['hello']} backgroundColor={themeColor.red} firstInPage/>
         </Layout>
       </ScrollView>
     </Layout>

diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
@@ -23,12 +23,16 @@ const SettingsPageC = (props: any) => {
       onPress: () => {
         props.navigation.navigate('People');
       },
+      icon: 'account-multiple',
+      iconColor: themeColor.blue
     },
     {
       title: 'Theme',
       onPress: () => {
         props.navigation.navigate('Theme');
       },
+      icon: 'invert-colors',
+      iconColor: themeColor.green
     },
     {
       title: 'Privacy',
@@ -53,6 +57,8 @@ const SettingsPageC = (props: any) => {
           </View>,
         ]);
       },
+      icon: 'lock',
+      iconColor: themeColor.indigo
     },
   ];
   const list2 = [
@@ -125,6 +131,8 @@ const SettingsPageC = (props: any) => {
           </View>,
         ]);
       },
+      icon: 'information',
+      iconColor: themeColor.yellow
     },
     {
       title: 'Tell A Friend',
@@ -134,6 +142,8 @@ const SettingsPageC = (props: any) => {
           <Text style={{color: themeColor.primaryText}}>Share</Text>,
         ]);
       },
+      icon: 'share',
+      iconColor: themeColor.teal
     },
     {
       title: 'Report A Bug',
@@ -143,6 +153,8 @@ const SettingsPageC = (props: any) => {
           <Text style={{color: themeColor.primaryText}}>Report</Text>,
         ]);
       },
+      icon: 'bug',
+      iconColor: themeColor.red
     },
     {
       title: 'Leave A Review',

diff --git a/src/store/constants.js b/src/store/constants.js
@@ -12,7 +12,17 @@ export const K = {
       lightText: '#FFFFFF',
       greyText: '#E9E9E9',
       contrast: '#000F31',
-      black: '#000000'
+      black: '#000000',
+      white: '#FFFFFF',
+      red: 'rgb(255, 59, 48)',
+      orange: 'rgb(255, 149, 0)',
+      yellow: 'rgb(255, 204, 0)',
+      green: 'rgb(52, 199, 89)',
+      teal: 'rgb(90, 200, 250)',
+      blue: 'rgb(0, 122, 255)',
+      indigo: 'rgb(88, 86, 214)',
+      purple: 'rgb(175, 82, 222)',
+      pink: 'rgb(255, 45, 85)'
     },
     dark: {
       primaryBG: '#232B43',
@@ -24,7 +34,17 @@ export const K = {
       lightText: '#FFFFFF',
       greyText: '#E9E9E9',
       contrast: '#FFFFFF',
-      black: '#000000'
+      black: '#000000',
+      white: '#FFFFFF',
+      red: 'rgb(255, 69, 58)',
+      orange: 'rgb(255, 159, 10)',
+      yellow: 'rgb(255, 214, 10)',
+      green: 'rgb(48, 209, 88)',
+      teal: 'rgb(100, 210, 255)',
+      blue: 'rgb(10, 132, 255)',
+      indigo: 'rgb(94, 92, 230)',
+      purple: 'rgb(191, 90, 242)',
+      pink: 'rgb(255, 55, 95)'
     },
   },
   fonts: {