From e3a6b04ff7f36c97c119c86ead7bef44b33d338c Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Thu, 5 Mar 2020 11:40:53 +0500
Subject: [PATCH] fix round border on ios.

---
 apps/mobile/src/components/Menu/index.js | 23 ++++++++-----
 apps/mobile/src/views/Settings/index.js  | 42 +++++++++++++-----------
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index eff9c7b7e..2730e8cc3 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -620,19 +620,26 @@ export const Menu = ({
 
               paddingHorizontal: 12,
             }}>
-            <Icon
+            <View
               style={{
                 width: 30,
-                textAlign: 'center',
+
                 backgroundColor: colors.accent,
                 height: 30,
                 borderRadius: 100,
-                textAlignVertical: 'center',
-              }}
-              name="account-outline"
-              color="white"
-              size={SIZE.md}
-            />
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <Icon
+                style={{
+                  textAlign: 'center',
+                  textAlignVertical: 'center',
+                }}
+                name="account-outline"
+                color="white"
+                size={SIZE.md}
+              />
+            </View>
             <View
               style={{
                 marginLeft: 10,
diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js
index 828536e68..d38540478 100644
--- a/apps/mobile/src/views/Settings/index.js
+++ b/apps/mobile/src/views/Settings/index.js
@@ -120,6 +120,7 @@ export const Settings = ({navigation}) => {
                   alignItems: 'center',
                 }}>
                 <Icon size={SIZE.lg} color="white" name="account-outline" />
+
                 <Text
                   style={{
                     color: 'white',
@@ -208,19 +209,18 @@ export const Settings = ({navigation}) => {
                 borderRadius: 5,
                 paddingHorizontal: 6,
               }}>
-              <Icon
+              <View
                 style={{
                   width: 40,
-                  textAlign: 'center',
                   backgroundColor: colors.accent,
                   height: 40,
                   borderRadius: 100,
-                  textAlignVertical: 'center',
-                }}
-                name="account-outline"
-                color="white"
-                size={SIZE.lg}
-              />
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}>
+                <Icon size={SIZE.lg} color="white" name="account-outline" />
+              </View>
+              <Icon name="account-outline" color="white" size={SIZE.lg} />
               <View
                 style={{
                   marginLeft: 10,
@@ -241,19 +241,21 @@ export const Settings = ({navigation}) => {
                 </Text>
               </View>
 
-              <Icon
+              <View
                 style={{
                   width: 40,
-                  textAlign: 'center',
-                  position: 'absolute',
                   height: 40,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  position: 'absolute',
                   right: 6,
-                  textAlignVertical: 'center',
-                }}
-                name="chevron-right"
-                color={colors.accent}
-                size={SIZE.lg}
-              />
+                }}>
+                <Icon
+                  name="chevron-right"
+                  color={colors.accent}
+                  size={SIZE.lg}
+                />
+              </View>
             </TouchableOpacity>
           </>
         )}
@@ -323,13 +325,13 @@ export const Settings = ({navigation}) => {
                 flexDirection: 'row',
                 justifyContent: 'center',
                 alignItems: 'center',
-                marginRight: 10,
+                marginHorizontal: 5,
                 marginVertical: 5,
               }}>
               <View
                 style={{
-                  width: 35,
-                  height: 35,
+                  width: w / 5 - 22,
+                  height: w / 5 - 22,
                   backgroundColor: item,
                   borderRadius: 100,
                   justifyContent: 'center',