Chore: Polish proof history to prep for release

app/src/components/NavBar/DefaultNavBar.tsx

@@ -4,6 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { TextStyle, ViewStyle } from 'tamagui';
 
 import { white } from '../../utils/colors';
+import { extraYPadding } from '../../utils/constants';
 import { buttonTap } from '../../utils/haptic';
 import { NavBar } from './BaseNavBar';
 
@@ -16,7 +17,7 @@ export const DefaultNavBar = (props: NativeStackHeaderProps) => {
     <NavBar.Container
       gap={14}
       paddingHorizontal={20}
-      paddingTop={Math.max(insets.top, 12)}
+      paddingTop={Math.max(insets.top, 15) + extraYPadding}
       paddingBottom={20}
       backgroundColor={headerStyle.backgroundColor as string}
       barStyle={

app/src/components/NavBar/HomeNavBar.tsx

@@ -6,6 +6,7 @@ import { Button } from 'tamagui';
 import ActivityIcon from '../../images/icons/activity.svg';
 import SettingsIcon from '../../images/icons/settings.svg';
 import { black, neutral400, white } from '../../utils/colors';
+import { extraYPadding } from '../../utils/constants';
 import { buttonTap } from '../../utils/haptic';
 import { NavBar } from './BaseNavBar';
 
@@ -17,12 +18,12 @@ export const HomeNavBar = (props: NativeStackHeaderProps) => {
       barStyle={'light-content'}
       padding={16}
       justifyContent="space-between"
-      paddingTop={Math.max(insets.top, 20)}
+      paddingTop={Math.max(Math.ceil(insets.top), 15) + extraYPadding}
     >
       <NavBar.LeftAction
         component={
           <Button
-            size="$3"
+            size={'$3'}
             unstyled
             icon={
               <ActivityIcon width={'24'} height={'100%'} color={neutral400} />
@@ -32,11 +33,7 @@ export const HomeNavBar = (props: NativeStackHeaderProps) => {
         // disable icon click for now
         onPress={() => {
           buttonTap();
-          // props.navigation.navigate('Activity');
-          return false;
-        }}
-        style={{
-          opacity: 0,
+          props.navigation.navigate('ProofHistory');
         }}
       />
       <NavBar.Title size="large" color={white}>

app/src/navigation/home.ts

@@ -3,6 +3,8 @@ import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import { HomeNavBar } from '../components/NavBar';
 import DisclaimerScreen from '../screens/home/DisclaimerScreen';
 import HomeScreen from '../screens/home/HomeScreen';
+import ProofHistoryDetailScreen from '../screens/home/ProofHistoryDetailScreen';
+import ProofHistoryScreen from '../screens/home/ProofHistoryScreen';
 import { black } from '../utils/colors';
 
 const homeScreens = {
@@ -22,6 +24,20 @@ const homeScreens = {
       presentation: 'card',
     } as NativeStackNavigationOptions,
   },
+  ProofHistory: {
+    screen: ProofHistoryScreen,
+    options: {
+      title: 'Approved Requests',
+      navigationBarColor: black,
+      headerBackTitle: 'close',
+    },
+  },
+  ProofHistoryDetail: {
+    screen: ProofHistoryDetailScreen,
+    options: {
+      title: 'Approval',
+    },
+  },
 };
 
 export default homeScreens;

app/src/navigation/settings.ts

@@ -2,8 +2,6 @@ import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
 import CloudBackupScreen from '../screens/settings/CloudBackupScreen';
 import PassportDataInfoScreen from '../screens/settings/PassportDataInfoScreen';
-import ProofHistoryDetailScreen from '../screens/settings/ProofHistoryDetailScreen';
-import ProofHistoryScreen from '../screens/settings/ProofHistoryScreen';
 import SettingsScreen from '../screens/settings/SettingsScreen';
 import ShowRecoveryPhraseScreen from '../screens/settings/ShowRecoveryPhraseScreen';
 import { black, slate300, white } from '../utils/colors';
@@ -30,19 +28,6 @@ const settingsScreens = {
       },
     } as NativeStackNavigationOptions,
   },
-  ProofHistory: {
-    screen: ProofHistoryScreen,
-    options: {
-      title: 'Approved Requests',
-      navigationBarColor: black,
-    },
-  },
-  ProofHistoryDetail: {
-    screen: ProofHistoryDetailScreen,
-    options: {
-      title: 'Approval',
-    },
-  },
   Settings: {
     screen: SettingsScreen,
     options: {

app/src/screens/home/HomeScreen.tsx

@@ -20,7 +20,7 @@ import {
   slate800,
   white,
 } from '../../utils/colors';
-
+import { extraYPadding } from '../../utils/constants';
 const ScanButton = styled(Button, {
   borderRadius: 20,
   width: 90,
@@ -54,7 +54,7 @@ const HomeScreen: React.FC = () => {
       jc="space-between"
       flex={1}
       paddingHorizontal={20}
-      paddingBottom={bottom}
+      paddingBottom={bottom + extraYPadding}
     >
       <YStack ai="center" gap={20} justifyContent="flex-start">
         <SelfCard width="100%" />

app/src/screens/settings/ProofHistoryDetailScreen.tsx → app/src/screens/home/ProofHistoryDetailScreen.tsx

@@ -15,7 +15,9 @@ import {
   slate700,
   white,
   zinc400,
+  zinc500,
 } from '../../utils/colors';
+import { advercase, dinot, plexMono } from '../../utils/fonts';
 
 type ProofHistoryDetailScreenProps = {
   route: {
@@ -87,6 +89,7 @@ const ProofHistoryDetailScreen: React.FC<ProofHistoryDetailScreenProps> = ({
     return result;
   }, [data.disclosures]);
 
+  // TODO: fix timestamp format
   const formattedDate = useMemo(() => {
     return new Date(data.timestamp).toLocaleString('en-US', {
       month: 'long',
@@ -146,6 +149,7 @@ const ProofHistoryDetailScreen: React.FC<ProofHistoryDetailScreenProps> = ({
             paddingBottom={20}
           >
             <YStack alignItems="center" gap={12} marginTop={40}>
+              {/* TODO: add background gradient */}
               {logoSource && (
                 <Image
                   source={logoSource}
@@ -155,10 +159,21 @@ const ProofHistoryDetailScreen: React.FC<ProofHistoryDetailScreenProps> = ({
                   objectFit="contain"
                 />
               )}
-              <Text color={white} fontSize={32} fontWeight="600">
+              <Text
+                color={white}
+                fontSize={28}
+                fontWeight={400}
+                letterSpacing={1}
+                fontFamily={advercase}
+              >
                 {data.appName}
               </Text>
-              <Text color={zinc400} fontSize={16}>
+              <Text
+                color={zinc500}
+                fontSize={12}
+                fontWeight={500}
+                fontFamily={plexMono}
+              >
                 {data.appName}
               </Text>
             </YStack>
@@ -168,10 +183,12 @@ const ProofHistoryDetailScreen: React.FC<ProofHistoryDetailScreenProps> = ({
                 color={zinc400}
                 fontSize={16}
                 textAlign="center"
-                fontWeight="500"
+                fontWeight={500}
+                fontFamily={dinot}
               >
-                {data.appName} was granted access to the following information
-                from your verified Passport.
+                <Text color={white}>{data.appName}</Text> was granted access to
+                the following information from your verified{' '}
+                <Text color={white}>Passport.</Text>
               </Text>
             </YStack>
           </YStack>
@@ -183,10 +200,21 @@ const ProofHistoryDetailScreen: React.FC<ProofHistoryDetailScreenProps> = ({
           >
             <XStack alignItems="center" gap={8}>
               <CheckSquare2 color={blue600} size={12} />
-              <Text color={blue600} fontSize={12} fontWeight="500">
+              <Text
+                color={blue600}
+                fontSize={12}
+                fontWeight={500}
+                fontFamily={plexMono}
+              >
                 {proofStatus}
               </Text>
-              <Text color={blue600} fontSize={12} marginLeft="auto">
+              <Text
+                color={blue600}
+                fontSize={12}
+                marginLeft="auto"
+                fontWeight={500}
+                fontFamily={plexMono}
+              >
                 {formattedDate}
               </Text>
             </XStack>
@@ -231,7 +259,9 @@ const ProofHistoryDetailScreen: React.FC<ProofHistoryDetailScreenProps> = ({
                   <Text
                     color={isEthereumAddress ? white : zinc400}
                     fontSize={12}
-                    fontWeight="500"
+                    fontWeight={500}
+                    fontFamily={plexMono}
+                    textTransform={'uppercase'}
                   >
                     {isEthereumAddress
                       ? 'CONNECTED WALLET ADDRESS'
@@ -257,7 +287,7 @@ const ProofHistoryDetailScreen: React.FC<ProofHistoryDetailScreenProps> = ({
                     key={index}
                     backgroundColor={slate100}
                     paddingVertical={16}
-                    paddingHorizontal={20}
+                    paddingHorizontal={10}
                     borderRadius={12}
                     alignItems="center"
                   >
@@ -276,12 +306,14 @@ const ProofHistoryDetailScreen: React.FC<ProofHistoryDetailScreenProps> = ({
                       color={slate700}
                       fontSize={12}
                       flex={1}
-                      fontWeight="500"
-                      letterSpacing={0.4}
+                      fontWeight={500}
+                      letterSpacing={0.48}
+                      fontFamily={dinot}
+                      textTransform={'uppercase'}
                     >
                       {disclosure}
                     </Text>
-                    <Info color={blue600} size={16} />
+                    <Info color={blue600} size={16} fontWeight={700} />
                   </XStack>
                 ))}
               </YStack>