From d99eb02c7abe94894df9c9d178932fa1f793c021 Mon Sep 17 00:00:00 2001
From: Antonin CARLIN <antonin.carlin@icloud.com>
Date: Wed, 25 Sep 2024 19:15:00 +0200
Subject: [PATCH] fix: ipad layout

---
 app/(app)/profil/_layout.tsx                  | 22 +++-------------
 src/components/Badge/Badge.tsx                |  2 +-
 src/components/Chip/Chip.tsx                  |  2 +-
 .../ProfileCards/ProfileCard/ProfileCard.tsx  |  4 +--
 src/components/layouts/ProfilLayout.tsx       |  8 +++---
 src/components/menu/Item.tsx                  | 12 ++++-----
 src/components/menu/Menu.tsx                  |  4 +--
 src/screens/profil/menu/Menu.tsx              |  2 +-
 themes.ts                                     | 25 +++++++++----------
 9 files changed, 31 insertions(+), 50 deletions(-)

diff --git a/app/(app)/profil/_layout.tsx b/app/(app)/profil/_layout.tsx
index bcc965805..d622e4924 100644
--- a/app/(app)/profil/_layout.tsx
+++ b/app/(app)/profil/_layout.tsx
@@ -1,40 +1,24 @@
 import { SmallHeader } from '@/components/Header/Header'
 import { useSession } from '@/ctx/SessionProvider'
 import { Redirect, router, Stack, useNavigation } from 'expo-router'
-import { PortalHost, YStack } from 'tamagui'
+import { PortalHost, useMedia, YStack } from 'tamagui'
 
 export default function AppLayout() {
   const { isAuth } = useSession()
+  const media = useMedia()
 
   if (!isAuth) {
     return <Redirect href={'/(app)/(tabs)/evenements/'} />
   }
 
   return (
-    <Stack screenOptions={{ header: (x) => <SmallHeader {...x} />, animation: 'slide_from_right' }}>
+    <Stack screenOptions={{ header: (x) => <SmallHeader {...x} />, animation: media.gtSm ? 'none' : 'slide_from_right' }}>
       <Stack.Screen
         name="index"
         options={{
           title: 'Profil',
         }}
       />
-      <Stack.Screen
-        name="informations-personnelles"
-        options={{
-          title: 'Informations Personelles',
-          headerRight: () => (
-            <YStack>
-              <PortalHost name="ProfilHeaderRight"></PortalHost>
-            </YStack>
-          ),
-        }}
-      />
-      <Stack.Screen
-        name="cotisation-et-dons"
-        options={{
-          title: 'Cotisation et Dons',
-        }}
-      />
     </Stack>
   )
 }
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index bb6a5fa59..02d80e531 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -16,7 +16,7 @@ export type BadgeProps = {
 const Badge = ({ children, ...props }: BadgeProps) => {
   return (
     <BadgeFrame {...props}>
-      <Text.SM semibold color="$color4">
+      <Text.SM semibold color="$color5">
         {children}
       </Text.SM>
     </BadgeFrame>
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index fcd67a9f6..94d9625cc 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -16,7 +16,7 @@ export type ChipProps = {
 const Chip = ({ children, ...props }: ChipProps) => {
   return (
     <ChipFrame {...props} theme={props.theme ?? 'gray'}>
-      <Text fontWeight="$6" fontSize="$1" color="$color4">
+      <Text fontWeight="$6" fontSize="$1" color="$color5">
         {children}
       </Text>
     </ChipFrame>
diff --git a/src/components/ProfileCards/ProfileCard/ProfileCard.tsx b/src/components/ProfileCards/ProfileCard/ProfileCard.tsx
index 092bd53e9..863c6f5a1 100644
--- a/src/components/ProfileCards/ProfileCard/ProfileCard.tsx
+++ b/src/components/ProfileCards/ProfileCard/ProfileCard.tsx
@@ -60,11 +60,11 @@ export default function ProfileCard({ firstName = '', lastName = '', tags, onBut
         )}
 
         {onButtonPress && (
-          <View flex={1}>
+          <YStack>
             <VoxButton width="100%" pop variant="soft" theme="purple" iconLeft={Repeat} onPress={onButtonPress}>
               Mon espace cadre
             </VoxButton>
-          </View>
+          </YStack>
         )}
       </VoxCard.Content>
     </VoxCard>
diff --git a/src/components/layouts/ProfilLayout.tsx b/src/components/layouts/ProfilLayout.tsx
index 76192fa95..f5f1e21fc 100644
--- a/src/components/layouts/ProfilLayout.tsx
+++ b/src/components/layouts/ProfilLayout.tsx
@@ -12,11 +12,9 @@ export default function ProfilLayout({ children }: { children: React.ReactNode }
   return (
     <PageLayout>
       <PageLayout.SideBarLeft showOn="gtSm">
-        <YStack gap="$3">
-          <XStack justifyContent="flex-end">
-            <ProfilMenu />
-          </XStack>
-        </YStack>
+        <XStack justifyContent="flex-end">
+          <ProfilMenu />
+        </XStack>
       </PageLayout.SideBarLeft>
       <PageLayout.MainSingleColumn>{children}</PageLayout.MainSingleColumn>
       <PageLayout.SideBarRight />
diff --git a/src/components/menu/Item.tsx b/src/components/menu/Item.tsx
index 3fa5de614..f13ed8643 100644
--- a/src/components/menu/Item.tsx
+++ b/src/components/menu/Item.tsx
@@ -6,7 +6,7 @@ import Text from '../base/Text'
 
 const ItemFrame = styled(XStack, {
   animation: '100ms',
-  flex: 1,
+  // flex: 1,
   width: '100%',
   backgroundColor: '$white1',
   paddingHorizontal: '$4',
@@ -77,12 +77,12 @@ const Item = ({
     <ItemFrame {...props}>
       <View height="100%" width={8} backgroundColor="$gray2" display={props.active ? 'flex' : 'none'} position="absolute" top={0} left={0} />
       <Icon size={props.size === 'lg' ? '$2' : '$1'} color="$textPrimary" marginRight="$2" />
-      <ItemText size={props.size ?? 'sm'} active={props.active}>
-        {children}
-      </ItemText>
-      <XStack justifyContent="flex-end" flex={1}>
-        <ChevronRight size="$1" color="$textPrimary" />
+      <XStack width="100%" flexShrink={1}>
+        <ItemText size={props.size ?? 'sm'} active={props.active}>
+          {children}
+        </ItemText>
       </XStack>
+      <ChevronRight size="$1" color="$textPrimary" />
     </ItemFrame>
   )
 }
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 755c0f4cd..551a991a5 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -3,14 +3,14 @@ import { styled, withStaticProperties, YStack } from 'tamagui'
 
 const MenuFrame = styled(YStack, {
   backgroundColor: '$white1',
-  flex: 1,
+  // flex: 1,
   $sm: {
     width: '100%',
   },
   $gtSm: {
     overflow: 'hidden',
     borderRadius: '$4',
-    maxWidth: 260,
+    maxWidth: 270,
     elevation: 1,
   },
 })
diff --git a/src/screens/profil/menu/Menu.tsx b/src/screens/profil/menu/Menu.tsx
index ef76e10b8..e073b83d2 100644
--- a/src/screens/profil/menu/Menu.tsx
+++ b/src/screens/profil/menu/Menu.tsx
@@ -60,7 +60,7 @@ const ProfilMenu = () => {
     <Menu key="profil-menu">
       {itemsData.map((item, index) => (
         <Link asChild={!isWeb} href={item.pathname ?? '/profil'} key={index} replace={media.gtSm}>
-          <Menu.Item key={index} active={item.pathname === pathname} size={media.gtMd ? 'sm' : 'lg'} icon={item.icon} last={index === menuData.length - 1}>
+          <Menu.Item key={index} active={item.pathname === pathname} size={media.sm ? 'lg' : 'sm'} icon={item.icon} last={index === menuData.length - 1}>
             {item.children}
           </Menu.Item>
         </Link>
diff --git a/themes.ts b/themes.ts
index 020041628..a4b476f16 100644
--- a/themes.ts
+++ b/themes.ts
@@ -91,19 +91,18 @@ export const templates = (() => {
     background075: 3,
     'color/8': -1,
 
-    color0: transparencies + 1,
-    color1: transparencies + 2,
-    color2: transparencies + 3,
-    color3: transparencies + 4,
-    color4: transparencies + 5,
-    color5: transparencies + 6,
-    color6: transparencies + 7,
-    color7: transparencies + 8,
-    color8: transparencies + 9,
-    color9: transparencies + 10,
-    color10: transparencies + 11,
-    color11: transparencies + 12,
-    color12: transparencies + 13,
+    color1: transparencies + 1,
+    color2: transparencies + 2,
+    color3: transparencies + 3,
+    color4: transparencies + 4,
+    color5: transparencies + 5,
+    color6: transparencies + 6,
+    color7: transparencies + 7,
+    color8: transparencies + 8,
+    color9: transparencies + 9,
+    color10: transparencies + 10,
+    color11: transparencies + 11,
+    color12: transparencies + 12,
     color025: -1,
     color05: -2,
     color075: -3,