design polish #1 (#4089)

* fix gallery post detail screen title fixes TLON-3055 * mark logout action destructive fixes TLON-3060 * simplify and standardize bug report screen fixes TLON-3040 * move feature flags to settings root fixes TLON-3039 * polish profile edit sequence fixes TLON-3060 * fix type error
tloncorp · Oct 22, 2024 · 33a357c · 33a357c
1 parent 8c5baa4
commit 33a357c
Show file tree

Hide file tree

Showing 15 changed files with 565 additions and 423 deletions.
diff --git a/apps/tlon-mobile/src/fixtures/Form.fixture.tsx b/apps/tlon-mobile/src/fixtures/Form.fixture.tsx
@@ -2,17 +2,20 @@ import { Button, ScrollView } from '@tloncorp/ui';
 import * as Form from '@tloncorp/ui/src/components/Form';
 import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { FixtureWrapper } from './FixtureWrapper';
 
 const FormFixture = () => {
+  const insets = useSafeAreaInsets();
   const { control, reset } = useForm({
     mode: 'onChange',
     defaultValues: {
       title: '',
       description: '',
       number: 'one',
       listItem: 'chat',
+      image: undefined,
     },
   });
 
@@ -50,8 +53,14 @@ const FormFixture = () => {
   ];
 
   return (
-    <ScrollView flex={1}>
+    <ScrollView flex={1} contentContainerStyle={{ paddingTop: insets.top }}>
       <Form.FormFrame>
+        <Form.ControlledImageField
+          name={'image'}
+          label="Image"
+          control={control}
+          inputProps={{ buttonLabel: 'Upload bttton' }}
+        />
         <Form.ControlledTextField
           name={'title'}
           label="Title"

diff --git a/apps/tlon-mobile/src/fixtures/UserProfileScreen.fixture.tsx b/apps/tlon-mobile/src/fixtures/UserProfileScreen.fixture.tsx
@@ -37,6 +37,7 @@ function ProfileScreenFixture() {
           userId="~fabled-faster"
           onBack={() => {}}
           connectionStatus={{ complete: true, status: 'yes' }}
+          onPressEdit={() => {}}
           onPressGroup={() => {
             console.log('group pressed');
           }}

diff --git a/packages/app/features/settings/AppInfoScreen.tsx b/packages/app/features/settings/AppInfoScreen.tsx
@@ -2,18 +2,15 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import * as store from '@tloncorp/shared/dist/store';
 import {
   AppSetting,
-  ListItem,
   ScreenHeader,
   SizableText,
-  Stack,
   View,
   YStack,
 } from '@tloncorp/ui';
 import { preSig } from '@urbit/aura';
 import * as Application from 'expo-application';
 import * as Updates from 'expo-updates';
 import { useMemo } from 'react';
-import { useCallback } from 'react';
 import { Platform } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
@@ -29,10 +26,6 @@ export function AppInfoScreen(props: Props) {
   const { data: appInfo } = store.useAppInfo();
   const easUpdateDisplay = useMemo(() => getEasUpdateDisplay(Updates), []);
 
-  const onPressPreviewFeatures = useCallback(() => {
-    props.navigation.navigate('FeatureFlags');
-  }, [props.navigation]);
-
   return (
     <View flex={1}>
       <ScreenHeader
@@ -74,21 +67,6 @@ export function AppInfoScreen(props: Props) {
               </SizableText>
             </View>
           )}
-
-          <Stack marginTop="$xl">
-            <ListItem onPress={onPressPreviewFeatures}>
-              <ListItem.SystemIcon icon="Bang" rounded />
-              <ListItem.MainContent>
-                <ListItem.Title>Feature previews</ListItem.Title>
-              </ListItem.MainContent>
-              <ListItem.SystemIcon
-                icon="ChevronRight"
-                backgroundColor={'transparent'}
-                position="relative"
-                left="$m"
-              />
-            </ListItem>
-          </Stack>
         </YStack>
       </ScrollView>
     </View>

diff --git a/packages/app/features/settings/ProfileScreen.tsx b/packages/app/features/settings/ProfileScreen.tsx
@@ -1,4 +1,5 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { useMutableRef } from '@tloncorp/shared';
 import { NavBarView, ProfileScreenView, View } from '@tloncorp/ui';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -17,41 +18,67 @@ export default function ProfileScreen(props: Props) {
   const currentUserId = useCurrentUserId();
   const { dmLink } = useDMLureLink();
   const hasHostedAuth = useHasHostedAuth();
+  const navigationRef = useMutableRef(props.navigation);
 
   const onAppInfoPressed = useCallback(() => {
-    props.navigation.navigate('AppInfo');
-  }, [props.navigation]);
+    navigationRef.current.navigate('AppInfo');
+  }, [navigationRef]);
 
   const onPushNotifPressed = useCallback(() => {
-    props.navigation.navigate('PushNotificationSettings');
-  }, [props.navigation]);
+    navigationRef.current.navigate('PushNotificationSettings');
+  }, [navigationRef]);
 
   const onBlockedUsersPressed = useCallback(() => {
-    props.navigation.navigate('BlockedUsers');
-  }, [props.navigation]);
+    navigationRef.current.navigate('BlockedUsers');
+  }, [navigationRef]);
 
   const onManageAccountPressed = useCallback(() => {
-    props.navigation.navigate('ManageAccount');
-  }, [props.navigation]);
+    navigationRef.current.navigate('ManageAccount');
+  }, [navigationRef]);
+
+  const onExperimentalFeaturesPressed = useCallback(() => {
+    navigationRef.current.navigate('FeatureFlags');
+  }, [navigationRef]);
+
+  const onProfilePressed = useCallback(() => {
+    navigationRef.current.navigate('UserProfile', { userId: currentUserId });
+  }, [currentUserId, navigationRef]);
+
+  const onSendBugReportPressed = useCallback(() => {
+    navigationRef.current.navigate('WompWomp');
+  }, [navigationRef]);
+
+  const onNavigateToHome = useCallback(() => {
+    navigationRef.current.navigate('ChatList');
+  }, [navigationRef]);
+
+  const onNavigateToNotifications = useCallback(() => {
+    navigationRef.current.navigate('Activity');
+  }, [navigationRef]);
+
+  const onNavigateToProfileSettings = useCallback(() => {
+    navigationRef.current.navigate('Profile');
+  }, [navigationRef]);
 
   return (
     <View backgroundColor="$background" flex={1}>
       <ProfileScreenView
         hasHostedAuth={hasHostedAuth}
         currentUserId={currentUserId}
-        onEditProfilePressed={() => props.navigation.navigate('EditProfile')}
+        onProfilePressed={onProfilePressed}
         onLogoutPressed={handleLogout}
-        onSendBugReportPressed={() => props.navigation.navigate('WompWomp')}
+        onSendBugReportPressed={onSendBugReportPressed}
         onAppInfoPressed={onAppInfoPressed}
         onNotificationSettingsPressed={onPushNotifPressed}
         onBlockedUsersPressed={onBlockedUsersPressed}
         onManageAccountPressed={onManageAccountPressed}
+        onExperimentalFeaturesPressed={onExperimentalFeaturesPressed}
         dmLink={dmLink}
       />
       <NavBarView
-        navigateToHome={() => props.navigation.navigate('ChatList')}
-        navigateToNotifications={() => props.navigation.navigate('Activity')}
-        navigateToProfileSettings={() => props.navigation.navigate('Profile')}
+        navigateToHome={onNavigateToHome}
+        navigateToNotifications={onNavigateToNotifications}
+        navigateToProfileSettings={onNavigateToProfileSettings}
         currentRoute="Profile"
         currentUserId={currentUserId}
       />