feat: initial paradym theme changes (#261)

Signed-off-by: Jan <hey@janrietveld.com>
Co-authored-by: Timo Glastra <timo@animo.id>

apps/easypid/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-   <img src="assets/icon-rounded.png" alt="EasyPID Logo" height="176px" />
+   <img src="assets/icon.png" alt="Paradym Logo" height="176px" style="border-radius: 15%;" />
 </div>
 
 <h1 align="center"><b>Animo EasyPID</b></h1>

apps/easypid/app.config.js

@@ -49,16 +49,16 @@ const config = {
   icon: './assets/icon.png',
   userInterfaceStyle: 'light',
   androidStatusBar: {
-    backgroundColor: '#F2F4F6',
+    backgroundColor: '#FFFFFF',
     barStyle: 'light-content',
   },
   androidNavigationBar: {
-    backgroundColor: '#F2F4F6',
+    backgroundColor: '#FFFFFF',
   },
   splash: {
     image: './assets/splash.png',
     resizeMode: 'contain',
-    backgroundColor: '#2445CD',
+    backgroundColor: '#FFFFFF',
   },
   updates: {
     fallbackToCacheTimeout: 0,

apps/easypid/src/app/(app)/_layout.tsx

@@ -137,7 +137,6 @@ export default function AppLayout() {
           <Stack.Screen name="credentials/[id]/attributes" options={headerNormalOptions} />
           <Stack.Screen name="credentials/requestedAttributes" options={headerNormalOptions} />
           <Stack.Screen name="menu/index" options={headerNormalOptions} />
-          <Stack.Screen name="menu/feedback" options={headerNormalOptions} />
           <Stack.Screen name="menu/settings" options={headerNormalOptions} />
           <Stack.Screen name="menu/about" options={headerNormalOptions} />
           <Stack.Screen name="activity/index" options={headerNormalOptions} />

apps/easypid/src/app/authenticate.tsx

@@ -4,12 +4,11 @@ import { TypedArrayEncoder, WalletInvalidKeyError } from '@credo-ts/core'
 import { initializeAppAgent, useSecureUnlock } from '@easypid/agent'
 import { useBiometricsType } from '@easypid/hooks/useBiometricsType'
 import { secureWalletKey } from '@package/secure-store/secureUnlock'
-import { FlexPage, Heading, HeroIcons, YStack, useToastController } from '@package/ui'
+import { FlexPage, Heading, HeroIcons, IconContainer, YStack, useToastController } from '@package/ui'
 import * as SplashScreen from 'expo-splash-screen'
 import { PinDotsInput, type PinDotsInputRef } from 'packages/app/src'
 import { useEffect, useRef, useState } from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Circle } from 'tamagui'
 import { useResetWalletDevMenu } from '../utils/resetWallet'
 
 /**
@@ -108,9 +107,7 @@ export default function Authenticate() {
     <FlexPage flex-1 safeArea="y" alignItems="center">
       <YStack fg={1} gap="$6" mb={shouldStickToBottom ? -16 : undefined}>
         <YStack flex-1 alignItems="center" justifyContent="flex-end" gap="$4">
-          <Circle size="$4" backgroundColor="$grey-100">
-            <HeroIcons.LockClosed strokeWidth={2} color="$grey-700" />
-          </Circle>
+          <IconContainer h="$4" w="$4" ai="center" jc="center" icon={<HeroIcons.LockClosedFilled />} />
           <Heading variant="h2" fontWeight="$semiBold">
             Enter your app PIN code
           </Heading>

apps/easypid/src/app/onboarding/index.tsx

@@ -1,6 +1,6 @@
 import { useHasFinishedOnboarding, useOnboardingContext } from '@easypid/features/onboarding'
 import { useHaptics } from '@package/app'
-import { AnimatedStack, FlexPage, Heading, Paragraph, ProgressHeader, YStack } from '@package/ui'
+import { AnimatedStack, FlexPage, Heading, Paragraph, ProgressHeader, YStack, useMedia } from '@package/ui'
 import type React from 'react'
 import { useEffect, useRef } from 'react'
 import { AccessibilityInfo, Alert } from 'react-native'
@@ -9,6 +9,7 @@ import Animated, { FadeIn, FadeInRight, FadeOut } from 'react-native-reanimated'
 
 export default function OnboardingScreens() {
   const { withHaptics } = useHaptics()
+  const media = useMedia()
   const [hasFinishedOnboarding] = useHasFinishedOnboarding()
   const onboardingContext = useOnboardingContext()
   const headerRef = useRef(null)
@@ -56,8 +57,8 @@ export default function OnboardingScreens() {
           exiting={pageContentTransition.exiting.default}
           style={{ flexGrow: 1 }}
         >
-          <YStack fg={1} gap="$6">
-            <YStack gap="$3">
+          <YStack fg={1} gap={media.short ? '$5' : '$6'}>
+            <YStack gap={media.short ? '$2' : '$3'}>
               {onboardingContext.page.title && (
                 <Heading ref={headerRef} variant="h1">
                   {onboardingContext.page.title}

apps/easypid/src/features/activity/FunkeActivityDetailScreen.tsx

@@ -36,7 +36,7 @@ export function FunkeActivityDetailScreen() {
 
   return (
     <FlexPage p={0} gap={0}>
-      <YStack bbw="$0.5" p="$4" borderColor={isScrolledByOffset ? '$grey-200' : '$background'} />
+      <YStack bbw="$0.5" h="$4" borderColor={isScrolledByOffset ? '$grey-200' : '$background'} />
       <ScrollView onScroll={handleScroll} scrollEventThrottle={scrollEventThrottle}>
         <YStack gap="$4" marginBottom={bottom}>
           <Stack h="$8" jc="center" ai="center" pos="relative">

apps/easypid/src/features/activity/FunkeActivityScreen.tsx

@@ -1,6 +1,17 @@
 import { ActivityRowItem } from '@package/app'
 import { useScrollViewPosition } from '@package/app/src/hooks'
-import { AnimatedStack, FlexPage, Heading, Loader, Paragraph, ScrollView, Spacer, Stack, YStack } from '@package/ui'
+import {
+  AnimatedStack,
+  FlexPage,
+  HeaderContainer,
+  Heading,
+  Loader,
+  Paragraph,
+  ScrollView,
+  Spacer,
+  Stack,
+  YStack,
+} from '@package/ui'
 import { TextBackButton } from 'packages/app/src'
 import React, { useMemo } from 'react'
 import { FadeInDown } from 'react-native-reanimated'
@@ -28,12 +39,7 @@ export function FunkeActivityScreen({ entityId }: { entityId?: string }) {
 
   return (
     <FlexPage gap="$0" paddingHorizontal="$0">
-      <YStack w="100%" top={0} borderBottomWidth="$0.5" borderColor={isScrolledByOffset ? '$grey-200' : '$background'}>
-        <YStack p="$4" gap="$2">
-          <Stack h="$2" />
-          <Heading variant="h1">Activity</Heading>
-        </YStack>
-      </YStack>
+      <HeaderContainer title="Activity" isScrolledByOffset={isScrolledByOffset} />
       {activities.length === 0 ? (
         <AnimatedStack
           flexDirection="column"
@@ -54,11 +60,7 @@ export function FunkeActivityScreen({ entityId }: { entityId?: string }) {
           <Spacer size="$12" />
         </YStack>
       ) : (
-        <ScrollView
-          onScroll={handleScroll}
-          scrollEventThrottle={scrollEventThrottle}
-          contentContainerStyle={{ minHeight: '85%' }}
-        >
+        <ScrollView onScroll={handleScroll} scrollEventThrottle={scrollEventThrottle}>
           <YStack fg={1} px="$4" gap="$4">
             {Object.entries(groupedActivities).map(([key, groupActivities]) => {
               const [year, month] = key.split('-')

apps/easypid/src/features/menu/FunkeAboutScreen.tsx

@@ -1,4 +1,4 @@
-import { FlexPage, Heading, InfoButton, Paragraph, Stack, YStack } from '@package/ui'
+import { FlexPage, HeaderContainer, InfoButton, Paragraph, YStack } from '@package/ui'
 import React from 'react'
 
 import { TextBackButton } from 'packages/app'
@@ -17,15 +17,7 @@ export function FunkeAboutScreen() {
 
   return (
     <FlexPage gap="$0" paddingHorizontal="$0">
-      <YStack w="100%" top={0}>
-        <YStack p="$4" gap="$2">
-          <Stack h="$2" />
-          <Heading variant="h1" fontWeight="$bold">
-            About the wallet
-          </Heading>
-        </YStack>
-      </YStack>
-
+      <HeaderContainer title="About the wallet" />
       <YStack fg={1} px="$4" gap="$4">
         <YStack gap="$2">
           <Paragraph color="$grey-700">

apps/easypid/src/features/menu/FunkeMenuScreen.tsx

@@ -1,7 +1,18 @@
 import React from 'react'
 
 import { useHaptics, useScrollViewPosition } from '@package/app/src/hooks'
-import { Button, FlexPage, Heading, HeroIcons, ScrollView, Stack, XStack, YStack, useScaleAnimation } from '@package/ui'
+import {
+  Button,
+  FlexPage,
+  HeaderContainer,
+  Heading,
+  HeroIcons,
+  ScrollView,
+  Stack,
+  XStack,
+  YStack,
+  useScaleAnimation,
+} from '@package/ui'
 
 import { usePidCredential } from '@easypid/hooks'
 import { useWalletReset } from '@easypid/hooks/useWalletReset'
@@ -67,17 +78,8 @@ export function FunkeMenuScreen() {
 
   return (
     <FlexPage gap="$0" paddingHorizontal="$0">
-      <YStack w="100%" top={0} borderBottomWidth="$0.5" borderColor={isScrolledByOffset ? '$grey-200' : '$background'}>
-        <YStack p="$4" gap="$2">
-          <Stack h="$2" />
-          <Heading variant="h1">Menu</Heading>
-        </YStack>
-      </YStack>
-      <ScrollView
-        onScroll={handleScroll}
-        scrollEventThrottle={scrollEventThrottle}
-        contentContainerStyle={{ minHeight: '85%' }}
-      >
+      <HeaderContainer isScrolledByOffset={isScrolledByOffset} title="Menu" />
+      <ScrollView onScroll={handleScroll} scrollEventThrottle={scrollEventThrottle}>
         <YStack fg={1} jc="space-between">
           <YStack>
             {idItem}
@@ -146,7 +148,7 @@ const MenuItem = ({ item, idx, onPress }: { item: (typeof menuItems)[number]; id
       <Stack
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
-        onPress={withHaptics(() => Linking.openURL('mailto:ana@animo.id?subject=Feedback on the Funke EUDI Wallet'))}
+        onPress={withHaptics(() => Linking.openURL('mailto:ana@animo.id?subject=Feedback on the Wallet'))}
         asChild
       >
         {content}

apps/easypid/src/features/menu/FunkeSettingsScreen.tsx

@@ -1,4 +1,4 @@
-import { FlexPage, Heading, HeroIcons, ScrollView, Stack, Switch, YStack } from '@package/ui'
+import { FlexPage, HeaderContainer, HeroIcons, ScrollView, Switch, YStack } from '@package/ui'
 import React from 'react'
 
 import { TextBackButton } from 'packages/app/src'
@@ -13,18 +13,11 @@ export function FunkeSettingsScreen() {
 
   return (
     <FlexPage gap="$0" paddingHorizontal="$0">
-      <YStack w="100%" top={0} borderBottomWidth="$0.5" borderColor={isScrolledByOffset ? '$grey-200' : '$background'}>
-        <YStack p="$4" gap="$2">
-          <Stack h="$2" />
-          <Heading variant="h1" fontWeight="$bold">
-            Settings
-          </Heading>
-        </YStack>
-      </YStack>
+      <HeaderContainer title="Settings" isScrolledByOffset={isScrolledByOffset} />
       <ScrollView
         onScroll={handleScroll}
         scrollEventThrottle={scrollEventThrottle}
-        contentContainerStyle={{ minHeight: '85%' }}
+        contentContainerStyle={{ flexGrow: 1 }}
       >
         <YStack fg={1} px="$4" jc="space-between">
           <YStack gap="$4" py="$2">