From d7ed9541f47c22d93c43a32baf3bf33d68d823c8 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <37447613+shravyaramesh@users.noreply.github.com>
Date: Mon, 9 Nov 2020 11:30:26 -0800
Subject: blur background, realign comment count, reposition content (#110)

---
 src/screens/profile/IndividualMoment.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'src/screens')

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',
   },
-- 
cgit v1.2.3-70-g09d2