1 files changed, 16 insertions, 7 deletions
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index 88eb9f8a..df7380d7 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import { TAGG_TEXT_LIGHT_BLUE } from '../../constants';
-import {getToggleButtonText, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {getToggleButtonText, SCREEN_WIDTH} from '../../utils';
 
 type ToggleButtonProps = {
   toggleState: boolean;
@@ -15,9 +15,15 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
   handleToggle,
   buttonType,
 }) => {
+  const buttonColor = toggleState
+    ? styles.buttonColorToggled
+    : styles.buttonColor;
+  const textColor = toggleState ? styles.textColorToggled : styles.textColor;
   return (
-    <TouchableOpacity style={styles.button} onPress={() => handleToggle()}>
-      <Text style={styles.text}>
+    <TouchableOpacity
+      style={[styles.button, buttonColor]}
+      onPress={() => handleToggle()}>
+      <Text style={[styles.text, textColor]}>
         {getToggleButtonText(buttonType, toggleState)}
       </Text>
     </TouchableOpacity>
@@ -30,15 +36,18 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.25,
     height: SCREEN_WIDTH * 0.1,
-    borderRadius: 8,
     borderColor: TAGG_TEXT_LIGHT_BLUE,
-    backgroundColor: 'white',
     borderWidth: 3,
     marginRight: '2%',
   },
   text: {
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
   },
+  buttonColor: {
+    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+  },
+  textColor: {color: 'white'},
+  buttonColorToggled: {backgroundColor: 'white'},
+  textColorToggled: {color: TAGG_TEXT_LIGHT_BLUE},
 });
 export default ToggleButton;