From 01dba5b8de36b5131ede5dbdf6ced9c4b259502b Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Thu, 16 Jan 2025 19:06:51 -0800
Subject: [PATCH] updating style for light mode

---
 app/client/mobile/App.tsx                     |  6 +++---
 app/client/mobile/src/constants/Colors.ts     |  2 +-
 .../mobile/src/content/Content.styled.ts      |  1 +
 app/client/mobile/src/content/Content.tsx     |  2 +-
 .../src/conversation/Conversation.styled.ts   |  6 +++++-
 .../mobile/src/conversation/Conversation.tsx  |  2 +-
 .../mobile/src/registry/Registry.styled.ts    |  1 -
 app/client/mobile/src/session/Session.tsx     | 19 +++++++++++++------
 app/client/mobile/src/settings/Settings.tsx   |  2 +-
 9 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/app/client/mobile/App.tsx b/app/client/mobile/App.tsx
index d1b574eb..cc5449f1 100644
--- a/app/client/mobile/App.tsx
+++ b/app/client/mobile/App.tsx
@@ -37,7 +37,7 @@ const databagColors = {
     surfaceVariant: 'rgb(220, 229, 220)',
     onSurfaceVariant: 'rgb(64, 73, 67)',
     outline: 'rgb(112, 121, 114)',
-    outlineVariant: 'rgb(192, 201, 193)',
+    outlineVariant: 'rgb(128, 128, 128)',
     shadow: 'rgb(0, 0, 0)',
     scrim: 'rgb(0, 0, 0)',
     inverseSurface: 'rgb(46, 49, 46)',
@@ -46,8 +46,8 @@ const databagColors = {
     elevation: {
       level0: 'rgb(255, 255, 255)',
       level1: 'rgb(240, 240, 240)',
-      level2: 'rgb(220, 220, 220)',
-      level3: 'rgb(200, 200, 200)',
+      level2: 'rgb(225, 225, 225)',
+      level3: 'rgb(210, 210, 210)',
       level4: 'rgb(180, 180, 180)',
       level5: 'rgb(160, 160, 160)',
     },
diff --git a/app/client/mobile/src/constants/Colors.ts b/app/client/mobile/src/constants/Colors.ts
index 6b4f32cd..422e8fd9 100644
--- a/app/client/mobile/src/constants/Colors.ts
+++ b/app/client/mobile/src/constants/Colors.ts
@@ -1,5 +1,5 @@
 export const Colors = {
-  primary: '#66aa88',
+  primary: '#408060',
   danger: '#ff8888',
   placeholder: '#888888',
   unsaved: '#555555',
diff --git a/app/client/mobile/src/content/Content.styled.ts b/app/client/mobile/src/content/Content.styled.ts
index cbd08ea9..31a5d8b1 100644
--- a/app/client/mobile/src/content/Content.styled.ts
+++ b/app/client/mobile/src/content/Content.styled.ts
@@ -60,6 +60,7 @@ export const styles = StyleSheet.create({
     height: 40,
     marginRight: 8,
     marginLeft: 4,
+    marginBottom: 4,
     display: 'flex',
     borderRadius: 8,
   },
diff --git a/app/client/mobile/src/content/Content.tsx b/app/client/mobile/src/content/Content.tsx
index 54874a56..17ca4e32 100644
--- a/app/client/mobile/src/content/Content.tsx
+++ b/app/client/mobile/src/content/Content.tsx
@@ -110,7 +110,7 @@ export function Content({openConversation, textCard}: {openConversation: ()=>voi
               };
               const Wrap = (state.layout === 'large' && focused) ? Surface : View;
               return (
-                <Wrap elevation={1}>
+                <Wrap elevation={1} mode="flat">
                   <Channel
                     containerStyle={{
                       ...styles.channel,
diff --git a/app/client/mobile/src/conversation/Conversation.styled.ts b/app/client/mobile/src/conversation/Conversation.styled.ts
index 2fab7dd6..612f6895 100644
--- a/app/client/mobile/src/conversation/Conversation.styled.ts
+++ b/app/client/mobile/src/conversation/Conversation.styled.ts
@@ -118,10 +118,14 @@ export const styles = StyleSheet.create({
   },
   nopad: {
   },
-  border: {
+  topBorder: {
     width: '100%',
     height: 2,
   },
+  border: {
+    width: '100%',
+    height: 1,
+  },
   progress: {
     height: 1,
     position: 'absolute',
diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx
index 8df2730f..22fd9b46 100644
--- a/app/client/mobile/src/conversation/Conversation.tsx
+++ b/app/client/mobile/src/conversation/Conversation.tsx
@@ -228,7 +228,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
         <IconButton style={styles.icon} mode="contained" icon="cog-transfer-outline" size={28} onPress={openDetails} />
       </View>
       <View style={padStyle}>
-        <Divider style={styles.border} bold={true} />
+        <Divider style={styles.topBorder} bold={true} />
       </View>
       <View style={styles.thread}>
         <FlatList
diff --git a/app/client/mobile/src/registry/Registry.styled.ts b/app/client/mobile/src/registry/Registry.styled.ts
index 01a8703e..2c3f494b 100644
--- a/app/client/mobile/src/registry/Registry.styled.ts
+++ b/app/client/mobile/src/registry/Registry.styled.ts
@@ -19,7 +19,6 @@ export const styles = StyleSheet.create({
     paddingLeft: 8,
     width: '100%',
     zIndex: 1,
-    height: 48,
   },
   close: {
     flexShrink: 0,
diff --git a/app/client/mobile/src/session/Session.tsx b/app/client/mobile/src/session/Session.tsx
index 1b7c3559..92e59664 100644
--- a/app/client/mobile/src/session/Session.tsx
+++ b/app/client/mobile/src/session/Session.tsx
@@ -276,7 +276,7 @@ function DetailsScreen({nav}) {
 
   const DetailsComponent = useCallback(
     (props) => (
-      <Surface elevation={1}>
+      <Surface elevation={3}>
         <Details
           closeAll={()=>closeAll(props)}
         />
@@ -293,6 +293,7 @@ function DetailsScreen({nav}) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
+        overlayColor: 'rgba(8,8,8,.9)',
       }}>
       <DetailsDrawer.Screen name="details">{({navigation}) => <ProfileScreen nav={{...nav, focus, setFocus, details: navigation}} />}</DetailsDrawer.Screen>
     </DetailsDrawer.Navigator>
@@ -319,6 +320,7 @@ function ProfileScreen({nav}) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
+        overlayColor: 'rgba(8,8,8,.9)',
       }}>
       <ProfileDrawer.Screen name="registry">{({navigation}) => <RegistryScreen nav={{...nav, profile: navigation, openContact}} />}</ProfileDrawer.Screen>
     </ProfileDrawer.Navigator>
@@ -328,7 +330,7 @@ function ProfileScreen({nav}) {
 function RegistryScreen({nav}) {
   const RegistryComponent = useCallback(
     () => (
-      <Surface elevation={1}>
+      <Surface elevation={3}>
         <Registry
           openContact={(params: ContactParams) => {
             nav.openContact(params, nav.profile.openDrawer);
@@ -348,6 +350,7 @@ function RegistryScreen({nav}) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
+        overlayColor: 'rgba(8,8,8,.9)',
       }}>
       <RegistryDrawer.Screen name="contacts">{({navigation}) => <ContactsScreen nav={{...nav, registry: navigation}} />}</RegistryDrawer.Screen>
     </RegistryDrawer.Navigator>
@@ -358,7 +361,7 @@ function ContactsScreen({nav}) {
   const [textCard, setTextCard] = useState({ cardId: null} as {cardId: null|string});
   const ContactsComponent = useCallback(
     () => (
-      <Surface elevation={1}>
+      <Surface elevation={3}>
         <Contacts
           openRegistry={nav.registry.openDrawer}
           openContact={(params: ContactParams) => {
@@ -381,8 +384,11 @@ function ContactsScreen({nav}) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
+        overlayColor: 'rgba(8,8,8,.9)',
       }}>
-      <ContactsDrawer.Screen name="settings">{({navigation}) => <SettingsScreen nav={{...nav, textCard, contacts: navigation}} />}</ContactsDrawer.Screen>
+      <ContactsDrawer.Screen name="settings">{({navigation}) => (
+          <SettingsScreen nav={{...nav, textCard, contacts: navigation}} />
+      )}</ContactsDrawer.Screen>
     </ContactsDrawer.Navigator>
   );
 }
@@ -390,7 +396,7 @@ function ContactsScreen({nav}) {
 function SettingsScreen({nav}) {
   const SettingsComponent = useCallback(
     () => (
-      <Surface elevation={1}>
+      <Surface elevation={3}>
         <SafeAreaView>
           <Settings />
         </SafeAreaView>
@@ -408,6 +414,7 @@ function SettingsScreen({nav}) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
+        overlayColor: 'rgba(8,8,8,.9)',
       }}>
       <SettingsDrawer.Screen name="home">{({navigation}) => <HomeScreen nav={{...nav, settings: navigation}} />}</SettingsDrawer.Screen>
     </SettingsDrawer.Navigator>
@@ -427,7 +434,7 @@ function HomeScreen({nav}) {
           <Content textCard={nav.textCard} openConversation={()=>nav.setFocus(true)} />
         </Surface>
       </View>
-      <Surface elevation={1} style={styles.right}>
+      <Surface elevation={1} style={styles.right} mode="flat">
         <SafeAreaView style={styles.right}>
           {nav.focus && <Conversation openDetails={nav.details.openDrawer} close={()=>nav.setFocus(false)} wide={true} />}
           {!nav.focus && <Text>FOCUS NOT SET</Text>}
diff --git a/app/client/mobile/src/settings/Settings.tsx b/app/client/mobile/src/settings/Settings.tsx
index 1368efe2..ac90a0b6 100644
--- a/app/client/mobile/src/settings/Settings.tsx
+++ b/app/client/mobile/src/settings/Settings.tsx
@@ -423,7 +423,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
               {state.profile.imageSet && <Image style={styles.logoSet} resizeMode={'contain'} source={{uri: state.imageUrl}} />}
               <View style={styles.editBar}>
                 <TouchableOpacity onPress={selectImage}>
-                  <Surface style={styles.editBorder} elevation={0}>
+                  <Surface style={styles.editBorder} elevation={2}>
                     <Text style={styles.editLogo}>{state.strings.edit}</Text>
                   </Surface>
                 </TouchableOpacity>