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

1 files changed, 12 insertions, 7 deletions

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',
   },