Fixed Back Button on Sidebar Page

src/components/atoms/Buttons/CircularPrimaryBackButton.js

@@ -1,24 +1,26 @@
 import {StyleSheet, Text, View} from 'react-native';
-import React from 'react';
+import React, { useContext } from 'react';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
-import { horizontalScale, verticalScale } from '../../../constants/metrics';
+import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics';
 import colors from '../../../constants/colors';
+import { ThemeContext } from '../../../context/theme.context';
 
 
 const CircularPrimaryBackButton = ({onPress}) => {
-
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
   const styles = StyleSheet.create({
     buttonContainer: {
       borderRadius: 128,
       
-      height: verticalScale(34),
-      width: horizontalScale(34),
-      backgroundColor: colors().dominant_variant,
+      height: 'auto',
+      width: horizontalScale(40),
+      backgroundColor: currentTheme === "light" ? colors().white : colors().dominant_variant,
       borderColor: colors().recessive_variant,
       borderWidth: 2,
-      paddingVertical: verticalScale(6),
-      paddingHorizontal: horizontalScale(6)
+      paddingVertical: moderateScale(8),
+      paddingHorizontal: moderateScale(8)
     },
   });
   
@@ -26,7 +28,7 @@ const CircularPrimaryBackButton = ({onPress}) => {
     <TouchableWithoutFeedback onPress={onPress}>
       <View style={styles.buttonContainer}>
         <EntypoIcon
-          color={colors().secondaryColor}
+          color={currentTheme === "light" ? colors().secondaryColor : colors().white}
           size={20}
           name="chevron-thin-left"
         />