Update settings about modal

theboi · theboi · commit e0fdeac7318b · 2020-03-20T14:45:23.000+08:00
diff --git a/assets/images/company-icon-dark.png b/assets/images/company-icon-dark.png
diff --git a/assets/images/company-icon-light.png b/assets/images/company-icon-light.png
diff --git a/src/components/Page/PageHeader/index.tsx b/src/components/Page/PageHeader/index.tsx
@@ -1,14 +1,19 @@
 import React from 'react';
-import {Platform, StatusBar} from 'react-native';
+import {Platform, StatusBar, View} from 'react-native';
 import {Text, Layout} from '@ui-kitten/components';
 import {iOSUIKit} from 'react-native-typography';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {HeaderText} from '../../Text/Header';
 import {K} from '../../../store/constants';
 export const PageHeader = (props: {
   theme: any;
   title: string;
   type: string;
+  bottomBar?: boolean;
+  leadingButton?: string;
+  actionButton?: string;
+  navigation: any;
 }) => {
   const themeColor = props.theme === 'dark' ? K.color.dark : K.color.light;
   return (
@@ -28,7 +33,7 @@ export const PageHeader = (props: {
         <Layout
           style={{
             paddingLeft: 30,
-            paddingBottom: 30,
+            paddingBottom: props.bottomBar === true ? 10 : 30,
             backgroundColor: 'transparent',
           }}>
           <Text
@@ -42,19 +47,42 @@ export const PageHeader = (props: {
       ) : (
         <Layout
           style={{
-            paddingBottom: 12,
+            paddingBottom: props.bottomBar === false ? 10 : 30,
             backgroundColor: 'transparent',
             width: '100%',
+            flexDirection: 'row',
           }}>
+          <View style={{flex: 1}}>
+            {typeof props.leadingButton === 'string' ? (
+              <Icon
+                name={props.leadingButton}
+                size={30}
+                color={themeColor.lightText}
+                onPress={props.navigation.goBack}
+                style={{marginHorizontal: 20}}
+              />
+            ) : null}
+          </View>
           <Text
             style={{
               ...iOSUIKit.bodyEmphasizedObject,
               color: themeColor.lightText,
-              width: '100%',
               textAlign: 'center',
+              flex: 3,
             }}>
             {props.title}
           </Text>
+          <View style={{flex: 1}}>
+          {typeof props.actionButton === 'string' ? (
+              <Icon
+                name={props.actionButton}
+                size={30}
+                color={themeColor.lightText}
+                onPress={props.navigation.goBack}
+                style={{marginHorizontal: 20}}
+              />
+            ) : null}
+          </View>
         </Layout>
       )}
     </Layout>
diff --git a/src/pages/Find/index.tsx b/src/pages/Find/index.tsx
@@ -8,7 +8,7 @@ import { PageHeader } from '../../components/Page/PageHeader';
 const FindPageC = (props: any) => {
   return (
     <Layout style={{height: '100%'}}>
-      <PageHeader theme={props.theme} title="Find" type='small' />
+      <PageHeader theme={props.theme} title="Find" type='small' bottomBar={false} navigation={props.navigation}/>
     </Layout>
   )
 }
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -10,7 +10,7 @@ const HomePageC = (props: any) => {
   return (
     <Layout style={{height: '100%'}}>
       <ScrollView>
-        <PageHeader title="Home" theme={props.theme} type='large' />
+        <PageHeader title="Home" theme={props.theme} type='large' navigation={props.navigation}/>
         <Layout style={{marginHorizontal: 20}}>
           <ViewShadow theme={props.theme} style={{marginTop: -20}}>
             <Layout style={{overflow: 'hidden', borderRadius: 20}}>
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
@@ -1,24 +1,27 @@
 import React, {ReactNode} from 'react';
-import {Text, View, ScrollView} from 'react-native';
+import {Text, View, ScrollView, Image} from 'react-native';
 import {Layout, List, ListItem} from '@ui-kitten/components';
 import {connect} from 'react-redux';
 import Modal, {
   ModalContent,
   ModalTitle,
   SlideAnimation,
 } from 'react-native-modals';
+import {iOSUIKit} from 'react-native-typography';
 
 import {K} from '../../store/constants';
 import {PageHeader} from '../../components/Page/PageHeader';
 import {ViewShadow} from '../../components/Shadow/View';
 
-const SettingsPageC = (props: any, {navigation}) => {
+const SettingsPageC = (props: any) => {
   const themeColor = props.theme === 'dark' ? K.color.dark : K.color.light;
 
   const list1 = [
     {
       title: 'Change Theme',
-      onPress: () => {props.navigation.navigate('Theme')},
+      onPress: () => {
+        props.navigation.navigate('Theme');
+      },
     },
     {
       title: 'Privacy',
@@ -34,11 +37,64 @@ const SettingsPageC = (props: any, {navigation}) => {
       onPress: () => {
         props.toggleSettingsModal(true, [
           'About',
-          <View>
-            <Text style={{color: themeColor.primaryText}}>
-              We are a team of developers based in Singapore aiming to help the
-              community through what we do best.
-            </Text>
+          <View style={{height: '100%', justifyContent: 'space-between'}}>
+            <View>
+              <Text
+                style={{
+                  ...iOSUIKit.subheadEmphasizedObject,
+                  color: themeColor.secondaryText,
+                  letterSpacing: 2,
+                  marginTop: 10,
+                  marginBottom: 5,
+                }}>
+                US
+              </Text>
+              <Text style={{color: themeColor.primaryText}}>
+                We are a team of developers based in Singapore, aiming to help
+                the community through what we do best, and Elliot.
+              </Text>
+              <Text
+                style={{
+                  ...iOSUIKit.subheadEmphasizedObject,
+                  color: themeColor.secondaryText,
+                  letterSpacing: 2,
+                  marginTop: 15,
+                  marginBottom: 5,
+                }}>
+                APP
+              </Text>
+              <Text style={{color: themeColor.primaryText}}>
+                This application was made for our school project, Project SF,
+                for people who have dementia.
+              </Text>
+            </View>
+            <View style={{marginBottom: 50}}>
+              <Text
+                style={{
+                  ...iOSUIKit.subheadObject,
+                  color: themeColor.primaryText,
+                  marginBottom: -5,
+                  marginTop: 20,
+                  textAlign: 'center',
+                  width: '100%',
+                }}>
+                Made with ♡, {`\n`}
+                Exponential Inc.
+              </Text>
+              <Image
+                style={{
+                  width: 40,
+                  height: 40,
+                  marginVertical: 20,
+                  alignSelf: 'center',
+                }}
+                source={
+                  props.theme === 'dark'
+                    ? require('../../../assets/images/company-icon-dark.png')
+                    : require('../../../assets/images/company-icon-light.png')
+                }
+              />
+            </View>
           </View>,
         ]);
       },
@@ -70,7 +126,12 @@ const SettingsPageC = (props: any, {navigation}) => {
   return (
     <Layout style={{height: '100%', flex: 1}}>
       <ScrollView>
-        <PageHeader title="Settings" theme={props.theme} type='large' />
+        <PageHeader
+          title="Settings"
+          theme={props.theme}
+          type="large"
+          navigation={props.navigation}
+        />
         <Layout style={{marginHorizontal: 20}}>
           <ViewShadow theme={props.theme} style={{height: 100, marginTop: -20}}>
             <List
@@ -102,7 +163,10 @@ const SettingsPageC = (props: any, {navigation}) => {
         modalTitle={
           <ModalTitle
             title={props.settingsModalContent?.[0] ?? 'Blank'}
-            style={{backgroundColor: themeColor.secondaryBG, borderBottomColor: themeColor.primaryBG}}
+            style={{
+              backgroundColor: themeColor.secondaryBG,
+              borderBottomColor: themeColor.primaryBG,
+            }}
             textStyle={{color: themeColor.primaryText}}
           />
         }
@@ -121,13 +185,14 @@ const SettingsPageC = (props: any, {navigation}) => {
           props.toggleSettingsModal(false);
         }}>
         <ModalContent style={{paddingHorizontal: 0}}>
-          <View style={{height: '100%', backgroundColor: themeColor.primaryBG, paddingHorizontal: 20, paddingTop: 15}}>
-            {props.settingsModalContent?.[1] ?? (
-              <Text style={{color: themeColor.primaryText}}>
-                If you expected content here, an error might have occured.
-                Please submit a bug report. Thanks!
-              </Text>
-            )}
+          <View
+            style={{
+              height: '100%',
+              backgroundColor: themeColor.primaryBG,
+              paddingHorizontal: 20,
+              paddingTop: 15,
+            }}>
+            {props.settingsModalContent?.[1] ?? null}
           </View>
         </ModalContent>
       </Modal>
diff --git a/src/pages/SettingsToggleTheme/index.tsx b/src/pages/SettingsToggleTheme/index.tsx
@@ -39,14 +39,14 @@ const SettingsToggleThemePageC = (props: any) => {
         title={`${item.title}`}
         onPress={item.onPress}
         style={{height: 50, ...selectedStyle}}
-        icon={() => item.selected ? <Icon name={'checkbox-marked-circle'} size={20} color={themeColor.contrast} style={{position: "absolute", right: 10, top: 15}} /> : <View style={{width: 0, marginHorizontal: 0, paddingHorizontal: 0}}/>}
+        icon={() => item.selected ? <Icon name={'check'} size={20} color={themeColor.contrast} style={{position: "absolute", right: 10, top: 15}} /> : <View style={{width: 0, marginHorizontal: 0, paddingHorizontal: 0}}/>}
       />
     );
   };
 
   return (
     <Layout style={{height: '100%', flex: 1}}>
-      <PageHeader title="Theme" theme={props.theme} type='small' />
+      <PageHeader title="Theme" theme={props.theme} type='small' navigation={props.navigation} leadingButton='arrow-left'/>
       <Layout style={{marginHorizontal: 20}}>
         <ViewShadow theme={props.theme} style={{height: 150, marginTop: -20}}>
           <List
diff --git a/src/store/constants.js b/src/store/constants.js
@@ -5,6 +5,7 @@ export const K = {
       secondaryBG: '#F8F8F8',
       linkBG: '#6197FF',
       primaryText: '#000F31',
+      secondaryText: '#535A6C',
       darkText: '#000F31',
       lightText: '#FFFFFF',
       greyText: '#E9E9E9',
@@ -15,6 +16,7 @@ export const K = {
       secondaryBG: '#161E37',
       linkBG: '#051135',
       primaryText: '#FFFFFF',
+      secondaryText: '#E5E5E5',
       darkText: '#000F31',
       lightText: '#FFFFFF',
       greyText: '#E9E9E9',
diff --git a/src/store/reducer.js b/src/store/reducer.js
@@ -1,7 +1,19 @@
 import React from 'react';
-import {Text} from 'react-native';
+import {Text, AsyncStorage} from 'react-native';
 import { Appearance } from 'react-native-appearance';
 
+_retrieveData = async () => {
+  try {
+    const value = await AsyncStorage.getItem('TASKS');
+    if (value !== null) {
+      // We have data!!
+      console.log(value);
+    }
+  } catch (error) {
+    // Error retrieving data
+  }
+};
+
 const initialState = {
   orientation: 'portrait', //portrait/landscape
   theme: 'light', //dark/light

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ import { PageHeader } from '../../components/Page/PageHeader';`
`8`	`8`	`const FindPageC = (props: any) => {`
`9`	`9`	`return (`
`10`	`10`	`<Layout style={{height: '100%'}}>`
`11`		`- <PageHeader theme={props.theme} title="Find" type='small' />`
	`11`	`+ <PageHeader theme={props.theme} title="Find" type='small' bottomBar={false} navigation={props.navigation}/>`
`12`	`12`	`</Layout>`
`13`	`13`	`)`
`14`	`14`	`}`