feat : BottomBar + Base component + Clean Nativewind

src/components/navigation/BahlaTabBar copy.tsx

@@ -0,0 +1,278 @@
+/* ------------------------------------------------------------------ *
+ * BahlaTabBar — barre d'onglets floutée, partagée par (tabs) et (org).
+ *
+ * Une seule implémentation pour les deux parcours : le verre dépoli,
+ * le calcul de safe area, le rendu des items et l'accessibilité sont
+ * identiques. Seul le bouton central change, et il est optionnel.
+ *
+ * Usage :
+ *   <Tabs tabBar={(p) => <BahlaTabBar {...p} />}>                    // utilisateur
+ *   <Tabs tabBar={(p) => <BahlaTabBar {...p} fabRouteName="create"   // organisateur
+ *                          onFabPress={openCreateSheet} />}>
+ *
+ * Dépendances : expo-blur · expo-linear-gradient ·
+ *               react-native-safe-area-context · react-native-svg
+ * ------------------------------------------------------------------ */
+import { BlurView } from 'expo-blur';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Tabs } from 'expo-router';
+import { useCallback, type ComponentProps } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors, gradientDirection, gradients } from '@/theme/colors';
+import { fontFamily, typography } from '@/theme/typography';
+import { Plus } from 'lucide-react-native';
+
+/** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
+export const TAB_BAR_BASE_HEIGHT = 52;
+const FAB_SIZE = 62;
+
+/**
+ * expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
+ * obtient un rectangle transparent et des libellés illisibles.
+ */
+const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
+
+type ExpoRouterTabBarProps = Parameters<
+  NonNullable<ComponentProps<typeof Tabs>['tabBar']>
+>[0];
+
+type Props = ExpoRouterTabBarProps & {
+  /**
+   * Nom de la route factice qui occupe l'emplacement central.
+   * Absent côté utilisateur — il n'y a pas de bouton flottant.
+   */
+  fabRouteName?: string;
+  /** Appelé à la place d'une navigation quand on presse le bouton central. */
+  onFabPress?: () => void;
+  /** Libellé lu par les lecteurs d'écran sur le bouton central. */
+  fabAccessibilityLabel?: string;
+};
+
+export function BahlaTabBar({
+  state,
+  descriptors,
+  navigation,
+  fabRouteName,
+  onFabPress,
+  fabAccessibilityLabel = 'Créer',
+}: Props) {
+  const insets = useSafeAreaInsets();
+
+  const handlePress = useCallback(
+    (routeKey: string, routeName: string, isFocused: boolean) => {
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: routeKey,
+        canPreventDefault: true,
+      });
+      if (isFocused || event.defaultPrevented) return;
+      navigation.navigate(routeName as never);
+    },
+    [navigation],
+  );
+
+  const handleLongPress = useCallback(
+    (routeKey: string) => {
+      navigation.emit({ type: 'tabLongPress', target: routeKey });
+    },
+    [navigation],
+  );
+
+  return (
+    <BlurView
+      tint="dark"
+      intensity={SUPPORTS_BLUR ? 20 : 0}
+      blurMethod='dimezisBlurViewSdk31Plus'
+      style={[
+        styles.bar,
+        {
+          height: TAB_BAR_BASE_HEIGHT + insets.bottom,
+          paddingBottom: insets.bottom,
+          // Sans flou, le fond translucide ne suffit pas : on opacifie.
+          backgroundColor: SUPPORTS_BLUR
+            ? colors.deepBackground
+            : 'rgba(10,10,18,0.96)',
+        },
+      ]}
+    >
+      {state.routes.map((route: (typeof state.routes)[number], index: number) => {
+        const { options } = descriptors[route.key];
+        const isFocused = state.index === index;
+        const tint = isFocused ? colors.primary : colors.textSecondary;
+
+        /* --- Emplacement central : bouton flottant, pas un onglet ---- */
+        if (fabRouteName && route.name === fabRouteName) {
+          return (
+            <View key={route.key} style={styles.fabSlot}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={fabAccessibilityLabel}
+                onPress={onFabPress}
+                style={({ pressed }) => [
+                  styles.fab,
+                  pressed && styles.fabPressed,
+                ]}
+              >
+                <LinearGradient
+                  colors={gradients.signature}
+                  start={gradientDirection.start}
+                  end={gradientDirection.end}
+                  style={styles.fabGradient}
+                >
+                  <Plus size={28} color={colors.onPrimary} />
+                </LinearGradient>
+              </Pressable>
+            </View>
+          );
+        }
+
+        /* --- Onglet ordinaire ---------------------------------------- */
+        const label =
+          typeof options.tabBarLabel === 'string'
+            ? options.tabBarLabel
+            : (options.title ?? route.name);
+
+        return (
+          <Pressable
+            key={route.key}
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel ?? label}
+            onPress={() => handlePress(route.key, route.name, isFocused)}
+            onLongPress={() => handleLongPress(route.key)}
+            style={styles.item}
+          >
+            <View>
+              {options.tabBarIcon?.({
+                focused: isFocused,
+                color: tint,
+                size: 23,
+              })}
+              {options.tabBarBadge != null && (
+                <View style={styles.badge}>
+                  <Text style={styles.badgeText} numberOfLines={1}>
+                    {options.tabBarBadge}
+                  </Text>
+                </View>
+              )}
+            </View>
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.label,
+                {
+                  color: tint,
+                  fontFamily: isFocused
+                    ? fontFamily.bodySemi
+                    : fontFamily.bodyMedium,
+                },
+              ]}
+            >
+              {label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </BlurView>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingTop: 8,
+    borderTopWidth: StyleSheet.hairlineWidth * 2,
+    borderTopColor: colors.border,
+    overflow: 'visible',
+  } as ViewStyle,
+
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    gap: 5,
+    // La zone tactile couvre toute la hauteur de la barre.
+    alignSelf: 'stretch',
+    paddingTop: 2,
+  },
+
+  label: {
+    ...typography.tabLabel,
+    fontFamily: undefined, // remplacé plus haut selon l'état
+  },
+
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -8,
+    minWidth: 16,
+    height: 16,
+    paddingHorizontal: 4,
+    borderRadius: 999,
+    backgroundColor: colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  badgeText: {
+    ...typography.overlineSm,
+    fontSize: 9,
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.onPrimary,
+  },
+
+  /* Le créneau central est plus étroit que les onglets : 84 px fixes,
+     comme la colonne du même nom dans la maquette. */
+  fabSlot: {
+    width: 84,
+    alignItems: 'center',
+  },
+
+  fab: {
+    width: FAB_SIZE,
+    height: FAB_SIZE,
+    aspectRatio: 1,
+    borderRadius: 15,
+    // Remonte au-dessus de la barre et découpe un anneau dans le fond.
+    marginTop: -30,
+    overflow: 'hidden',
+    alignSelf: 'center',
+    borderWidth: 3,
+    borderColor: colors.deepBackground,
+    shadowColor: colors.primary,
+    shadowOffset: { width: 0, height: 14 },
+    shadowOpacity: 0.85,
+    shadowRadius: 17,
+    elevation: 12,
+  },
+
+  fabPressed: {
+    transform: [{ scale: 0.94 }],
+    shadowOpacity: 0.5,
+  },
+
+  fabGradient: {
+    width: '100%',
+    height: '100%',
+    aspectRatio: 1,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default BahlaTabBar;

src/components/navigation/BahlaTabBar.tsx

@@ -13,17 +13,15 @@
  * Dépendances : expo-blur · expo-linear-gradient ·
  *               react-native-safe-area-context · react-native-svg
  * ------------------------------------------------------------------ */
-import { BlurView } from 'expo-blur';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Tabs } from 'expo-router';
 import { useCallback, type ComponentProps } from 'react';
 import {
-  Platform,
   Pressable,
   StyleSheet,
   Text,
   View,
-  type ViewStyle,
+  type ViewStyle
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -33,13 +31,9 @@ import { Plus } from 'lucide-react-native';
 
 /** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
 export const TAB_BAR_BASE_HEIGHT = 52;
-const FAB_SIZE = 62;
-
-/**
- * expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
- * obtient un rectangle transparent et des libellés illisibles.
- */
-const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
+const FAB_SIZE = 72;
+const FAB_RADIUS = 24;
+const FAB_LIFT = 40;
 
 type ExpoRouterTabBarProps = Parameters<
   NonNullable<ComponentProps<typeof Tabs>['tabBar']>
@@ -88,18 +82,13 @@ export function BahlaTabBar({
   );
 
   return (
-    <BlurView
-      tint="dark"
-      intensity={SUPPORTS_BLUR ? 20 : 0}
+    <View
       style={[
         styles.bar,
         {
           height: TAB_BAR_BASE_HEIGHT + insets.bottom,
           paddingBottom: insets.bottom,
-          // Sans flou, le fond translucide ne suffit pas : on opacifie.
-          backgroundColor: SUPPORTS_BLUR
-            ? colors.deepBackground
-            : 'rgba(10,10,18,0.96)',
+          backgroundColor: colors.deepBackground,
         },
       ]}
     >
@@ -112,24 +101,28 @@ export function BahlaTabBar({
         if (fabRouteName && route.name === fabRouteName) {
           return (
             <View key={route.key} style={styles.fabSlot}>
+              <View style={styles.fabShell}>
               <Pressable
                 accessibilityRole="button"
                 accessibilityLabel={fabAccessibilityLabel}
                 onPress={onFabPress}
-                style={({ pressed }) => [
-                  styles.fab,
-                  pressed && styles.fabPressed,
-                ]}
+                style={styles.fabPressable}
               >
-                <LinearGradient
-                  colors={gradients.signature}
-                  start={gradientDirection.start}
-                  end={gradientDirection.end}
-                  style={styles.fabGradient}
-                >
-                  <Plus size={28} color={colors.onPrimary} />
-                </LinearGradient>
+                {({ pressed }) => (
+                  <LinearGradient
+                    colors={gradients.signature}
+                    start={gradientDirection.start}
+                    end={gradientDirection.end}
+                    style={[
+                      styles.fabGradient,
+                      pressed && styles.fabGradientPressed,
+                    ]}
+                  >
+                    <Plus size={28} color={colors.onPrimary} />
+                  </LinearGradient>
+                )}
               </Pressable>
+              </View>
             </View>
           );
         }
@@ -181,7 +174,7 @@ export function BahlaTabBar({
           </Pressable>
         );
       })}
-    </BlurView>
+    </View>
   );
 }
 
@@ -237,41 +230,51 @@ const styles = StyleSheet.create({
   /* Le créneau central est plus étroit que les onglets : 84 px fixes,
      comme la colonne du même nom dans la maquette. */
   fabSlot: {
-    width: 84,
+    width: 96,
     alignItems: 'center',
+    overflow: 'visible',
+    zIndex: 20,
   },
 
-  fab: {
+  fabShell: {
     width: FAB_SIZE,
     height: FAB_SIZE,
     aspectRatio: 1,
-    borderRadius: 15,
+    borderRadius: FAB_RADIUS,
     // Remonte au-dessus de la barre et découpe un anneau dans le fond.
-    marginTop: -30,
+    marginTop: -FAB_LIFT,
     overflow: 'hidden',
     alignSelf: 'center',
+    zIndex: 20,
     borderWidth: 3,
     borderColor: colors.deepBackground,
     shadowColor: colors.primary,
-    shadowOffset: { width: 0, height: 14 },
-    shadowOpacity: 0.85,
-    shadowRadius: 17,
-    elevation: 12,
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.9,
+    shadowRadius: 20,
+    elevation: 18,
   },
 
-  fabPressed: {
-    transform: [{ scale: 0.94 }],
-    shadowOpacity: 0.5,
+  fabPressable: {
+    width: '100%',
+    height: '100%',
+    borderRadius: FAB_RADIUS,
+    overflow: 'hidden',
   },
 
   fabGradient: {
     width: '100%',
     height: '100%',
     aspectRatio: 1,
-    borderRadius: 15,
+    borderRadius: FAB_RADIUS,
     alignItems: 'center',
     justifyContent: 'center',
   },
+
+  fabGradientPressed: {
+    transform: [{ scale: 0.96 }],
+    opacity: 0.92,
+  },
 });
 
 export default BahlaTabBar;

src/components/organizer/CreateActionSheet.tsx

@@ -4,18 +4,18 @@
  * ------------------------------------------------------------------ */
 import { LinearGradient } from 'expo-linear-gradient';
 import {
-    Modal,
-    Pressable,
-    StyleSheet,
-    Text,
-    View,
-    type ViewStyle,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ViewStyle,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { colors, gradientDirection, gradients } from '@/theme/colors';
 import { typography } from '@/theme/typography';
-import { Plus } from 'lucide-react-native';
+import { MessageSquare, Plus } from 'lucide-react-native';
 
 type Props = {
   visible: boolean;
@@ -32,6 +32,7 @@ export function CreateActionSheet({
 }: Props) {
   const insets = useSafeAreaInsets();
 
+  /* TODO - rendre dynamique en fonction du club connecté */
   return (
     <Modal
       visible={visible}
@@ -40,40 +41,60 @@ export function CreateActionSheet({
       onRequestClose={onClose}
     >
       <Pressable style={styles.scrim} onPress={onClose} accessibilityLabel="Fermer" />
+      
       <View style={[styles.sheet, { paddingBottom: insets.bottom + 24 }]}>
         <View style={styles.handle} />
 
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.modalTitle,
+          ]}
+        >
+          Créer - Club Vertige 
+        </Text> 
+
+        
+
         <Pressable
           accessibilityRole="button"
           onPress={onCreateEvent}
-          style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+          style={styles.rowPressable}
         >
-          <LinearGradient
-            colors={gradients.signature}
-            start={gradientDirection.start}
-            end={gradientDirection.end}
-            style={styles.iconBox}
-          >
-            <Plus size={22} color={colors.onPrimary} />
-          </LinearGradient>
-          <View style={styles.rowText}>
-            <Text style={styles.rowTitle}>Créer un événement</Text>
-            <Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
-          </View>
+          {({ pressed }) => (
+            <View style={[styles.row, pressed && styles.rowPressed, { borderColor: colors.primary, borderWidth: 0.5 }]}>
+              <LinearGradient
+                colors={gradients.signature}
+                start={gradientDirection.start}
+                end={gradientDirection.end}
+                style={styles.iconBox}
+              >
+                <Plus size={22} color={colors.onPrimary} />
+              </LinearGradient>
+              <View style={styles.rowText}>
+                <Text style={styles.rowTitle}>Créer un événement</Text>
+                <Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
+              </View>
+            </View>
+          )}
         </Pressable>
 
         <Pressable
           accessibilityRole="button"
           onPress={onCreatePost}
-          style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+          style={styles.rowPressable}
         >
-          <View style={[styles.iconBox, styles.iconBoxPlain]}>
-            <Plus size={22} color={colors.tertiary} />
-          </View>
-          <View style={styles.rowText}>
-            <Text style={styles.rowTitle}>Publier un post</Text>
-            <Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
-          </View>
+          {({ pressed }) => (
+            <View style={[styles.row, pressed && styles.rowPressed]}>
+              <View style={[styles.iconBox, styles.iconBoxPlain]}>
+                <MessageSquare size={22} color={colors.tertiary} />
+              </View>
+              <View style={styles.rowText}>
+                <Text style={styles.rowTitle}>Publier un post</Text>
+                <Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
+              </View>
+            </View>
+          )}
         </Pressable>
       </View>
     </Modal>
@@ -117,7 +138,13 @@ const styles = StyleSheet.create({
     borderColor: colors.border,
   },
 
-  rowPressed: { opacity: 0.7 },
+  rowPressable: {
+    borderRadius: 18,
+  },
+
+  rowPressed: {
+    opacity: 0.7,
+  },
 
   iconBox: {
     width: 48,
@@ -133,6 +160,13 @@ const styles = StyleSheet.create({
     borderColor: colors.border,
   },
 
+  modalTitle: {
+    ...typography.sectionLabel,
+    color: colors.textPrimary,
+    fontSize: 14,
+    marginBottom: 10,
+  },
+
   rowText: { flex: 1, gap: 2 },
 
   rowTitle: {

src/components/ui/Header.tsx

@@ -0,0 +1,91 @@
+/* ------------------------------------------------------------------ *
+ * Header — trois variantes : large, compact, overlay.
+ * ------------------------------------------------------------------ */
+import { useRouter } from 'expo-router';
+import { ChevronLeft } from 'lucide-react-native';
+import { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors } from '@/theme/colors';
+import { typography } from '@/theme/typography';
+
+type Props = {
+  title?: string;
+  /** Overline mono au-dessus du titre (variante large uniquement). */
+  overline?: string;
+  variant?: 'large' | 'compact' | 'overlay';
+  /** Flèche retour. Auto : true sauf en `large`. */
+  back?: boolean;
+  onBack?: () => void;
+  /** Actions à droite — icônes 44×44 déjà encapsulées par l'appelant. */
+  right?: ReactNode;
+};
+
+export function Header({ title, overline, variant = 'large', back, onBack, right }: Props) {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const showBack = back ?? variant !== 'large';
+  const glass = variant === 'overlay';
+
+  return (
+    <View
+      style={[
+        styles.row,
+        variant === 'overlay' && [styles.absolute, { paddingTop: insets.top + 8 }],
+        variant === 'compact' && styles.compactRow,
+      ]}
+    >
+      {showBack && (
+        <Pressable
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Retour"
+          onPress={onBack ?? (() => router.back())}
+          style={[styles.iconButton, glass && styles.iconButtonGlass]}
+        >
+          <ChevronLeft size={22} color={colors.textPrimary} strokeWidth={1.8} />
+        </Pressable>
+      )}
+
+      <View style={[styles.titleWrap, variant === 'compact' && styles.titleWrapCentered]}>
+        {overline && variant === 'large' && <Text style={styles.overline}>{overline}</Text>}
+        {title && (
+          <Text
+            numberOfLines={1}
+            style={variant === 'large' ? styles.titleLarge : styles.titleCompact}
+          >
+            {title}
+          </Text>
+        )}
+      </View>
+
+      {right ?? (showBack && variant === 'compact' ? <View style={styles.spacer} /> : null)}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingTop: 6, paddingBottom: 14 },
+  compactRow: { paddingBottom: 10 },
+  absolute: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10, paddingHorizontal: 20 },
+
+  titleWrap: { flex: 1, minWidth: 0, gap: 2 },
+  titleWrapCentered: { alignItems: 'center' },
+  overline: { ...typography.overlineSm, color: colors.textSecondary },
+  titleLarge: { ...typography.screenTitleLg, color: colors.textPrimary },
+  titleCompact: { ...typography.cardTitle, color: colors.textPrimary },
+
+  iconButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconButtonGlass: { backgroundColor: colors.glassFill, borderColor: 'transparent' },
+  spacer: { width: 44 },
+});

src/components/ui/Screen.tsx

@@ -0,0 +1,75 @@
+/* ------------------------------------------------------------------ *
+ * Screen — enveloppe d'écran. Fond, zone sûre, padding de tab bar.
+ * ------------------------------------------------------------------ */
+import { ReactNode } from 'react';
+import { ScrollView, StyleSheet, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors } from '@/theme/colors';
+
+/** Hauteur de la tab bar custom, hors safe-area. Source unique. */
+import { TAB_BAR_BASE_HEIGHT } from '@/components/navigation/BahlaTabBar';
+export const TAB_BAR_HEIGHT = TAB_BAR_BASE_HEIGHT;
+
+type Props = {
+  children: ReactNode;
+  /** `scroll` enveloppe dans un ScrollView, `static` en View simple. */
+  layout?: 'scroll' | 'static';
+  /** Applique le padding haut de la zone sûre. false pour un écran à image plein bord. */
+  edgeToEdge?: boolean;
+  /** Réserve la hauteur de la tab bar en bas. false sur les écrans modaux / (org)/create. */
+  tabBar?: boolean;
+  /** Halo violet décoratif en haut à gauche (B1, C1). */
+  halo?: boolean;
+  /** Padding horizontal des enfants. 20 par défaut, 0 pour du plein bord. */
+  gutter?: number;
+  contentContainerStyle?: ViewStyle;
+};
+
+export function Screen({
+  children,
+  layout = 'scroll',
+  edgeToEdge = false,
+  tabBar = true,
+  halo = false,
+  gutter = 20,
+  contentContainerStyle,
+}: Props) {
+  const insets = useSafeAreaInsets();
+
+  const padding: ViewStyle = {
+    paddingTop: edgeToEdge ? 0 : insets.top,
+    paddingHorizontal: gutter,
+    paddingBottom: tabBar ? TAB_BAR_HEIGHT + insets.bottom + 24 : insets.bottom + 24,
+  };
+
+  return (
+    <View style={styles.root}>
+      {halo && <View pointerEvents="none" style={styles.halo} />}
+      {layout === 'scroll' ? (
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={[padding, contentContainerStyle]}
+        >
+          {children}
+        </ScrollView>
+      ) : (
+        <View style={[styles.flex, padding, contentContainerStyle]}>{children}</View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.deepBackground },
+  flex: { flex: 1 },
+  halo: {
+    position: 'absolute',
+    width: 380,
+    height: 380,
+    borderRadius: 190,
+    top: -140,
+    left: -60,
+    backgroundColor: colors.secondarySoft,
+  },
+});