header adjustments

ephemeraHQ · Jun 21, 2024 · 9af8194 · 9af8194
1 parent f846444
commit 9af8194
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git a/components/Conversation/ConversationTitle.tsx b/components/Conversation/ConversationTitle.tsx
@@ -125,33 +125,20 @@ export default function ConversationTitle({
         }}
         style={{
           flexDirection: "row",
-          justifyContent: "space-between",
+          justifyContent: "flex-start",
           width: "100%",
           alignItems: "center",
           paddingRight: 40,
           paddingLeft: 8,
         }}
       >
-        <Text
-          style={{
-            color: textPrimaryColor(colorScheme),
-            fontSize:
-              Platform.OS === "ios"
-                ? 14 * getTitleFontScale()
-                : headerTitleStyle(colorScheme).fontSize,
-          }}
-          numberOfLines={1}
-          allowFontScaling={false}
-        >
-          {title}
-        </Text>
         {avatar ? (
           <Avatar
             uri={avatar}
-            size={24}
+            size={30}
             style={{
               marginRight: Platform.OS === "android" ? 24 : 7,
-              marginLeft: Platform.OS === "ios" ? 6 : -9,
+              marginLeft: Platform.OS === "ios" ? 0 : -9,
             }}
           />
         ) : (
@@ -165,6 +152,19 @@ export default function ConversationTitle({
             }}
           />
         )}
+        <Text
+          style={{
+            color: textPrimaryColor(colorScheme),
+            fontSize:
+              Platform.OS === "ios"
+                ? 16 * getTitleFontScale()
+                : headerTitleStyle(colorScheme).fontSize,
+          }}
+          numberOfLines={1}
+          allowFontScaling={false}
+        >
+          {title}
+        </Text>
       </TouchableOpacity>
     </View>
   );

diff --git a/screens/Navigation/ConversationListNav.ios.tsx b/screens/Navigation/ConversationListNav.ios.tsx
@@ -20,7 +20,7 @@ import NewConversationButton from "../../components/ConversationList/NewConversa
 import ProfileSettingsButton from "../../components/ConversationList/ProfileSettingsButton";
 import { useAccountsStore, useChatStore } from "../../data/store/accountsStore";
 import { useSelect } from "../../data/store/storeHelpers";
-import { headerTitleStyle, textPrimaryColor } from "../../utils/colors";
+import { textPrimaryColor } from "../../utils/colors";
 import { isDesktop } from "../../utils/device";
 import { getReadableProfile } from "../../utils/str";
 import ConversationList from "../ConversationList";
@@ -87,9 +87,7 @@ export default function ConversationListNav() {
       name="Chats"
       options={({ route, navigation }) => ({
         headerTitle: () =>
-          shouldShowConnectingOrSyncing ? <Connecting /> : undefined,
-        headerLargeTitle: true,
-        headerTitleStyle: headerTitleStyle(colorScheme),
+          shouldShowConnectingOrSyncing ? <Connecting /> : <View />,
         headerBackTitle: getReadableProfile(currentAccount, currentAccount),
         headerRight: () => (
           <>
@@ -120,7 +118,7 @@ export default function ConversationListNav() {
                 <Text
                   style={{
                     fontSize: 16,
-                    color: "black",
+                    color: "rgba(0, 0, 0, 0.6)",
                     paddingBottom: 6,
                   }}
                 >

diff --git a/screens/Navigation/ConversationNav.tsx b/screens/Navigation/ConversationNav.tsx
@@ -1,4 +1,4 @@
-import { useColorScheme } from "react-native";
+import { useColorScheme, View } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 
 import Picto from "../../components/Picto/Picto";
@@ -37,17 +37,23 @@ export default function ConversationNav(
     <NativeStack.Screen
       name="Conversation"
       options={{
+        headerShadowVisible: false,
         animation: navigationAnimation,
         headerLeft: () => (
           <TouchableOpacity
-            onPress={() => navigate("Chats")}
+            onPress={() => {
+              navigate("Chats");
+            }}
             style={{ height: 40, justifyContent: "center", marginLeft: 8 }}
           >
-            <Picto
-              picto="chevron.left"
-              size={16}
-              color={textPrimaryColor(colorScheme)}
-            />
+            <View style={{ marginRight: 8 }}>
+              <Picto
+                picto="chevron.left"
+                size={16}
+                weight="semibold"
+                color={textPrimaryColor(colorScheme)}
+              />
+            </View>
           </TouchableOpacity>
         ),
       }}