@xetwa/design-system 1.0.35 → 1.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Buttons/IconButton/IconButton.tsx

@@ -161,11 +161,11 @@ export const IconButton = React.forwardRef<React.ElementRef<typeof Pressable>, I
             strokeWidth={text ? 2.5 : 3}
           />
         ) : (
-          <Typography style={{ color: 'red', fontSize: 10 }}>Missing</Typography>
+          <Typography variant="caption" style={{ color: 'red' }}>Missing</Typography>
         )}
 
         {!!text && (
-          <Typography style={[styles.text, { color: getTextColor(), fontSize: scaleText(size === 'sm' ? 10 : 12), marginTop: scale(4) }]}>
+          <Typography variant={size === 'sm' ? 'caption' : 'bodySm'} style={[styles.text, { color: getTextColor(), marginTop: scale(4) }]}>
             {text}
           </Typography>
         )}

package/src/components/Buttons/JourneyButton/JourneyButton.tsx

@@ -138,13 +138,19 @@ export const JourneyButton = React.forwardRef<React.ElementRef<typeof Pressable>
           
           <View style={styles.textContainer}>
             <Typography 
+              variant="label"
               numberOfLines={1} 
               adjustsFontSizeToFit 
-              style={[styles.subtitle, { color: getTextColor(), fontSize: scaleText(10), marginBottom: scale(4) }]}
+              style={[styles.subtitle, { color: getTextColor(), fontSize: scaleText(11), lineHeight: scaleText(16), marginBottom: scale(4) }]}
             >
               {subtitle}
             </Typography>
-            <Typography style={[styles.title, { color: getTextColor(), fontSize: scaleText(20) }]}>
+            <Typography 
+              variant="btnLg" 
+              numberOfLines={1} 
+              adjustsFontSizeToFit 
+              style={[styles.title, { color: getTextColor(), fontSize: scaleText(17), lineHeight: scaleText(22) }]}
+            >
               {title}
             </Typography>
           </View>

package/src/components/Buttons/MainButton/MainButton.tsx

@@ -140,11 +140,6 @@ export const MainButton = React.forwardRef<React.ElementRef<typeof Pressable>, M
     const textStyles: TextStyle[] = [
       styles.textBase,
       {
-        fontSize: {
-          sm: scaleText(12),
-          md: scaleText(16),
-          lg: scaleText(18),
-        }[size],
         letterSpacing: {
           sm: scale(0.48),
           md: scale(0.64),
@@ -243,21 +238,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     textTransform: 'uppercase',
   },
-  text_sm: {
-    fontSize: 12,
-
-    letterSpacing: 12 * 0.04, // 0.48
-  },
-  text_md: {
-    fontSize: 16,
 
-    letterSpacing: 16 * 0.04, // 0.64
-  },
-  text_lg: {
-    fontSize: 18,
-
-    letterSpacing: 18 * 0.04, // 0.72
-  },
 
   textHidden: {
     color: 'transparent',

package/src/components/Buttons/WordChip/WordChip.tsx

@@ -105,6 +105,15 @@ export const WordChip = ({
   // Press state visual adjustments
   const showPressed = isPressed && !isDisabled;
 
+  const getTypographyVariant = () => {
+    switch (size) {
+      case 'lg': return 'btnLg';
+      case 'sm': return 'bodyMd';
+      case 'md':
+      default: return 'bodyLg';
+    }
+  };
+
   return (
     <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, width ? { width } : null, style]}>
       <Pressable
@@ -136,12 +145,9 @@ export const WordChip = ({
             },
             (fullWidth || width) ? { width: '100%' } : null
           ]}>
-            <Typography style={[
+            <Typography variant={getTypographyVariant()} style={[
               styles.text,
-              { 
-                color: currentStyles.text,
-                fontSize: scaleText(size === 'lg' ? 17 : size === 'sm' ? 13 : 15),
-              }
+              { color: currentStyles.text }
             ]}>
               {word}
             </Typography>

package/src/components/Cards/BoardingPassCard/BoardingPassCard.tsx

@@ -158,7 +158,7 @@ export const BoardingPassCard = ({
         ]} />
 
         <View style={[styles.headerRow, { marginBottom: scale(16) }]}>
-          <Typography style={[styles.headerText, { fontSize: scaleText(10) }]}>CARTÃO DE EMBARQUE</Typography>
+          <Typography variant="caption" style={[styles.headerText]}>CARTÃO DE EMBARQUE</Typography>
           <View style={styles.headerPlaneContainer}>
             <Plane stroke={theme.colors.white} strokeWidth={2.2} size={scale(22)} />
           </View>
@@ -166,8 +166,8 @@ export const BoardingPassCard = ({
 
         <View style={styles.routeRow}>
           <View style={styles.cityCol}>
-            <Typography style={[styles.cityCode, { fontSize: scaleText(22) }]}>{originCode}</Typography>
-            <Typography style={[styles.cityName, { fontSize: scaleText(9) }]}>{originName}</Typography>
+            <Typography variant="h1" style={[styles.cityCode]}>{originCode}</Typography>
+            <Typography variant="caption" style={[styles.cityName]}>{originName}</Typography>
           </View>
 
           <View style={[styles.flightLineContainer, { height: scale(30), marginHorizontal: scale(12) }]}>
@@ -178,8 +178,8 @@ export const BoardingPassCard = ({
           </View>
 
           <View style={[styles.cityCol, { alignItems: 'flex-end' }]}>
-            <Typography style={[styles.cityCode, { fontSize: scaleText(22) }]}>{destCode}</Typography>
-            <Typography style={[styles.cityName, { fontSize: scaleText(9) }]}>{destName}</Typography>
+            <Typography variant="h1" style={[styles.cityCode]}>{destCode}</Typography>
+            <Typography variant="caption" style={[styles.cityName]}>{destName}</Typography>
           </View>
         </View>
       </View>
@@ -205,8 +205,8 @@ export const BoardingPassCard = ({
             {flagIconNode ? flagIconNode : <Flag countryCode={countryName} size={scale(40)} />}
           </View>
           <View style={styles.countryContent}>
-            <Typography style={[styles.countryName, { fontSize: scaleText(17) }]}>{countryName}</Typography>
-            <Typography style={[styles.countrySubtitle, { fontSize: scaleText(11) }]}>{countrySubtitle}</Typography>
+            <Typography variant="h2" style={[styles.countryName]}>{countryName}</Typography>
+            <Typography variant="bodySm" style={[styles.countrySubtitle]}>{countrySubtitle}</Typography>
           </View>
         </View>
 
@@ -220,12 +220,12 @@ export const BoardingPassCard = ({
 
         <View style={[styles.footerRow, { gap: scale(14) }]}>
           <View style={styles.footerCol}>
-            <Typography style={[styles.footerLabel, { fontSize: scaleText(9) }]}>MÓDULOS</Typography>
-            <Typography style={[styles.footerValue, { fontSize: scaleText(16) }]}>{modulesCount}</Typography>
+            <Typography variant="caption" style={[styles.footerLabel]}>MÓDULOS</Typography>
+            <Typography variant="h3" style={[styles.footerValue]}>{modulesCount}</Typography>
           </View>
           <View style={styles.footerCol}>
-            <Typography style={[styles.footerLabel, { fontSize: scaleText(9) }]}>FOCO</Typography>
-            <Typography style={[styles.footerValue, { fontSize: scaleText(16) }]}>{focusText}</Typography>
+            <Typography variant="caption" style={[styles.footerLabel]}>FOCO</Typography>
+            <Typography variant="h3" style={[styles.footerValue]}>{focusText}</Typography>
           </View>
         </View>
       </View>
@@ -267,8 +267,6 @@ const styles = StyleSheet.create({
     transform: [{ rotate: '0deg' }],
   },
   headerText: {
-
-    fontSize: 10,
     letterSpacing: 1.2,
     textTransform: 'uppercase',
     color: 'rgba(255, 255, 255, 0.75)',
@@ -282,13 +280,9 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
   },
   cityCode: {
-
-    fontSize: 22,
     color: theme.colors.white,
   },
   cityName: {
-
-    fontSize: 9,
     color: 'rgba(255, 255, 255, 0.75)',
     marginTop: 2,
   },
@@ -345,14 +339,10 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   countryName: {
-
-    fontSize: 17,
     color: '#51332d',
     marginBottom: 2,
   },
   countrySubtitle: {
-
-    fontSize: 11,
     color: '#9a8478',
   },
   divider: {
@@ -370,15 +360,11 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   footerLabel: {
-
-    fontSize: 9,
     textTransform: 'uppercase',
     color: '#b9a392',
     marginBottom: 4,
   },
   footerValue: {
-
-    fontSize: 16,
     color: '#51332d',
   },
 });

package/src/components/Cards/ModuleCard/ModuleCard.stories.tsx

@@ -10,13 +10,13 @@ const meta = {
     layout: 'padded',
     docs: {
       description: {
-        component: 'O **ModuleCard** exibe as lições no percurso principal do utilizador (a "Tree" de aprendizagem).\n\nPossui diferentes estados (`active`, `locked`, `completed`, `dark`) e pode incluir barras de progresso fragmentadas.\n\n### Exemplo de Uso\n```tsx\n<ModuleCard \n  status="active"\n  number={2}\n  title="No mercado de Dakar"\n  subtitle="Regatear, números, comida"\n  progress={0.6}\n  segments={5}\n  tagLabel="EM CURSO"\n/>\n```',
+        component: 'O **ModuleCard** exibe as lições no percurso principal do utilizador (a "Tree" de aprendizagem).\n\nPossui diferentes estados (`active`, `locked`, `completed`, `dark`, `active-dark`) e pode incluir barras de progresso fragmentadas.\n\n### Animações\n- **active**: O cartão inteiro é animado e reativo ao toque.\n- **active-dark**: O cartão é fixo, apenas os botões de ação ("Agendar Aula" e "Rever") são animados individualmente.\n- **completed**: O cartão é fixo, apenas o botão de revisão ("Rever Módulo" ou o ícone) tem animação individual.\n\n### Exemplo de Uso\n```tsx\n<ModuleCard \n  status="active"\n  number={2}\n  title="No mercado de Dakar"\n  subtitle="Regatear, números, comida"\n  progress={0.6}\n  segments={5}\n  tagLabel="EM CURSO"\n/>\n```',
       }
     }
   },
   tags: ['autodocs'],
   argTypes: {
-    status: { control: 'radio', options: ['active', 'locked', 'completed', 'dark'] },
+    status: { control: 'radio', options: ['active', 'locked', 'completed', 'dark', 'active-dark'] },
     number: { control: 'number' },
     title: { control: 'text' },
     subtitle: { control: 'text' },
@@ -68,6 +68,26 @@ export const DarkLocked: Story = {
   },
 };
 
+export const ActiveDark: Story = {
+  args: {
+    status: 'active-dark',
+    title: 'No mercado de Dakar',
+    subtitle: 'Regatear, números, comida',
+    subtext: '• 3/5',
+    tagLabel: 'AULA MARCADA',
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    status: 'completed',
+    number: 1,
+    title: 'Saudações & teranga',
+    subtitle: 'Concluído',
+    subtext: '• 5/5',
+  },
+};
+
 export const Grid: Story = {
   args: {
     status: 'active',
@@ -103,6 +123,13 @@ export const Grid: Story = {
         title="Aula ao vivo + Teste final" 
         subtitle="Acaba os 4 módulos para desbloquear" 
       />
+      <ModuleCard 
+        status="active-dark" 
+        title="Aula de revisão agendada" 
+        subtitle="Conversação e prática" 
+        subtext="• 4/4"
+        tagLabel="AULA MARCADA"
+      />
     </View>
   ),
 };

package/src/components/Cards/ModuleCard/ModuleCard.tsx

@@ -1,20 +1,27 @@
-import { View, StyleSheet, Pressable } from 'react-native';
+import { View, StyleSheet, Pressable, Animated } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { theme } from '../../../styles/theme';
 import { Tag } from '../../DataDisplay/Tag/Tag';
 import { ProgressBar } from '../../DataDisplay/ProgressBar/ProgressBar';
 import { Badge } from '../../DataDisplay/Badge/Badge';
-import { Lock, Check, GraduationCap } from 'lucide-react-native';
+import { Lock, Check, GraduationCap, RotateCcw, CalendarPlus } from 'lucide-react-native';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
+import React, { useRef } from 'react';
 
-export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark';
+export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark' | 'active-dark';
 
 /**
  * Cartão que representa uma lição ou módulo no caminho de aprendizagem.
+ * 
+ * Regras de Animação e Clique:
+ * - `active`: O cartão como um todo tem animação de escala e é clicável via `onPress`.
+ * - `active-dark`: O cartão é estático. Apenas os botões internos de "Agendar" (`onSchedulePress`) e "Rever" (`onReviewPress`) têm animação individual.
+ * - `completed`: O cartão é estático. Apenas o ícone/botão superior direito de "Rever" (`onReviewPress`) tem animação individual.
+ * - `locked` / `dark`: O cartão não é interativo.
  */
 export interface ModuleCardProps {
-  /** Estado atual da lição (ativa, trancada, concluída, ou o módulo "dark" final). */
+  /** Estado atual da lição (ativa, trancada, concluída, etc). */
   status: ModuleCardStatus;
   /** Número da lição (ex: 1, 2, 3). */
   number?: number;
@@ -38,6 +45,10 @@ export interface ModuleCardProps {
   /** Cor customizada para o subtítulo. */
   subtitleColor?: string;
   style?: ViewStyle | ViewStyle[];
+  /** Função de clique no botão de Agendar (modo active/dark). */
+  onSchedulePress?: () => void;
+  /** Função de clique no botão de Rever (modo completed/active/dark). */
+  onReviewPress?: () => void;
 }
 
 export const ModuleCard = ({
@@ -54,11 +65,53 @@ export const ModuleCard = ({
   subtitleColor,
   onPress,
   style,
+  onSchedulePress,
+  onReviewPress,
 }: ModuleCardProps) => {
   const { scale, scaleText, width } = useResponsive();
-
   const isMobileScreen = width < 400;
 
+  const scheduleScale = useRef(new Animated.Value(1)).current;
+  const reviewScale = useRef(new Animated.Value(1)).current;
+  const completedReviewScale = useRef(new Animated.Value(1)).current;
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  const handlePressIn = () => {
+    if (status !== 'active') return;
+    Animated.timing(scaleAnim, {
+      toValue: 0.95,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    if (status !== 'active') return;
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      friction: 4,
+      tension: 40,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const animateBtnIn = (anim: Animated.Value) => {
+    Animated.timing(anim, {
+      toValue: 0.9,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const animateBtnOut = (anim: Animated.Value) => {
+    Animated.spring(anim, {
+      toValue: 1,
+      friction: 4,
+      tension: 40,
+      useNativeDriver: true,
+    }).start();
+  };
+
   const getContainerStyle = () => {
     switch (status) {
       case 'active':
@@ -81,6 +134,7 @@ export const ModuleCard = ({
           ...theme.shadows.sm,
         };
       case 'dark':
+      case 'active-dark':
         return {
           borderColor: theme.colors.brown[800],
           borderWidth: 0,
@@ -96,6 +150,7 @@ export const ModuleCard = ({
       case 'locked':
         return theme.colors.brown[400];
       case 'dark':
+      case 'active-dark':
         return theme.colors.white;
       default:
         return theme.colors.brown[800];
@@ -104,7 +159,7 @@ export const ModuleCard = ({
 
   const containerStyle = getContainerStyle();
   const titleStyleColor = getTextColor();
-  const subtitleStyleColor = subtitleColor || (status === 'completed' ? theme.colors.success : status === 'locked' || status === 'dark' ? theme.colors.brown[300] : theme.colors.brown[500]);
+  const subtitleStyleColor = subtitleColor || (status === 'completed' ? theme.colors.success : status === 'locked' || status === 'dark' || status === 'active-dark' ? theme.colors.brown[300] : theme.colors.brown[500]);
 
   const activeShadow = status === 'active' ? {
     shadowColor: theme.colors.primary,
@@ -151,6 +206,8 @@ export const ModuleCard = ({
         </View>
       );
     }
+
+
     
     return (
       <Badge
@@ -164,65 +221,101 @@ export const ModuleCard = ({
   const colGap = size === 'xl' ? scale(16) : size === 'lg' ? scale(14) : isMobileScreen ? scale(8) : scale(12);
   const cardPaddingV = size === 'xl' ? scale(20) : size === 'lg' ? scale(16) : isMobileScreen ? scale(10) : scale(14);
   const cardPaddingH = size === 'xl' ? scale(20) : size === 'lg' ? scale(18) : isMobileScreen ? scale(12) : scale(15);
-  const titleFontSize = size === 'xl' ? scaleText(18) : size === 'lg' ? scaleText(16) : isMobileScreen ? scaleText(14) : scaleText(16);
-  const subtitleFontSize = size === 'xl' ? scaleText(14) : size === 'lg' ? scaleText(13) : isMobileScreen ? scaleText(10) : scaleText(12);
+  
+  const titleVariant = size === 'xl' ? 'h1' : size === 'lg' ? 'h2' : 'h3';
+
+  const subtitleVariant = size === 'xl' ? 'bodyLg' : size === 'lg' ? 'bodyMd' : 'bodySm';
+
+  let displaySubtext = subtext;
+  if (status === 'active-dark') {
+    if (subtext) {
+      if (subtext.trim().startsWith('•')) {
+        displaySubtext = `Aula de revisão ${subtext.trim()}`;
+      } else {
+        displaySubtext = `Aula de revisão • ${subtext}`;
+      }
+    } else {
+      displaySubtext = 'Aula de revisão';
+    }
+  }
 
   return (
-    <Pressable
-      style={[
-        styles.container,
-        containerStyle,
-        status === 'active' && activeShadow,
-        {
-          paddingVertical: cardPaddingV,
-          paddingHorizontal: cardPaddingH,
-          borderRadius: scale(18),
-        },
-        style,
-      ]}
-      onPress={onPress}
-      disabled={!onPress || (status === 'locked' && !onPress)}
-    >
+    <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, style]}>
+      <Pressable
+        style={[
+          styles.container,
+          containerStyle,
+          status === 'active' && activeShadow,
+          {
+            paddingVertical: cardPaddingV,
+            paddingHorizontal: cardPaddingH,
+            borderRadius: scale(18),
+          },
+        ]}
+        onPress={onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={status === 'locked'}
+      >
       <View style={styles.topRow}>
         <View style={styles.leftCol}>
           {renderLeftIconBox()}
         </View>
 
         <View style={[styles.content, { marginLeft: colGap }]}>
-          <Typography variant="h2" style={[
-            styles.title,
-            {
-              color: titleStyleColor,
-              fontSize: titleFontSize,
-              marginBottom: scale(2),
-            }
-          ]}>
+          <Typography 
+            variant={titleVariant} 
+            style={[
+              styles.title,
+              {
+                color: titleStyleColor,
+                marginBottom: scale(2),
+              }
+            ]}
+          >
             {title}
           </Typography>
 
-          {(subtitle || subtext) && (
-            <Typography variant="bodyMd" style={[
-              styles.subtitle,
-              {
-                color: subtitleStyleColor,
-                fontSize: subtitleFontSize,
-              }
-            ]}>
-              {subtitle}
-              {subtitle && subtext && ' '}
-              {subtext && <Typography style={styles.subtext}>{subtext}</Typography>}
-            </Typography>
+          {(subtitle || subtext || displaySubtext) && (
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: scale(2) }}>
+              <Typography variant={subtitleVariant} style={[
+                styles.subtitle,
+                {
+                  color: subtitleStyleColor,
+                  flexShrink: 1, // Para o texto encolher se a tag ocupar espaço
+                }
+              ]}>
+                {status !== 'active-dark' && subtitle}
+                {status !== 'active-dark' && subtitle && displaySubtext && ' '}
+                {displaySubtext && <Typography variant={subtitleVariant} style={styles.subtext}>{displaySubtext}</Typography>}
+              </Typography>
+              {tagLabel && (status === 'active-dark' || status === 'active') && (
+                <Tag
+                  label={tagLabel}
+                  variant="primary"
+                  size={isMobileScreen ? 'xs' : 'sm'}
+                  style={{ marginLeft: scale(8) }}
+                />
+              )}
+            </View>
           )}
         </View>
 
-        {(tagLabel || status === 'locked' || status === 'dark') && (
+        {(status === 'locked' || status === 'dark' || status === 'completed') && (
           <View style={[styles.rightContent, { marginLeft: colGap }]}>
-            {tagLabel && status === 'active' && (
-              <Tag
-                label={tagLabel}
-                variant="primary"
-                size={isMobileScreen ? 'xs' : 'sm'}
-              />
+            {status === 'completed' && (
+              <Animated.View style={{ transform: [{ scale: completedReviewScale }] }}>
+                <Pressable 
+                  style={styles.reviewIconButton} 
+                  onPress={onReviewPress || (() => {})}
+                  onPressIn={() => animateBtnIn(completedReviewScale)}
+                  onPressOut={() => animateBtnOut(completedReviewScale)}
+                  hitSlop={10}
+                >
+                  <RotateCcw stroke={theme.colors.primary} strokeWidth={2.5} size={isMobileScreen ? scale(20) : scale(24)} />
+                  <Typography variant="label" style={[styles.reviewIconText, { fontSize: scaleText(9) }]}>REVER</Typography>
+                </Pressable>
+              </Animated.View>
             )}
             {(status === 'locked' || status === 'dark') && (
               <Lock
@@ -244,7 +337,40 @@ export const ModuleCard = ({
           />
         </View>
       )}
+
+      {status === 'active-dark' && (
+        <View style={styles.compactDarkFooter}>
+          <Animated.View style={{ transform: [{ scale: scheduleScale }] }}>
+            <Pressable 
+              onPress={onSchedulePress || (() => {})}
+              onPressIn={() => animateBtnIn(scheduleScale)}
+              onPressOut={() => animateBtnOut(scheduleScale)}
+              hitSlop={8}
+              style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.colors.primary, paddingHorizontal: scale(14), paddingVertical: scale(6), borderRadius: 100 }}
+            >
+              <CalendarPlus stroke={theme.colors.white} strokeWidth={2.5} size={scale(14)} />
+              <Typography variant="label" style={{ color: theme.colors.white, fontSize: scaleText(12), fontWeight: 'bold', marginLeft: scale(6) }}>Agendar Aula</Typography>
+            </Pressable>
+          </Animated.View>
+
+          <Animated.View style={{ transform: [{ scale: reviewScale }] }}>
+            <Pressable 
+              style={styles.compactReviewBtn} 
+              onPress={onReviewPress || (() => {})}
+              onPressIn={() => animateBtnIn(reviewScale)}
+              onPressOut={() => animateBtnOut(reviewScale)}
+              hitSlop={8}
+            >
+              <RotateCcw stroke={theme.colors.primary} strokeWidth={2.5} size={scale(16)} />
+              <Typography variant="label" style={[styles.reviewIconText, { color: theme.colors.primary, fontSize: scaleText(10), marginLeft: scale(4), marginTop: 0 }]}>REVER</Typography>
+            </Pressable>
+          </Animated.View>
+        </View>
+      )}
+
+
     </Pressable>
+    </Animated.View>
   );
 };
 
@@ -288,13 +414,9 @@ const styles = StyleSheet.create({
     borderStyle: 'dashed' as const,
   },
   title: {
-
-    fontSize: 16,
     marginBottom: 4,
   },
   subtitle: {
-
-    fontSize: 12,
   },
   subtext: {
     color: theme.colors.brown[400],
@@ -309,4 +431,35 @@ const styles = StyleSheet.create({
     marginLeft: 12,
     flexShrink: 0,
   },
+  reviewIconButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 4,
+  },
+  reviewIconText: {
+    color: theme.colors.primary,
+    marginTop: 2,
+    textAlign: 'center',
+  },
+  compactDarkFooter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 10,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(255,255,255,0.1)',
+  },
+  compactScheduleBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  compactReviewBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.05)',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
 });

package/src/components/Cards/Passport/PassportCover.tsx

@@ -27,7 +27,7 @@ export const PassportCover = () => {
         borderRadius: scale(8)
       }]}>
 
-        <Typography style={[styles.republique, { fontSize: scaleText(12), marginBottom: scale(48) }]}>
+        <Typography variant="label" style={[styles.republique, { marginBottom: scale(48) }]}>
           RÉPUBLIQUE DE LA XETWA
         </Typography>
 
@@ -48,10 +48,10 @@ export const PassportCover = () => {
         </View>
 
         <View style={styles.titleContainer}>
-          <Typography style={[styles.title, { fontSize: scaleText(32) }]}>
+          <Typography variant="display1" style={[styles.title]}>
             PASSEPORT
           </Typography>
-          <Typography style={[styles.subtitle, { fontSize: scaleText(10), marginTop: scale(8) }]}>
+          <Typography variant="caption" style={[styles.subtitle, { marginTop: scale(8) }]}>
             FRANCOPHONIE · MONDE
           </Typography>
         </View>