5 files changed, 18 insertions, 16 deletions
diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx
index bef9434a..988c1e79 100644
--- a/src/components/common/BottomDrawer.tsx
+++ b/src/components/common/BottomDrawer.tsx
@@ -6,7 +6,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {interpolateColors} from 'react-native-reanimated';
 import BottomSheet from 'reanimated-bottom-sheet';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -50,6 +50,10 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
     );
   };
 
+  const backgroundColor = interpolateColors(bgAlpha, {
+    inputRange: [0, 1],
+    outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'],
+  });
   return (
     <Modal
       transparent
@@ -75,17 +79,7 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
         onPress={() => {
           setIsOpen(false);
         }}>
-        <Animated.View
-          style={[
-            styles.backgroundView,
-            {
-              backgroundColor: Animated.interpolateColors(bgAlpha, {
-                inputRange: [0, 1],
-                outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'],
-              }),
-            },
-          ]}
-        />
+        <Animated.View style={[styles.backgroundView, {backgroundColor}]} />
       </TouchableWithoutFeedback>
     </Modal>
   );
diff --git a/src/components/common/GradientBorderButton.tsx b/src/components/common/GradientBorderButton.tsx
index 32ac5c52..a5dbde9d 100644
--- a/src/components/common/GradientBorderButton.tsx
+++ b/src/components/common/GradientBorderButton.tsx
@@ -42,7 +42,7 @@ const GradientBorderButton: React.FC<GradientBorderButtonProps> = ({
 };
 const styles = StyleSheet.create({
   container: {
-    marginVertical: 15,
+    marginVertical: 10,
   },
   gradientContainer: {
     width: SCREEN_WIDTH / 2 - 40,
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index 1a9934f2..5128f3da 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -14,7 +14,8 @@ interface NavigationIconProps extends TouchableOpacityProps {
     | 'Upload'
     | 'Notifications'
     | 'Profile'
-    | 'SuggestedPeople';
+    | 'SuggestedPeople'
+    | 'Chat';
   disabled?: boolean;
   newIcon?: boolean;
 }
@@ -44,6 +45,13 @@ const NavigationIcon = (props: NavigationIconProps) => {
           : require('../../assets/navigationIcons/notifications.png')
         : require('../../assets/navigationIcons/notifications-clicked.png');
       break;
+    case 'Chat':
+      imgSrc = props.disabled
+        ? props.newIcon
+          ? require('../../assets/navigationIcons/chat-notifications.png')
+          : require('../../assets/navigationIcons/chat.png')
+        : require('../../assets/navigationIcons/chat-clicked.png');
+      break;
     case 'Profile':
       imgSrc = props.disabled
         ? require('../../assets/navigationIcons/profile.png')
diff --git a/src/components/common/TabsGradient.tsx b/src/components/common/TabsGradient.tsx
index a95e8bc3..07c55042 100644
--- a/src/components/common/TabsGradient.tsx
+++ b/src/components/common/TabsGradient.tsx
@@ -14,7 +14,7 @@ const TabsGradient: React.FC = () => {
 };
 const styles = StyleSheet.create({
   gradient: {
-    position: 'absolute',
+    ...StyleSheet.absoluteFillObject,
     top: (SCREEN_HEIGHT / 10) * 9,
     height: SCREEN_HEIGHT / 10,
     width: SCREEN_WIDTH,
diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx
index 721b1eb8..5e125d00 100644
--- a/src/components/common/TaggPrompt.tsx
+++ b/src/components/common/TaggPrompt.tsx
@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'white',
-    height: isIPhoneX() ? SCREEN_HEIGHT / 6 : SCREEN_HEIGHT / 5,
+    height: SCREEN_HEIGHT / 4,
   },
   closeButton: {
     position: 'relative',