From 48d017f17024722518d0350b87fde98291854a95 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Thu, 16 Jan 2025 21:53:56 -0800
Subject: [PATCH] styling for light mode

---
 app/client/mobile/src/constants/Strings.ts    |  2 +-
 .../mobile/src/contacts/Contacts.styled.ts    |  2 ++
 app/client/mobile/src/contacts/Contacts.tsx   |  2 +-
 .../mobile/src/content/Content.styled.ts      |  1 -
 app/client/mobile/src/session/Session.tsx     |  2 +-
 .../mobile/src/settings/Settings.styled.ts    |  3 +++
 app/client/mobile/src/settings/Settings.tsx   | 22 +++++++++----------
 7 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/client/mobile/src/constants/Strings.ts b/app/client/mobile/src/constants/Strings.ts
index 578a66ae..f3bf33be 100644
--- a/app/client/mobile/src/constants/Strings.ts
+++ b/app/client/mobile/src/constants/Strings.ts
@@ -104,7 +104,7 @@ export const en = {
   password: 'Password',
   newPassword: 'New Password',
   confirmPassword: 'Confirm Password',
-  deleteKey: "Type 'delete' to remove key",
+  deleteKey: 'Enter \'delete\' to remove key',
   delete: 'delete',
   remove: 'Delete',
   username: 'Username',
diff --git a/app/client/mobile/src/contacts/Contacts.styled.ts b/app/client/mobile/src/contacts/Contacts.styled.ts
index 47f7869c..26a19677 100644
--- a/app/client/mobile/src/contacts/Contacts.styled.ts
+++ b/app/client/mobile/src/contacts/Contacts.styled.ts
@@ -11,6 +11,7 @@ export const styles = StyleSheet.create({
   },
   button: {
     borderRadius: 8,
+    marginRight: 4,
   },
   indicator: {
     borderRightWidth: 2,
@@ -39,6 +40,7 @@ export const styles = StyleSheet.create({
     marginRight: 8,
     marginLeft: 4,
     display: 'flex',
+    borderRadius: 8,
   },
   input: {
     flexGrow: 1,
diff --git a/app/client/mobile/src/contacts/Contacts.tsx b/app/client/mobile/src/contacts/Contacts.tsx
index 88c31e34..cb4dc534 100644
--- a/app/client/mobile/src/contacts/Contacts.tsx
+++ b/app/client/mobile/src/contacts/Contacts.tsx
@@ -36,7 +36,7 @@ export function Contacts({openRegistry, openContact, callContact, textContact}:
       <SafeAreaView style={styles.header}>
         <IconButton style={styles.sort} mode="contained" icon={state.sortAsc ? 'sort-descending' : 'sort-ascending'} size={24} onPress={actions.toggleSort} />
 
-        <Surface mode="flat" style={styles.inputSurface}>
+        <Surface mode="flat" elevation={3} style={styles.inputSurface}>
           <TextInput
             dense={true}
             style={styles.input}
diff --git a/app/client/mobile/src/content/Content.styled.ts b/app/client/mobile/src/content/Content.styled.ts
index 31a5d8b1..cbd08ea9 100644
--- a/app/client/mobile/src/content/Content.styled.ts
+++ b/app/client/mobile/src/content/Content.styled.ts
@@ -60,7 +60,6 @@ export const styles = StyleSheet.create({
     height: 40,
     marginRight: 8,
     marginLeft: 4,
-    marginBottom: 4,
     display: 'flex',
     borderRadius: 8,
   },
diff --git a/app/client/mobile/src/session/Session.tsx b/app/client/mobile/src/session/Session.tsx
index 92e59664..78b12c04 100644
--- a/app/client/mobile/src/session/Session.tsx
+++ b/app/client/mobile/src/session/Session.tsx
@@ -73,7 +73,7 @@ export function Session() {
   return (
     <View style={styles.session}>
       {state.layout !== 'large' && (
-        <Surface elevation={2}>
+        <Surface elevation={3}>
           <SafeAreaView style={styles.full}>
             <View style={styles.screen}>
               <View
diff --git a/app/client/mobile/src/settings/Settings.styled.ts b/app/client/mobile/src/settings/Settings.styled.ts
index 2a031ec7..402c9ba2 100644
--- a/app/client/mobile/src/settings/Settings.styled.ts
+++ b/app/client/mobile/src/settings/Settings.styled.ts
@@ -345,6 +345,7 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
+    paddingTop: 8,
   },
   blockedTitle: {
     flexGrow: 1,
@@ -353,6 +354,8 @@ export const styles = StyleSheet.create({
   },
   blockedClose: {
     backgroundColor: 'transparent',
+    padding: 0,
+    margin: 0,
   },
   blockedDone: {
     width: '100%',
diff --git a/app/client/mobile/src/settings/Settings.tsx b/app/client/mobile/src/settings/Settings.tsx
index ac90a0b6..f1bf31b8 100644
--- a/app/client/mobile/src/settings/Settings.tsx
+++ b/app/client/mobile/src/settings/Settings.tsx
@@ -657,7 +657,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
         <View style={styles.modal}>
           <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
           <KeyboardAwareScrollView enableOnAndroid={true} style={styles.container} contentContainerStyle={styles.content}>
-            <Surface elevation={5} mode="flat" style={styles.surface}>
+            <Surface elevation={3} mode="flat" style={styles.surface}>
               <Text style={styles.modalLabel}>{state.strings.manageTopics}</Text>
               <IconButton style={styles.modalClose} icon="close" size={24} onPress={() => setSealing(false)} />
               {!sealDelete && !sealReset && state.config.sealSet && state.config.sealUnlocked && (
@@ -875,7 +875,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
         <View style={styles.modal}>
           <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
           <KeyboardAwareScrollView enableOnAndroid={true} style={styles.container} contentContainerStyle={styles.content}>
-            <Surface elevation={1} mode="flat" style={styles.surface}>
+            <Surface elevation={3} mode="flat" style={styles.surface}>
               <Text style={styles.modalLabel}>{state.strings.profileDetails}</Text>
               <IconButton style={styles.modalClose} icon="close" size={24} onPress={() => setDetails(false)} />
               <TextInput
@@ -928,7 +928,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
         <View style={styles.modal}>
           <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
           <KeyboardAwareScrollView enableOnAndroid={true} style={styles.container} contentContainerStyle={styles.content}>
-            <Surface elevation={5} mode="flat" style={styles.surface}>
+            <Surface elevation={3} mode="flat" style={styles.surface}>
               <Text style={styles.modalLabel}>{state.strings.mfaTitle}</Text>
               <IconButton style={styles.modalClose} icon="close" size={24} onPress={() => setAuth(false)} />
               <Text style={styles.modalDescription}>{state.strings.mfaSteps}</Text>
@@ -965,7 +965,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
         <View style={styles.modal}>
           <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
           <KeyboardAwareScrollView enableOnAndroid={true} style={styles.container} contentContainerStyle={styles.content}>
-            <Surface elevation={5} mode="flat" style={styles.surface}>
+            <Surface elevation={3} mode="flat" style={styles.surface}>
               <Text style={styles.modalLabel}>{state.strings.mfaTitle}</Text>
               <IconButton style={styles.modalClose} icon="close" size={24} onPress={() => setClear(false)} />
               <Text style={styles.modalDescription}>{state.strings.disablePrompt}</Text>
@@ -986,7 +986,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
         <View style={styles.modal}>
           <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
           <KeyboardAwareScrollView enableOnAndroid={true} style={styles.container} contentContainerStyle={styles.content}>
-            <Surface elevation={5} mode="flat" style={styles.surface}>
+            <Surface elevation={3} mode="flat" style={styles.surface}>
               <Text style={styles.modalLabel}>{state.strings.changeLogin}</Text>
               <IconButton style={styles.modalClose} icon="close" size={24} onPress={() => setChange(false)} />
               <TextInput
@@ -1053,7 +1053,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
                   {state.strings.cancel}
                 </Button>
                 <Button mode="contained" loading={savingChange} disabled={state.password === '' || state.password !== state.confirm || state.taken || !state.checked} onPress={saveChange}>
-                  {state.strings.update}
+                  {state.strings.save}
                 </Button>
               </View>
             </Surface>
@@ -1064,7 +1064,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
         <View style={styles.modal}>
           <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
           <KeyboardAwareScrollView enableOnAndroid={true} style={styles.container} contentContainerStyle={styles.content}>
-            <Surface elevation={5} mode="flat" style={styles.surface}>
+            <Surface elevation={3} mode="flat" style={styles.surface}>
               <Text style={styles.modalLabel}>{state.strings.loggingOut}</Text>
               <IconButton style={styles.modalClose} icon="close" size={24} onPress={() => setLogout(false)} />
 
@@ -1089,7 +1089,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
         <View style={styles.modal}>
           <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
           <KeyboardAwareScrollView enableOnAndroid={true} style={styles.container} contentContainerStyle={styles.content}>
-            <Surface elevation={5} mode="flat" style={styles.surface}>
+            <Surface elevation={3} mode="flat" style={styles.surface}>
               <Text style={styles.modalLabel}>{state.strings.deleteAccount}</Text>
               <IconButton style={styles.modalClose} icon="close" size={24} onPress={() => setRemove(false)} />
 
@@ -1100,7 +1100,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
                 autoComplete="off"
                 autoCorrect={false}
                 value={state.remove}
-                label={state.strings.typeDelete}
+                label={state.strings.deleteKey}
                 left={<TextInput.Icon style={styles.icon} icon="delete-outline" />}
                 onChangeText={value => actions.setRemove(value)}
               />
@@ -1109,8 +1109,8 @@ export function Settings({showLogout}: {showLogout: boolean}) {
                 <Button mode="outlined" onPress={() => setRemove(false)}>
                   {state.strings.cancel}
                 </Button>
-                <Button mode="contained" loading={applyingRemove} disabled={state.remove !== state.strings.deleteKey} style={styles.remove} onPress={applyRemove}>
-                  {state.strings.delete}
+                <Button mode="contained" loading={applyingRemove} disabled={state.remove !== state.strings.delete} style={styles.remove} onPress={applyRemove}>
+                  {state.strings.remove}
                 </Button>
               </View>
             </Surface>