styling for light mode

2025-04-23 01:55:17 +00:00 · 2025-01-16 17:38:09 -08:00 · 2025-01-16 17:38:09 -08:00 · b4278d99c2
commit b4278d99c2
parent c3607a114b
8 changed files with 41 additions and 50 deletions
--- 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)',
--- 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 => {});

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