All UI bugs fixed (#190)

app.json

@@ -10,7 +10,7 @@
       "web"
     ],
     "version": "1.1.0",
-    "orientation": "any",
+    "orientation": "default",
     "primaryColor": "#cccccc",
     "icon": "./assets/icons/icon.png",
     "splash": {

src/navigation/DrawerNavigator.tsx

@@ -41,6 +41,7 @@ function CustomContentComponent(props) {
           flexDirection: 'row',
           width: '100%',
           paddingLeft: 25,
+          paddingBottom: 5,
         }}
       >
         <Text

src/views/checkbox.tsx

@@ -57,7 +57,7 @@ const CheckboxComponent: React.FunctionComponent<CheckboxComponentProps> = () =>
           <Icon
             name="radio-button-unchecked"
             type="material"
-            color="black"
+            color="grey"
             size={25}
             iconStyle={{ marginRight: 10 }}
           />

src/views/header.tsx

@@ -45,10 +45,10 @@ const styles = StyleSheet.create({
   headerContainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#ED553B',
+    backgroundColor: '#397af8',
     marginBottom: 20,
     width:"100%",
-    paddingVertical:10
+    paddingVertical:15,
   },
   heading: {
     color: 'white',

src/views/inputs.tsx

@@ -16,7 +16,7 @@ import {
   ThemeProvider,
   InputProps,
 } from 'react-native-elements';
-import { Header } from './header';
+import { Header, SubHeader } from './header';
 
 const SCREEN_WIDTH = Dimensions.get('window').width;
 const dummySearchBarProps = {
@@ -42,7 +42,7 @@ const Inputs: React.FunctionComponent<InputsComponentProps> = () => {
   let confirmPassword2Input = useRef(null);
 
   const InputFieldsStyle = {
-    borderWidth: 0,
+    borderWidth: 0   
   };
 
   const inputProps = {};
@@ -55,9 +55,8 @@ const Inputs: React.FunctionComponent<InputsComponentProps> = () => {
     >
       <Header title="Inputs" />
       <ScrollView keyboardShouldPersistTaps="handled">
-        <View style={styles.headerContainer}>
-          <Icon color="white" name="search" size={62} />
-          <Text style={styles.heading}>Search Bars</Text>
+        <View>
+          <SubHeader title={'Search Bars'} />
         </View>
         <SearchBarCustom
           placeholder="iOS searchbar"
@@ -76,14 +75,8 @@ const Inputs: React.FunctionComponent<InputsComponentProps> = () => {
           style={InputFieldsStyle}
           {...dummySearchBarProps}
         />
-        <View
-          style={[
-            styles.headerContainer,
-            { backgroundColor: '#616389', marginTop: 20 },
-          ]}
-        >
-          <Icon color="white" name="input" size={62} />
-          <Text style={styles.heading}>Inputs</Text>
+        <View style={{paddingTop: 30}}>
+          <SubHeader title={'Inputs'} />
         </View>
         <View style={{ alignItems: 'center', marginBottom: 16 }}>
           <Input
@@ -388,12 +381,6 @@ const Inputs: React.FunctionComponent<InputsComponentProps> = () => {
 export default Inputs;
 
 const styles = StyleSheet.create({
-  headerContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 40,
-    backgroundColor: '#B46486',
-  },
   heading: {
     color: 'white',
     marginTop: 10,

src/views/lists/content.tsx

@@ -5,7 +5,7 @@ import { Avatar, Button, Icon, withTheme } from 'react-native-elements';
 
 const USERS = [
   {
-    name: 'Johh Smith',
+    name: 'John Smith',
     avatar: 'https://uifaces.co/our-content/donated/1H_7AxP0.jpg',
     value: '- 164',
   },
@@ -17,7 +17,7 @@ const USERS = [
     positive: true,
   },
   {
-    name: 'Paul Allen',
+    name: 'Barry Allen',
     avatar: 'https://uifaces.co/our-content/donated/bUkmHPKs.jpg',
     value: '+ 464',
     positive: true,

src/views/overlay.tsx

@@ -24,7 +24,7 @@ const OverlayComponent: React.FunctionComponent<OverlayComponentProps> = () => {
       <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
         <Text style={styles.textPrimary}>Hello!</Text>
         <Text style={styles.textSecondary}>
-          Welcome to react native training
+          Welcome to React Native Elements
         </Text>
         <Button
           icon={
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
     fontSize: 20,
   },
   textSecondary: {
-    marginVertical: 20,
+    marginBottom: 10,
     textAlign: 'center',
     fontSize: 17,
   },

src/views/settings.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { View, StyleSheet, SectionList } from 'react-native';
 import {
   ListItem,
@@ -9,6 +9,8 @@ import {
   Switch,
 } from 'react-native-elements';
 import { Header } from './header';
+import { ThemeReducerContext } from '../helpers/ThemeReducer';
+
 
 const ORANGE = '#FF9500';
 const BLUE = '#007AFF';
@@ -122,6 +124,7 @@ type SetttingsComponentProps = {};
 
 const Settings: React.FunctionComponent<SetttingsComponentProps> = () => {
   const [switched, setSwitched] = useState(false);
+  const { ThemeState } = useContext(ThemeReducerContext);
 
   const onSwitchEventHandler = (value) => {
     setSwitched(value);
@@ -163,7 +166,7 @@ const Settings: React.FunctionComponent<SetttingsComponentProps> = () => {
   const renderSectionHeader = () => <View style={styles.headerSection} />;
 
   const ItemSeparatorComponent = () => (
-    <View style={styles.separatorComponent}>
+    <View style={[ThemeState.themeMode === 'dark'? styles.separatorComponentDark: styles.separatorComponentLight]}>
       <Divider style={styles.separator} />
     </View>
   );
@@ -202,9 +205,12 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: '#EFEFF4',
   },
-  separatorComponent: {
+  separatorComponentLight: {
     backgroundColor: 'white',
   },
+  separatorComponentDark: {
+    backgroundColor: 'black',
+  },
   separator: {
     marginLeft: 58,
   },

src/views/text.tsx

@@ -30,7 +30,7 @@ const TextComponent: React.FunctionComponent<TextComponentProps> = () => {
           Heading 4
         </Text>
         <View style={styles.more}>
-          <Text style={[styles.text, { color: 'grey' }]}>
+          <Text style={[styles.text, { color: 'grey', padding: 20 }]}>
             Refer docs for more:
           </Text>
           <Button
@@ -50,6 +50,7 @@ const styles = StyleSheet.create({
   },
   text: {
     textAlign: 'center',
+    padding: 5,
   },
   more: {
     marginVertical: 20,

src/views/tiles.tsx

@@ -64,7 +64,7 @@ const Tiles: React.FunctionComponent<TilesComponentProps> = () => {
                 }}
               >
                 <Text style={{ color: 'green' }}>Visit</Text>
-                <Text style={{ color: 'blue' }}>Find out More</Text>
+                <Text style={{ color: '#397af8' }}>Find out More</Text>
               </View>
             </Tile>
           </View>