blur background, realign comment count, reposition content (#110)

3 files changed, 15 insertions, 10 deletions

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index bd87a2b2..a9d5b6d6 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -45,12 +45,12 @@ const styles = StyleSheet.create({
     width: 21,
     height: 21,
   },
-
   count: {
     position: 'relative',
     fontWeight: 'bold',
     color: 'white',
-    paddingTop: '2%',
+    paddingTop: '3%',
+    textAlign: 'center',
   },
 });
 
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx
index 794700f3..abf967c6 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/Profile.tsx
@@ -46,7 +46,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
             }),
           },
           overlayStyle: {
-            backgroundColor: '#808080',
+            backgroundColor: '#505050',
             opacity: progress.interpolate({
               inputRange: [0, 1],
               outputRange: [0, 0.9],
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index b76f36d0..a6f917b7 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
-import {StyleSheet, View, Image} from 'react-native';
+import {StyleSheet, View, Image, Text} from 'react-native';
 import {Button} from 'react-native-elements';
+import {BlurView} from '@react-native-community/blur';
 import {
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
@@ -85,7 +86,11 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
   }, [date_time, userId]);
 
   return (
-    <View style={styles.contentContainer}>
+    <BlurView
+      blurType="light"
+      blurAmount={10}
+      reducedTransparencyFallbackColor="white"
+      style={styles.contentContainer}>
       <View style={styles.buttonsContainer}>
         <Button
           title="Close"
@@ -114,7 +119,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
         <Animated.Text style={styles.text}>{elapsedTime}</Animated.Text>
       </View>
       <Animated.Text style={styles.text}>{caption}</Animated.Text>
-    </View>
+    </BlurView>
   );
 };
 const styles = StyleSheet.create({
@@ -122,7 +127,6 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH,
     paddingTop: StatusBarHeight,
     paddingBottom: SCREEN_HEIGHT,
-    backgroundColor: 'transparent',
   },
   buttonsContainer: {
     flexDirection: 'row',
@@ -149,15 +153,16 @@ const styles = StyleSheet.create({
   bodyContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginLeft: '5%',
+    marginLeft: '7%',
     marginRight: '5%',
+    marginBottom: '2%',
   },
   text: {
     position: 'relative',
     paddingBottom: '1%',
     paddingTop: '1%',
-    marginLeft: '5%',
-    marginRight: '5%',
+    marginLeft: '7%',
+    marginRight: '2%',
     color: '#ffffff',
     fontWeight: 'bold',
   },