From 97af41e37967e7e494aeb7ce5d8032abbbfa2312 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Wed, 8 Jan 2020 11:25:26 +0500
Subject: [PATCH] ui: fix paddings

---
 .../mobile/src/components/EditorMenu/index.js |  1 +
 apps/mobile/src/components/Menu/index.js      |  3 ++-
 apps/mobile/src/components/NoteItem/index.js  |  6 ++---
 .../src/components/NotebookItem/index.js      |  3 ++-
 apps/mobile/src/components/NotesList/index.js |  3 ++-
 .../src/components/SearchInput/index.js       |  6 ++---
 apps/mobile/src/components/header/index.js    |  8 +++---
 apps/mobile/src/views/Editor/index.js         | 26 ++++++++-----------
 apps/mobile/src/views/Home/index.js           |  2 +-
 9 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/apps/mobile/src/components/EditorMenu/index.js b/apps/mobile/src/components/EditorMenu/index.js
index 728167d32..3da11aa90 100644
--- a/apps/mobile/src/components/EditorMenu/index.js
+++ b/apps/mobile/src/components/EditorMenu/index.js
@@ -8,6 +8,7 @@ import {
   FlatList,
   ActivityIndicator,
   KeyboardAvoidingView,
+  StatusBar,
 } from 'react-native';
 import {
   SIZE,
diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index 55cd9cdc3..8e426c12e 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -45,9 +45,10 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
       />
 
       <ScrollView
+        showsVerticalScrollIndicator={false}
         contentContainerStyle={{
           justifyContent: 'space-between',
-          height: '100%',
+          minHeight: '100%',
         }}>
         <View>
           <FlatList
diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js
index 107bd807f..73ee16b21 100644
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -72,14 +72,12 @@ const NoteItem = props => {
     <View
       style={[
         {
-          marginHorizontal: '5%',
           paddingVertical: pv,
           justifyContent: 'flex-start',
           alignItems: 'center',
           flexDirection: 'row',
-          paddingHorizontal: 0,
-          width: DDS.isTab ? '95%' : '90%',
-          marginHorizontal: '5%',
+          paddingHorizontal: 12,
+          width: '100%',
           alignSelf: 'center',
           borderBottomWidth: 1,
           borderBottomColor: colors.nav,
diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js
index bc8dde73c..e3a8878e6 100644
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/NotebookItem/index.js
@@ -86,7 +86,8 @@ export const NotebookItem = ({
         alignItems: 'center',
         flexDirection: 'row',
         paddingHorizontal: 0,
-        width: DDS.isTab ? '95%' : '90%',
+        paddingHorizontal: 12,
+        width: '100%',
         alignSelf: 'center',
         borderBottomWidth: 1,
         borderBottomColor: colors.nav,
diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js
index 69846c3a5..d2e9c554e 100644
--- a/apps/mobile/src/components/NotesList/index.js
+++ b/apps/mobile/src/components/NotesList/index.js
@@ -46,7 +46,8 @@ export const NotesList = ({
             fontFamily: WEIGHT.bold,
             fontSize: SIZE.sm,
             color: colors.accent,
-            width: DDS.isTab ? '95%' : '90%',
+            paddingHorizontal: 12,
+            width: '100%',
             alignSelf: 'center',
             marginTop: 15,
             paddingBottom: 5,
diff --git a/apps/mobile/src/components/SearchInput/index.js b/apps/mobile/src/components/SearchInput/index.js
index 9b78cf511..a13957be7 100644
--- a/apps/mobile/src/components/SearchInput/index.js
+++ b/apps/mobile/src/components/SearchInput/index.js
@@ -11,7 +11,7 @@ import {
   WEIGHT,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
-import {getElevation} from '../../utils/utils';
+import {getElevation, w} from '../../utils/utils';
 import * as Animatable from 'react-native-animatable';
 import {DDS} from '../../../App';
 import {useAppContext} from '../../provider/useAppContext';
@@ -37,12 +37,12 @@ export const Search = props => {
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
-          width: DDS.isTab ? '95%' : '90%',
+          paddingHorizontal: 12,
+          width: w - 12,
           alignSelf: 'center',
           borderRadius: br,
           height: '90%',
           borderWidth: props.hide ? 0 : 1.5,
-          paddingHorizontal: ph,
           borderColor: focus ? colors.accent : colors.nav,
         }}>
         <TextInput
diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js
index 0dbc7bd9f..cbb352d7f 100644
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -31,7 +31,8 @@ export const Header = ({
         marginBottom: 10,
         justifyContent: 'space-between',
         alignItems: 'center',
-        paddingHorizontal: DDS.isTab ? '2.5%' : '5%',
+        paddingHorizontal: 12,
+        width: '100%',
       }}>
       <View
         style={{
@@ -129,7 +130,6 @@ export const Header = ({
               alignItems: 'flex-end',
               height: 40,
               width: 60,
-              paddingRight: 0,
             }}>
             <Icon
               style={{
@@ -139,7 +139,7 @@ export const Header = ({
                     translateX: 0,
                   },
                   {
-                    translateY: 3,
+                    translateY: 5,
                   },
                 ],
               }}
@@ -155,7 +155,7 @@ export const Header = ({
                     translateX: -15,
                   },
                   {
-                    translateY: -3,
+                    translateY: -5,
                   },
                 ],
               }}
diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js
index 68c2ebf11..b471f88b3 100755
--- a/apps/mobile/src/views/Editor/index.js
+++ b/apps/mobile/src/views/Editor/index.js
@@ -9,6 +9,7 @@ import {
   TextInput,
   BackHandler,
   TouchableOpacity,
+  StatusBar,
 } from 'react-native';
 import {SIZE, WEIGHT} from '../../common/common';
 import WebView from 'react-native-webview';
@@ -134,27 +135,23 @@ const Editor = ({navigation}) => {
               flexDirection: 'row',
               justifyContent: 'space-between',
               alignItems: 'center',
-              width: '96%',
+              paddingHorizontal: 12,
+              width: '100%',
               alignSelf: 'center',
-              marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
+              height: 50,
+              marginTop: Platform.OS == 'ios' ? 0 : StatusBar.currentHeight,
             }}>
             <TouchableOpacity
               onPress={() => {
                 setDialog(true);
               }}
               style={{
-                width: 40,
+                width: 50,
                 height: 40,
+                justifyContent: 'center',
+                alignItems: 'flex-start',
               }}>
-              <Icon
-                style={{
-                  paddingRight: 10,
-                  marginTop: 3.5,
-                }}
-                name="chevron-left"
-                color={colors.icon}
-                size={SIZE.xl}
-              />
+              <Icon name="chevron-left" color={colors.icon} size={SIZE.xl} />
             </TouchableOpacity>
 
             <TextInput
@@ -163,7 +160,7 @@ const Editor = ({navigation}) => {
               placeholderTextColor={colors.icon}
               defaultValue={title}
               style={{
-                width: '80%',
+                width: '70%',
                 fontFamily: WEIGHT.bold,
                 fontSize: SIZE.xl,
                 color: colors.pri,
@@ -182,8 +179,7 @@ const Editor = ({navigation}) => {
                 width: 40,
                 height: 40,
                 justifyContent: 'center',
-                alignItems: 'center',
-                paddingTop: 3,
+                alignItems: 'flex-end',
               }}>
               <Icon
                 name={sidebar || isOpen ? 'x' : 'menu'}
diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js
index 39935be07..89d0b023d 100755
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -210,7 +210,7 @@ export const Home = ({navigation}) => {
             }}
             activeOpacity={opacity}
             style={{
-              width: DDS.isTab ? '95%' : '90%',
+              width: '95%',
               alignSelf: 'center',
               borderRadius: br,
               backgroundColor: colors.accent,