feat : BottomBar + Base component + Clean Nativewind

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: {