Merge pull request #545 from shravyaramesh/tma1037-swap-flash-icons

[TMA-1037] Swap flash icons

2 files changed, 52 insertions, 28 deletions

diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx
index 06a4e44e..65c773d9 100644
--- a/src/components/camera/FlashButton.tsx
+++ b/src/components/camera/FlashButton.tsx
@@ -1,8 +1,9 @@
+import {BlurView} from '@react-native-community/blur';
 import React, {Dispatch, SetStateAction} from 'react';
-import {Text, TouchableOpacity} from 'react-native';
+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 FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
 import {styles} from './styles';
 
 interface FlashButtonProps {
@@ -16,27 +17,33 @@ 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}
+}) => {
+  return (
+    <>
+      <BlurView
+        blurType={'ultraThinMaterialDark'}
+        blurAmount={1}
+        style={styles.blurView}
       />
-    )}
-    <Text style={styles.saveButtonLabel}>Flash</Text>
-  </TouchableOpacity>
-);
+      <TouchableOpacity
+        onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
+        style={styles.flashButtonContainerBackground}>
+        <View
+          style={[
+            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>
+    </>
+  );
+};
 
 export default FlashButton;
diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx
index 33b47cc4..dbe1500b 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,17 @@ export const styles = StyleSheet.create({
     height: 40,
     backgroundColor: 'grey',
   },
-  flashIcon: {
-    zIndex: 2,
+  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,
   },
 });