From 1870aa16afc27ba86e943766a670e1e4573378f7 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Tue, 29 Aug 2023 13:08:05 -0700
Subject: [PATCH] styling seal wizard for dark mode

---
 app/mobile/src/constants/Colors.js              | 17 ++++++++++-------
 app/mobile/src/session/Session.styled.js        |  1 +
 app/mobile/src/session/settings/Settings.jsx    |  6 +++---
 .../src/session/settings/Settings.styled.js     |  8 ++++----
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js
index fcc23bc1..d2b67038 100644
--- a/app/mobile/src/constants/Colors.js
+++ b/app/mobile/src/constants/Colors.js
@@ -41,15 +41,16 @@ const LightColors = {
   enabledIndicator: '#8fbea7',
   disabledIndicator: '#eeeeee',
   disconnectedIndicator: '#aa0000',
+  sliderGrip: '#888888',
 };
 
 const DarkColors = {
   tabBar: '#111111',
   activeTabIcon: '#dddddd',
   idleTabIcon: '#aaaaaa',
-  activeBorder: '#aa8866',
+  activeBorder: '#aaaaaa',
   idleBorder: '#eeeeee',
-  activeFill: '#66aa88',
+  activeFill: '#559955',
   linkText: '#88eecc',
   dangerText: '#ffaaaa',
   labelText: '#eeeeee',
@@ -59,14 +60,14 @@ const DarkColors = {
   text: '#ffffff',
   screenBase: '#333333',
   areaBase: '#555555',
-  modalBase: '#ffffff',
-  modalOverlay: 'rgba(52,52,52,0.8)',
+  modalBase: '#333333',
+  modalOverlay: 'rgba(88,88,88,0.8)',
   headerBar: '#555555',
   primaryButton: '#448866',
   primaryButtonText: '#ffffff',
-  disabledButton: '#aaaaaa',
-  disabledButtonText: '#888888',
-  dangerButton: '#ff888888',
+  disabledButton: '#888888',
+  disabledButtonText: '#eeeeee',
+  dangerButton: '#ff5555',
   dangerButtonText: '#ffffff',
   inputBase: '#ffffff',
   inputPlaceholder: '#888888',
@@ -84,6 +85,7 @@ const DarkColors = {
   enabledIndicator: '#8fbea7',
   disabledIndicator: '#eeeeee',
   disconnectedIndicator: '#aa0000',
+  sliderGrip: '#eeeeee',
 };
 
 function getColor(label) {
@@ -131,6 +133,7 @@ export const Colors = {
   enabledIndicator: getColor('enabledIndicator'),
   disabledIndicator: getColor('disabledIndicator'),
   disconnectedIndicator: getColor('disconnectedIndicator'),
+  sliderGrip: getColor('sliderGrip'),
 
   background: '#8fbea7',
   primary: '#448866',
diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js
index 6c1479ca..d6b2dbe6 100644
--- a/app/mobile/src/session/Session.styled.js
+++ b/app/mobile/src/session/Session.styled.js
@@ -67,6 +67,7 @@ export const styles = StyleSheet.create({
     color: Colors.white,
   },
   tabBar: {
+    borderTopWidth: 0,
     backgroundColor: Colors.primary,
     maxHeight: 72,
   },
diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx
index 0b3b9ad2..39ec115c 100644
--- a/app/mobile/src/session/settings/Settings.jsx
+++ b/app/mobile/src/session/settings/Settings.jsx
@@ -41,7 +41,7 @@ export function Settings() {
             </View>
             <View style={styles.optionControl}>
               <Text style={styles.optionLink}>{ state.strings.enableNotifications }</Text>
-              <Switch style={styles.notifications} trackColor={styles.track}/>
+              <Switch value={true} style={styles.notifications} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator} trackColor={styles.track}/>
             </View>
           </TouchableOpacity>
           <View style={styles.divider} />
@@ -64,7 +64,7 @@ export function Settings() {
         <View style={styles.group}>
           <View style={styles.entry}>
             <View style={styles.icon}>
-              <MatIcons name="progress-clock" size={20} color={Colors.text} />
+              <MatIcons name="progress-clock" size={20} color={Colors.labelText} />
             </View>
             <View style={styles.optionControl}>
               <Text style={styles.labelText}>{ state.strings.hourMode }</Text>
@@ -91,7 +91,7 @@ export function Settings() {
           <View style={styles.divider} />
           <TouchableOpacity style={styles.entry} activeOpacity={1}>
             <View style={styles.icon}>
-              <MatIcons name="calendar-month-outline" size={20} color={Colors.text} />
+              <MatIcons name="calendar-month-outline" size={20} color={Colors.labelText} />
             </View>
             <View style={styles.optionControl}>
               <Text style={styles.labelText}>{ state.strings.dateMode }</Text>
diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js
index 0dac4c4a..8107424b 100644
--- a/app/mobile/src/session/settings/Settings.styled.js
+++ b/app/mobile/src/session/settings/Settings.styled.js
@@ -11,7 +11,7 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.screenBase,
   },
   label: {
-    color: Colors.text,
+    color: Colors.labelText,
     padding: 4,
     fontFamily: 'Roboto',
   },
@@ -104,8 +104,8 @@ export const styles = StyleSheet.create({
     fontFamily: 'Roboto',
   },
   track: {
-    false: Colors.disabledIndicator,
-    true: Colors.enabledIndicator,
+    false: Colors.idleFill,
+    true: Colors.activeFill,
   },
   notifications: {
     transform: [{ scaleX: .6 }, { scaleY: .6 }],
@@ -130,7 +130,7 @@ export const styles = StyleSheet.create({
   modalHeader: {
     fontSize: 18,
     paddingTop: 16,
-    color: Colors.text,
+    color: Colors.labelText,
     fontFamily: 'Roboto',
   },
   modalClose: {