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

---
 app/client/mobile/App.tsx                     | 12 +++---
 app/client/mobile/index.js                    |  4 +-
 .../mobile/src/content/Content.styled.ts      |  1 +
 .../src/conversation/Conversation.styled.ts   |  4 ++
 .../mobile/src/conversation/Conversation.tsx  | 39 ++++++++++---------
 .../mobile/src/session/Session.styled.ts      |  3 ++
 app/client/mobile/src/session/Session.tsx     | 26 ++-----------
 app/client/mobile/src/settings/Settings.tsx   |  2 +-
 8 files changed, 41 insertions(+), 50 deletions(-)

diff --git a/app/client/mobile/App.tsx b/app/client/mobile/App.tsx
index ae785435..d1b574eb 100644
--- a/app/client/mobile/App.tsx
+++ b/app/client/mobile/App.tsx
@@ -44,12 +44,12 @@ const databagColors = {
     inverseOnSurface: 'rgb(239, 241, 237)',
     inversePrimary: 'rgb(113, 218, 166)',
     elevation: {
-      level0: 'rgb(251, 253, 248)',
-      level1: 'rgb(238, 246, 239)',
-      level2: 'rgb(231, 241, 234)',
-      level3: 'rgb(223, 237, 229)',
-      level4: 'rgb(221, 236, 227)',
-      level5: 'rgb(216, 233, 223)',
+      level0: 'rgb(255, 255, 255)',
+      level1: 'rgb(240, 240, 240)',
+      level2: 'rgb(220, 220, 220)',
+      level3: 'rgb(200, 200, 200)',
+      level4: 'rgb(180, 180, 180)',
+      level5: 'rgb(160, 160, 160)',
     },
     surfaceDisabled: 'rgba(25, 28, 26, 0.12)',
     onSurfaceDisabled: 'rgba(25, 28, 26, 0.38)',
diff --git a/app/client/mobile/index.js b/app/client/mobile/index.js
index 03636277..da55b3b9 100644
--- a/app/client/mobile/index.js
+++ b/app/client/mobile/index.js
@@ -8,9 +8,7 @@ import App from './App';
 import {name as appName} from './app.json';
 import messaging from '@react-native-firebase/messaging';
 
-console.log("CALLING REGISTER DEVICE");
-
-messaging().registerDeviceForRemoteMessages().then(() => { console.log("REGISTER SUCCESS!!!!"); });
+messaging().registerDeviceForRemoteMessages().then(() => { });
 
 messaging().setBackgroundMessageHandler(async remoteMessage => {});
 
diff --git a/app/client/mobile/src/content/Content.styled.ts b/app/client/mobile/src/content/Content.styled.ts
index e10545b3..cbd08ea9 100644
--- a/app/client/mobile/src/content/Content.styled.ts
+++ b/app/client/mobile/src/content/Content.styled.ts
@@ -27,6 +27,7 @@ export const styles = StyleSheet.create({
     borderRadius: 8,
     marginTop: 6,
     marginBottom: 6,
+    marginRight: 4,
     fontSize: 16,
   },
   indicator: {
diff --git a/app/client/mobile/src/conversation/Conversation.styled.ts b/app/client/mobile/src/conversation/Conversation.styled.ts
index bded4f80..2fab7dd6 100644
--- a/app/client/mobile/src/conversation/Conversation.styled.ts
+++ b/app/client/mobile/src/conversation/Conversation.styled.ts
@@ -112,6 +112,10 @@ export const styles = StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
   },
+  indent: {
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
   nopad: {
   },
   border: {
diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx
index 8ced5ef3..8df2730f 100644
--- a/app/client/mobile/src/conversation/Conversation.tsx
+++ b/app/client/mobile/src/conversation/Conversation.tsx
@@ -188,6 +188,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
   const containerStyle = state.layout === 'large' ? { ...styles.conversation, ...styles.largeConversation } : styles.conversation;
   const headerStyle = state.layout === 'large' ? { ...styles.header, ...styles.largeHeader } : styles.header;
   const padStyle = state.layout === 'large' ? styles.pad : styles.nopad;
+  const inputPadStyle = state.layout === 'large' ? styles.pad : styles.indent;
   const offset = state.layout === 'large' ? state.avoid - 64 : state.avoid - 120;
 
   return (
@@ -287,7 +288,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
             { media }
           </ScrollView>
         </Animated.View>
-        <View style={padStyle}>
+        <View style={inputPadStyle}>
           <TextInput multiline={true} mode="outlined" style={{ ...styles.message, fontSize: state.textSize }}
               blurOnSubmit={true} onSubmitEditing={sendMessage} returnKeyType="send"
               onFocus={()=>setAvoid(true)} onBlur={()=>setAvoid(false)} editable={!sending}
@@ -298,13 +299,13 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
           { avoid && (<View style={{ ...styles.avoid, height: offset }} />) }
 
           <View style={styles.controls}>
-            <Pressable style={styles.control} onPress={addImage}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
-            <Pressable style={styles.control} onPress={addVideo}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
-            <Pressable style={styles.control} onPress={addAudio}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="volume-high" size={24} color={Colors.primary} /></Surface></Pressable>
-            <Pressable style={styles.control} onPress={addBinary}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="file-outline" size={24} color={Colors.primary} /></Surface></Pressable>
+            <Pressable style={styles.control} onPress={addImage}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
+            <Pressable style={styles.control} onPress={addVideo}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
+            <Pressable style={styles.control} onPress={addAudio}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="volume-high" size={24} color={Colors.primary} /></Surface></Pressable>
+            <Pressable style={styles.control} onPress={addBinary}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="file-outline" size={24} color={Colors.primary} /></Surface></Pressable>
             <Divider style={styles.separator} />
             <Pressable style={styles.control} onPress={()=>setColorMenu(true)}>
-              <Surface style={styles.surface} elevation={2}>
+              <Surface style={styles.surface} elevation={2} mode="flat">
                 <Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} />
               </Surface>
             </Pressable>
@@ -314,7 +315,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
               onDismiss={()=>setSizeMenu(false)}
               anchor={(
                 <Pressable style={styles.control} onPress={()=>setSizeMenu(true)}>
-                  <Surface style={styles.surface} elevation={2}>
+                  <Surface style={styles.surface} elevation={2} mode="flat">
                     <Icon style={styles.button} source="format-size" size={24} color={Colors.primary} />
                   </Surface>
                 </Pressable>
@@ -325,17 +326,19 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
             </Menu>
 
             <View style={styles.end}>
-              <Pressable style={styles.control} onPress={sendMessage}><Surface style={styles.surface} elevation={2}>
-                { sending && (
-                  <ActivityIndicator size="small" />
-                )}
-                { !sending && state.access && (state.message || state.assets.length != 0) && (
-                  <Icon style={styles.button} source="send" size={24} color={Colors.primary} />
-                )}
-                { !sending && (!state.access || (!state.message && state.assets.length == 0)) && (
-                  <Icon style={styles.button} source="send" size={24} color={Colors.placeholder} />
-                )}
-              </Surface></Pressable>
+              <Pressable style={styles.control} onPress={sendMessage}>
+                <Surface style={styles.surface} elevation={2} mode="flat">
+                  { sending && (
+                    <ActivityIndicator size="small" />
+                  )}
+                  { !sending && state.access && (state.message || state.assets.length != 0) && (
+                    <Icon style={styles.button} source="send" size={24} color={Colors.primary} />
+                  )}
+                  { !sending && (!state.access || (!state.message && state.assets.length == 0)) && (
+                    <Icon style={styles.button} source="send" size={24} color={Colors.placeholder} />
+                  )}
+                </Surface>
+              </Pressable>
             </View>
           </View>
         </View>
diff --git a/app/client/mobile/src/session/Session.styled.ts b/app/client/mobile/src/session/Session.styled.ts
index 7b0a9ef9..1b5bf8c0 100644
--- a/app/client/mobile/src/session/Session.styled.ts
+++ b/app/client/mobile/src/session/Session.styled.ts
@@ -9,6 +9,9 @@ export const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
+  noHeader: {
+    headerBackTitleVisible: false,
+  },
   full: {
     width: '100%',
     height: '100%',
diff --git a/app/client/mobile/src/session/Session.tsx b/app/client/mobile/src/session/Session.tsx
index db63c1b1..1b7c3559 100644
--- a/app/client/mobile/src/session/Session.tsx
+++ b/app/client/mobile/src/session/Session.tsx
@@ -207,22 +207,14 @@ function ContentTab({scheme, textCard, contentTab}: {scheme: string, textCard: {
             <Content textCard={textCard} openConversation={()=>openConversation(props)} />
           )}
         </ContentStack.Screen>
-        <ContentStack.Screen name="conversation" 
-          options={{
-            headerBackTitleVisible: false,
-            ...TransitionPresets.ScaleFromCenterAndroid,
-          }}>
+        <ContentStack.Screen name="conversation" options={styles.noHeader}>
           {props => (
             <SafeAreaView style={styles.screen}>
               <Conversation openDetails={()=>props.navigation.navigate('details')} close={()=>props.navigation.goBack()} wide={false} />
             </SafeAreaView>
           )}
         </ContentStack.Screen>
-        <ContentStack.Screen name="details"
-          options={{
-            headerBackTitleVisible: false,
-            ...TransitionPresets.ScaleFromCenterAndroid,
-          }}>
+        <ContentStack.Screen name="details" options={styles.noHeader}>
           {props => (
             <Details close={()=>props.navigation.goBack()} closeAll={()=>props.navigation.popToTop()} />
           )}
@@ -255,12 +247,7 @@ function ContactTab({scheme, textContact}: {scheme: string, textContact: (cardId
             />
           )}
         </ContactStack.Screen>
-        <ContactStack.Screen
-          name="registry"
-          options={{
-            headerBackTitleVisible: false,
-            ...TransitionPresets.ScaleFromCenterAndroid,
-          }}>
+        <ContactStack.Screen name="registry" options={styles.noHeader}>
           {props => (
             <Registry
               close={props.navigation.goBack}
@@ -271,12 +258,7 @@ function ContactTab({scheme, textContact}: {scheme: string, textContact: (cardId
             />
           )}
         </ContactStack.Screen>
-        <ContactStack.Screen
-          name="profile"
-          options={{
-            headerBackTitleVisible: false,
-            ...TransitionPresets.ScaleFromCenterAndroid,
-          }}>
+        <ContactStack.Screen name="profile" options={styles.noHeader}>
           {props => <Profile close={props.navigation.goBack} params={contactParams} />}
         </ContactStack.Screen>
       </ContactStack.Navigator>
diff --git a/app/client/mobile/src/settings/Settings.tsx b/app/client/mobile/src/settings/Settings.tsx
index cd4f8c0b..1368efe2 100644
--- a/app/client/mobile/src/settings/Settings.tsx
+++ b/app/client/mobile/src/settings/Settings.tsx
@@ -456,7 +456,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
                 {state.profile.description && <Text style={styles.labelSet}>{state.profile.description}</Text>}
               </View>
               <TouchableOpacity style={styles.editDetails} onPress={() => setDetails(true)}>
-                <Surface elevation={4} mode="flat">
+                <Surface elevation={2} mode="flat">
                   <Text style={styles.editDetailsLabel}>{state.strings.edit}</Text>
                 </Surface>
               </TouchableOpacity>