From b0804b9159f269fc3b0ccb4198455cbddd96cba1 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 4 Aug 2021 10:15:23 -0700
Subject: Swap buttons, Add styles

---
 src/components/camera/FlashButton.tsx | 78 +++++++++++++++++++++++------------
 src/components/camera/styles.tsx      | 16 ++++---
 2 files changed, 62 insertions(+), 32 deletions(-)

(limited to 'src')

diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx
index 06a4e44e..f7791d5b 100644
--- a/src/components/camera/FlashButton.tsx
+++ b/src/components/camera/FlashButton.tsx
@@ -1,8 +1,10 @@
-import React, {Dispatch, SetStateAction} from 'react';
-import {Text, TouchableOpacity} from 'react-native';
+import {BlurView} from '@react-native-community/blur';
+import React, {Dispatch, SetStateAction, useMemo} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
 import {FlashMode} from 'react-native-camera';
-import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
-import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
+import {normalize} from 'react-native-elements';
+import FlashOnIcon from '../../assets/icons/camera/flash-off.svg';
+import FlashOffIcon from '../../assets/icons/camera/flash-on.svg';
 import {styles} from './styles';
 
 interface FlashButtonProps {
@@ -16,27 +18,51 @@ interface FlashButtonProps {
 export const FlashButton: React.FC<FlashButtonProps> = ({
   flashMode,
   setFlashMode,
-}) => (
-  <TouchableOpacity
-    onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
-    style={styles.flashButtonContainer}>
-    {flashMode === 'on' ? (
-      <FlashOnIcon
-        height={30}
-        width={20}
-        color={'white'}
-        style={styles.flashIcon}
-      />
-    ) : (
-      <FlashOffIcon
-        height={30}
-        width={20}
-        color={'white'}
-        style={styles.flashIcon}
-      />
-    )}
-    <Text style={styles.saveButtonLabel}>Flash</Text>
-  </TouchableOpacity>
-);
+}) => {
+  return useMemo(
+    () => (
+      <>
+        <BlurView
+          blurType={'ultraThinMaterialDark'}
+          blurAmount={1}
+          style={[
+            {
+              position: 'absolute',
+              zIndex: 1,
+              top: normalize(44),
+              right: 0,
+              marginRight: normalize(16),
+              height: 86,
+              width: 49,
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderRadius: 24.5,
+            },
+          ]}
+        />
+        <TouchableOpacity
+          onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
+          style={[styles.flashButtonContainerBackground]}>
+          <View
+            style={[
+              styles.flashButtonContainer,
+              {
+                opacity: flashMode === 'off' ? 0.5 : 1,
+              },
+            ]}>
+            {flashMode === 'off' ? (
+              <FlashOffIcon height={30} width={20} color={'white'} />
+            ) : (
+              <FlashOnIcon height={30} width={20} color={'white'} />
+            )}
+            <Text style={styles.saveButtonLabel}>Flash</Text>
+          </View>
+        </TouchableOpacity>
+      </>
+    ),
+    [flashMode],
+  );
+};
 
 export default FlashButton;
diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx
index 33b47cc4..beae7082 100644
--- a/src/components/camera/styles.tsx
+++ b/src/components/camera/styles.tsx
@@ -18,9 +18,16 @@ export const styles = StyleSheet.create({
     zIndex: 999,
   },
   flashButtonContainer: {
+    zIndex: 3,
+    height: 86,
+    width: 49,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 30,
+  },
+  flashButtonContainerBackground: {
     position: 'absolute',
-    backgroundColor: '#808080',
-    opacity: 0.25,
     zIndex: 1,
     top: normalize(50),
     right: 0,
@@ -30,7 +37,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    borderRadius: 30,
+    borderRadius: 50,
   },
   galleryIcon: {
     borderWidth: 2,
@@ -47,7 +54,4 @@ export const styles = StyleSheet.create({
     height: 40,
     backgroundColor: 'grey',
   },
-  flashIcon: {
-    zIndex: 2,
-  },
 });
-- 
cgit v1.2.3-70-g09d2


From 58f3946125df54b1c630a7a06f705eaa9b31c4da Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 5 Aug 2021 12:03:57 -0700
Subject: Address issues

---
 src/assets/icons/camera/flash-off.svg |  2 +-
 src/assets/icons/camera/flash-on.svg  |  2 +-
 src/components/camera/FlashButton.tsx | 73 +++++++++++++----------------------
 src/components/camera/styles.tsx      | 13 +++++++
 4 files changed, 42 insertions(+), 48 deletions(-)

(limited to 'src')

diff --git a/src/assets/icons/camera/flash-off.svg b/src/assets/icons/camera/flash-off.svg
index fb04efd2..b4608b75 100644
--- a/src/assets/icons/camera/flash-off.svg
+++ b/src/assets/icons/camera/flash-off.svg
@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M361.84,13.57,128.3,360c-3.94,2.81-6.8,11.94-7.74,16.16-4.5,29.23,19.23,41.69,31.66,44.27H289.39l-26,253c-2.11,10.3-1.13,33.3,19.69,42.86s38.69-1.18,45-7.73l260.27-373.1,9.85-16.16c8.44-32.61-14.78-46.38-27.44-49.19H400.53L427.26,38.16c1.13-17.42-11.26-29.28-17.59-33C386.6-7.23,368.17,5.61,361.84,13.57Z"/></svg>
\ No newline at end of file
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M413.14,36.09,387.86,255.37h5.7L251.35,397.57H153c-11.76-2.43-34.2-14.21-29.95-41.86.89-4,3.6-12.62,7.32-15.28L351.28,12.83c6-7.53,23.41-19.67,45.23-8C402.5,8.4,414.2,19.61,413.14,36.09Z"/><path class="cls-1" d="M594.91,341l-9.32,15.28L339.45,709.1c-6,6.2-22.89,16.35-42.58,7.31s-20.62-30.78-18.63-40.53L297,493.2,495.79,294.46H569C580.94,297.12,602.89,310.14,594.91,341Z"/><path class="cls-1" d="M634.48,114.82a29,29,0,0,1-8.5,20.53L486.15,275.18,287.4,473.92,135.09,626.24A29,29,0,1,1,94,585.18l167.8-167.8L404,275.18,584.92,94.29a29,29,0,0,1,49.56,20.53Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/camera/flash-on.svg b/src/assets/icons/camera/flash-on.svg
index b4608b75..fb04efd2 100644
--- a/src/assets/icons/camera/flash-on.svg
+++ b/src/assets/icons/camera/flash-on.svg
@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M413.14,36.09,387.86,255.37h5.7L251.35,397.57H153c-11.76-2.43-34.2-14.21-29.95-41.86.89-4,3.6-12.62,7.32-15.28L351.28,12.83c6-7.53,23.41-19.67,45.23-8C402.5,8.4,414.2,19.61,413.14,36.09Z"/><path class="cls-1" d="M594.91,341l-9.32,15.28L339.45,709.1c-6,6.2-22.89,16.35-42.58,7.31s-20.62-30.78-18.63-40.53L297,493.2,495.79,294.46H569C580.94,297.12,602.89,310.14,594.91,341Z"/><path class="cls-1" d="M634.48,114.82a29,29,0,0,1-8.5,20.53L486.15,275.18,287.4,473.92,135.09,626.24A29,29,0,1,1,94,585.18l167.8-167.8L404,275.18,584.92,94.29a29,29,0,0,1,49.56,20.53Z"/></svg>
\ No newline at end of file
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M361.84,13.57,128.3,360c-3.94,2.81-6.8,11.94-7.74,16.16-4.5,29.23,19.23,41.69,31.66,44.27H289.39l-26,253c-2.11,10.3-1.13,33.3,19.69,42.86s38.69-1.18,45-7.73l260.27-373.1,9.85-16.16c8.44-32.61-14.78-46.38-27.44-49.19H400.53L427.26,38.16c1.13-17.42-11.26-29.28-17.59-33C386.6-7.23,368.17,5.61,361.84,13.57Z"/></svg>
\ No newline at end of file
diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx
index f7791d5b..65c773d9 100644
--- a/src/components/camera/FlashButton.tsx
+++ b/src/components/camera/FlashButton.tsx
@@ -1,10 +1,9 @@
 import {BlurView} from '@react-native-community/blur';
-import React, {Dispatch, SetStateAction, useMemo} from 'react';
+import React, {Dispatch, SetStateAction} from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 import {FlashMode} from 'react-native-camera';
-import {normalize} from 'react-native-elements';
-import FlashOnIcon from '../../assets/icons/camera/flash-off.svg';
-import FlashOffIcon from '../../assets/icons/camera/flash-on.svg';
+import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
+import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
 import {styles} from './styles';
 
 interface FlashButtonProps {
@@ -19,49 +18,31 @@ export const FlashButton: React.FC<FlashButtonProps> = ({
   flashMode,
   setFlashMode,
 }) => {
-  return useMemo(
-    () => (
-      <>
-        <BlurView
-          blurType={'ultraThinMaterialDark'}
-          blurAmount={1}
+  return (
+    <>
+      <BlurView
+        blurType={'ultraThinMaterialDark'}
+        blurAmount={1}
+        style={styles.blurView}
+      />
+      <TouchableOpacity
+        onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
+        style={styles.flashButtonContainerBackground}>
+        <View
           style={[
-            {
-              position: 'absolute',
-              zIndex: 1,
-              top: normalize(44),
-              right: 0,
-              marginRight: normalize(16),
-              height: 86,
-              width: 49,
-              flexDirection: 'column',
-              justifyContent: 'center',
-              alignItems: 'center',
-              borderRadius: 24.5,
-            },
-          ]}
-        />
-        <TouchableOpacity
-          onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
-          style={[styles.flashButtonContainerBackground]}>
-          <View
-            style={[
-              styles.flashButtonContainer,
-              {
-                opacity: flashMode === 'off' ? 0.5 : 1,
-              },
-            ]}>
-            {flashMode === 'off' ? (
-              <FlashOffIcon height={30} width={20} color={'white'} />
-            ) : (
-              <FlashOnIcon height={30} width={20} color={'white'} />
-            )}
-            <Text style={styles.saveButtonLabel}>Flash</Text>
-          </View>
-        </TouchableOpacity>
-      </>
-    ),
-    [flashMode],
+            styles.flashButtonContainer,
+            // eslint-disable-next-line react-native/no-inline-styles
+            {opacity: flashMode === 'off' ? 0.5 : 1},
+          ]}>
+          {flashMode === 'off' ? (
+            <FlashOffIcon height={30} width={20} color={'white'} />
+          ) : (
+            <FlashOnIcon height={30} width={20} color={'white'} />
+          )}
+          <Text style={styles.saveButtonLabel}>Flash</Text>
+        </View>
+      </TouchableOpacity>
+    </>
   );
 };
 
diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx
index beae7082..dbe1500b 100644
--- a/src/components/camera/styles.tsx
+++ b/src/components/camera/styles.tsx
@@ -54,4 +54,17 @@ export const styles = StyleSheet.create({
     height: 40,
     backgroundColor: 'grey',
   },
+  blurView: {
+    position: 'absolute',
+    zIndex: 1,
+    top: normalize(50),
+    right: 0,
+    marginRight: normalize(18),
+    height: 86,
+    width: 49,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 24.5,
+  },
 });
-- 
cgit v1.2.3-70-g09d2