fix: ipad layout

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>
   )
 }

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>

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>

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>

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 />

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>
   )
 }

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,
   },
 })

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>

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,