styling for light mode

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',

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,

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}

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,
   },

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

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%',

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>