Adjust progress bar style

1 files changed, 19 insertions, 3 deletions

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 317a2b37..36ce3999 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -151,13 +151,17 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
               setMediaFromGallery(pic.uri);
             });
           }}
-          style={styles.captureButtonContainer}>
+          style={
+            isRecording
+              ? styles.captureButtonVideoContainer
+              : styles.captureButtonContainer
+          }>
           <View style={styles.captureButton} />
         </TouchableOpacity>
         {isRecording && (
           <AnimatedCircularProgress
-            size={93}
-            width={4}
+            size={95}
+            width={6}
             fill={100}
             rotation={0}
             duration={60000 + 1000} // an extra second for UI to load
@@ -214,6 +218,18 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     backgroundColor: 'black',
   },
+  captureButtonVideoContainer: {
+    alignSelf: 'center',
+    backgroundColor: 'transparent',
+    borderRadius: 100,
+    borderWidth: 15,
+    borderColor: 'rgba(255,255,255,0.3)',
+    width: 93,
+    height: 93,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   captureButtonContainer: {
     alignSelf: 'center',
     backgroundColor: 'transparent',