Enhance ThemeScreen and ThemeContext with new themes and filtering functionality

This update introduces several new themes (Emerald, Ruby, Amethyst, Amber, Mint, Slate, Neon, and Retro Wave) to the ThemeContext, expanding the available options for users. Additionally, the ThemeScreen has been refactored to include a category filter for better organization of themes, allowing users to easily navigate between different theme types. The UI has been improved with updated styles and components, enhancing the overall user experience and visual consistency across the application.

src/contexts/ThemeContext.tsx

@@ -51,6 +51,94 @@ export const DEFAULT_THEMES: Theme[] = [
     },
     isEditable: false,
   },
+  {
+    id: 'emerald',
+    name: 'Emerald',
+    colors: {
+      ...defaultColors,
+      primary: '#2ecc71',
+      secondary: '#3498db',
+      darkBackground: '#0e1e13',
+    },
+    isEditable: false,
+  },
+  {
+    id: 'ruby',
+    name: 'Ruby',
+    colors: {
+      ...defaultColors,
+      primary: '#e74c3c',
+      secondary: '#9b59b6',
+      darkBackground: '#1a0a0a',
+    },
+    isEditable: false,
+  },
+  {
+    id: 'amethyst',
+    name: 'Amethyst',
+    colors: {
+      ...defaultColors,
+      primary: '#9b59b6',
+      secondary: '#3498db',
+      darkBackground: '#140a1c',
+    },
+    isEditable: false,
+  },
+  {
+    id: 'amber',
+    name: 'Amber',
+    colors: {
+      ...defaultColors,
+      primary: '#f39c12',
+      secondary: '#d35400',
+      darkBackground: '#1a140a',
+    },
+    isEditable: false,
+  },
+  {
+    id: 'mint',
+    name: 'Mint',
+    colors: {
+      ...defaultColors,
+      primary: '#1abc9c',
+      secondary: '#16a085',
+      darkBackground: '#0a1a17',
+    },
+    isEditable: false,
+  },
+  {
+    id: 'slate',
+    name: 'Slate',
+    colors: {
+      ...defaultColors,
+      primary: '#7f8c8d',
+      secondary: '#95a5a6',
+      darkBackground: '#10191a',
+    },
+    isEditable: false,
+  },
+  {
+    id: 'neon',
+    name: 'Neon',
+    colors: {
+      ...defaultColors,
+      primary: '#00ff00',
+      secondary: '#ff00ff',
+      darkBackground: '#0a0a0a',
+    },
+    isEditable: false,
+  },
+  {
+    id: 'retro',
+    name: 'Retro Wave',
+    colors: {
+      ...defaultColors,
+      primary: '#ff00ff',
+      secondary: '#00ffff',
+      darkBackground: '#150036',
+    },
+    isEditable: false,
+  },
 ];
 
 // Theme context props

src/screens/ThemeScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import {
   View,
   Text,
@@ -11,6 +11,7 @@ import {
   TextInput,
   Dimensions,
   StatusBar,
+  FlatList,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationProp } from '@react-navigation/native';
@@ -23,6 +24,14 @@ import { RootStackParamList } from '../navigation/AppNavigator';
 
 const { width } = Dimensions.get('window');
 
+// Theme categories for organization
+const THEME_CATEGORIES = [
+  { id: 'all', name: 'All Themes' },
+  { id: 'dark', name: 'Dark Themes' },
+  { id: 'colorful', name: 'Colorful' },
+  { id: 'custom', name: 'My Themes' },
+];
+
 interface ThemeCardProps {
   theme: Theme;
   isSelected: boolean;
@@ -43,7 +52,12 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
       style={[
         styles.themeCard,
         isSelected && styles.selectedThemeCard,
-        { borderColor: theme.colors.primary }
+        { 
+          borderColor: isSelected ? theme.colors.primary : 'transparent',
+          backgroundColor: Platform.OS === 'ios' 
+            ? `${theme.colors.darkBackground}60` 
+            : 'rgba(255, 255, 255, 0.07)'
+        }
       ]}
       onPress={onSelect}
       activeOpacity={0.7}
@@ -53,34 +67,32 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
           {theme.name}
         </Text>
         {isSelected && (
-          <MaterialIcons name="check-circle" size={20} color={theme.colors.primary} />
+          <MaterialIcons name="check-circle" size={18} color={theme.colors.primary} />
         )}
       </View>
       
       <View style={styles.colorPreviewContainer}>
-        <View style={[styles.colorPreview, { backgroundColor: theme.colors.primary }]}>
+        <View style={[styles.colorPreview, { backgroundColor: theme.colors.primary }, styles.colorPreviewShadow]} />
-          <Text style={styles.colorPreviewLabel}>Primary</Text>
+        <View style={[styles.colorPreview, { backgroundColor: theme.colors.secondary }, styles.colorPreviewShadow]} />
-        </View>
+        <View style={[styles.colorPreview, { backgroundColor: theme.colors.darkBackground }, styles.colorPreviewShadow]} />
-        <View style={[styles.colorPreview, { backgroundColor: theme.colors.secondary }]}>
-          <Text style={styles.colorPreviewLabel}>Secondary</Text>
-        </View>
-        <View style={[styles.colorPreview, { backgroundColor: theme.colors.darkBackground }]}>
-          <Text style={styles.colorPreviewLabel}>Background</Text>
-        </View>
       </View>
       
       {theme.isEditable && (
         <View style={styles.themeCardActions}>
           {onEdit && (
-            <TouchableOpacity style={styles.themeCardAction} onPress={onEdit}>
+            <TouchableOpacity 
-              <MaterialIcons name="edit" size={18} color={theme.colors.primary} />
+              style={[styles.themeCardAction, styles.buttonShadow]} 
-              <Text style={[styles.themeCardActionText, { color: theme.colors.primary }]}>Edit</Text>
+              onPress={onEdit}
+            >
+              <MaterialIcons name="edit" size={16} color={theme.colors.primary} />
             </TouchableOpacity>
           )}
           {onDelete && (
-            <TouchableOpacity style={styles.themeCardAction} onPress={onDelete}>
+            <TouchableOpacity 
-              <MaterialIcons name="delete" size={18} color={theme.colors.error} />
+              style={[styles.themeCardAction, styles.buttonShadow]} 
-              <Text style={[styles.themeCardActionText, { color: theme.colors.error }]}>Delete</Text>
+              onPress={onDelete}
+            >
+              <MaterialIcons name="delete" size={16} color={theme.colors.error} />
             </TouchableOpacity>
           )}
         </View>
@@ -89,6 +101,39 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
   );
 };
 
+// Filter tab component
+interface FilterTabProps {
+  category: { id: string; name: string };
+  isActive: boolean;
+  onPress: () => void;
+  primaryColor: string;
+}
+
+const FilterTab: React.FC<FilterTabProps> = ({ 
+  category, 
+  isActive, 
+  onPress,
+  primaryColor 
+}) => (
+  <TouchableOpacity
+    style={[
+      styles.filterTab,
+      isActive && { backgroundColor: primaryColor },
+      styles.buttonShadow
+    ]}
+    onPress={onPress}
+  >
+    <Text 
+      style={[
+        styles.filterTabText, 
+        isActive && { color: '#FFFFFF' }
+      ]}
+    >
+      {category.name}
+    </Text>
+  </TouchableOpacity>
+);
+
 type ColorKey = 'primary' | 'secondary' | 'darkBackground';
 
 interface ThemeColorEditorProps {
@@ -137,74 +182,119 @@ const ThemeColorEditor: React.FC<ThemeColorEditorProps> = ({
     });
   };
 
+  // Compact preview component
+  const ThemePreview = () => (
+    <View style={[styles.previewContainer, { backgroundColor: themeColors.darkBackground }]}>
+      <View style={styles.previewContent}>
+        {/* App header */}
+        <View style={styles.previewHeader}>
+          <View style={styles.previewHeaderTitle} />
+          <View style={styles.previewIconGroup}>
+            <View style={styles.previewIcon} />
+            <View style={styles.previewIcon} />
+          </View>
+        </View>
+        
+        {/* Content area */}
+        <View style={styles.previewBody}>
+          {/* Featured content poster */}
+          <View style={styles.previewFeatured}>
+            <View style={styles.previewPosterGradient} />
+            <View style={styles.previewTitle} />
+            <View style={styles.previewButtonRow}>
+              <View style={[styles.previewPlayButton, { backgroundColor: themeColors.primary }]} />
+              <View style={styles.previewActionButton} />
+            </View>
+          </View>
+          
+          {/* Content row */}
+          <View style={styles.previewSectionHeader}>
+            <View style={styles.previewSectionTitle} />
+          </View>
+          <View style={styles.previewPosterRow}>
+            <View style={styles.previewPoster} />
+            <View style={styles.previewPoster} />
+            <View style={styles.previewPoster} />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+
   return (
     <View style={styles.editorContainer}>
-      <Text style={styles.editorTitle}>Custom Theme</Text>
+      <View style={styles.editorHeader}>
-      
+        <TouchableOpacity
-      <View style={styles.inputContainer}>
+          style={styles.editorBackButton}
-        <Text style={styles.inputLabel}>Theme Name</Text>
+          onPress={onCancel}
+        >
+          <MaterialIcons name="arrow-back" size={20} color="#FFFFFF" />
+        </TouchableOpacity>
         <TextInput
-          style={styles.textInput}
+          style={styles.editorTitleInput}
           value={themeName}
           onChangeText={setThemeName}
-          placeholder="Enter theme name"
+          placeholder="Theme name"
           placeholderTextColor="rgba(255,255,255,0.5)"
         />
+        <TouchableOpacity
+          style={styles.editorSaveButton}
+          onPress={handleSave}
+        >
+          <Text style={styles.saveButtonText}>Save</Text>
+        </TouchableOpacity>
       </View>
       
-      <View style={styles.colorSelectorContainer}>
+      <View style={styles.editorBody}>
-        <TouchableOpacity
+        <View style={styles.colorSectionRow}>
-          style={[
+          <ThemePreview />
-            styles.colorSelectorButton,
+          
-            selectedColorKey === 'primary' && styles.selectedColorButton,
+          <View style={styles.colorButtonsColumn}>
-            { backgroundColor: themeColors.primary }
+            <TouchableOpacity
-          ]}
+              style={[
-          onPress={() => setSelectedColorKey('primary')}
+                styles.colorSelectorButton,
-        >
+                selectedColorKey === 'primary' && styles.selectedColorButton,
-          <Text style={styles.colorButtonText}>Primary</Text>
+                { backgroundColor: themeColors.primary }
-        </TouchableOpacity>
+              ]}
+              onPress={() => setSelectedColorKey('primary')}
+            >
+              <Text style={styles.colorButtonText}>Primary</Text>
+            </TouchableOpacity>
+            
+            <TouchableOpacity
+              style={[
+                styles.colorSelectorButton,
+                selectedColorKey === 'secondary' && styles.selectedColorButton,
+                { backgroundColor: themeColors.secondary }
+              ]}
+              onPress={() => setSelectedColorKey('secondary')}
+            >
+              <Text style={styles.colorButtonText}>Secondary</Text>
+            </TouchableOpacity>
+            
+            <TouchableOpacity
+              style={[
+                styles.colorSelectorButton,
+                selectedColorKey === 'darkBackground' && styles.selectedColorButton,
+                { backgroundColor: themeColors.darkBackground }
+              ]}
+              onPress={() => setSelectedColorKey('darkBackground')}
+            >
+              <Text style={styles.colorButtonText}>Background</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
         
-        <TouchableOpacity
+        <View style={styles.colorPickerContainer}>
-          style={[
+          <ColorPicker
-            styles.colorSelectorButton,
+            color={themeColors[selectedColorKey]}
-            selectedColorKey === 'secondary' && styles.selectedColorButton,
+            onColorChange={handleColorChange}
-            { backgroundColor: themeColors.secondary }
+            thumbSize={22}
-          ]}
+            sliderSize={22}
-          onPress={() => setSelectedColorKey('secondary')}
+            noSnap={true}
-        >
+            row={false}
-          <Text style={styles.colorButtonText}>Secondary</Text>
+          />
-        </TouchableOpacity>
+        </View>
-        
-        <TouchableOpacity
-          style={[
-            styles.colorSelectorButton,
-            selectedColorKey === 'darkBackground' && styles.selectedColorButton,
-            { backgroundColor: themeColors.darkBackground }
-          ]}
-          onPress={() => setSelectedColorKey('darkBackground')}
-        >
-          <Text style={styles.colorButtonText}>Background</Text>
-        </TouchableOpacity>
-      </View>
-      
-      <View style={styles.colorPickerContainer}>
-        <ColorPicker
-          color={themeColors[selectedColorKey]}
-          onColorChange={handleColorChange}
-          thumbSize={30}
-          sliderSize={30}
-          noSnap={true}
-          row={false}
-        />
-      </View>
-      
-      <View style={styles.editorActions}>
-        <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
-          <Text style={styles.cancelButtonText}>Cancel</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.saveButton} onPress={handleSave}>
-          <Text style={styles.saveButtonText}>Save Theme</Text>
-        </TouchableOpacity>
       </View>
     </View>
   );
@@ -224,6 +314,7 @@ const ThemeScreen: React.FC = () => {
   
   const [isEditMode, setIsEditMode] = useState(false);
   const [editingTheme, setEditingTheme] = useState<Theme | null>(null);
+  const [activeFilter, setActiveFilter] = useState('all');
   
   // Force consistent status bar settings
   useEffect(() => {
@@ -241,6 +332,34 @@ const ThemeScreen: React.FC = () => {
     return unsubscribe;
   }, [navigation]);
 
+  // Filter themes based on selected category
+  const filteredThemes = useMemo(() => {
+    switch (activeFilter) {
+      case 'dark':
+        // Themes with darker colors
+        return availableThemes.filter(theme => 
+          !theme.isEditable && 
+          theme.id !== 'neon' && 
+          theme.id !== 'retro'
+        );
+      case 'colorful':
+        // Themes with vibrant colors
+        return availableThemes.filter(theme => 
+          !theme.isEditable && 
+          (theme.id === 'neon' || 
+           theme.id === 'retro' || 
+           theme.id === 'sunset' || 
+           theme.id === 'amber')
+        );
+      case 'custom':
+        // User's custom themes
+        return availableThemes.filter(theme => theme.isEditable);
+      default:
+        // All themes
+        return availableThemes;
+    }
+  }, [availableThemes, activeFilter]);
+
   const handleThemeSelect = useCallback((themeId: string) => {
     setCurrentTheme(themeId);
   }, [setCurrentTheme]);
@@ -345,7 +464,7 @@ const ThemeScreen: React.FC = () => {
     ]}>
       <View style={styles.header}>
         <TouchableOpacity 
-          style={styles.backButton}
+          style={[styles.backButton, styles.buttonShadow]}
           onPress={() => navigation.goBack()}
         >
           <MaterialIcons name="arrow-back" size={24} color={currentTheme.colors.text} />
@@ -353,13 +472,36 @@ const ThemeScreen: React.FC = () => {
         <Text style={[styles.headerTitle, { color: currentTheme.colors.text }]}>App Themes</Text>
       </View>
       
-      <ScrollView style={styles.content} contentContainerStyle={styles.contentContainer}>
+      {/* Category filter */}
+      <View style={styles.filterContainer}>
+        <FlatList
+          data={THEME_CATEGORIES}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <FilterTab
+              category={item}
+              isActive={activeFilter === item.id}
+              onPress={() => setActiveFilter(item.id)}
+              primaryColor={currentTheme.colors.primary}
+            />
+          )}
+          contentContainerStyle={styles.filterList}
+        />
+      </View>
+      
+      <ScrollView 
+        style={styles.content} 
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}
+      >
         <Text style={[styles.sectionTitle, { color: currentTheme.colors.textMuted }]}>
           SELECT THEME
         </Text>
         
         <View style={styles.themeGrid}>
-          {availableThemes.map(theme => (
+          {filteredThemes.map(theme => (
             <ThemeCard
               key={theme.id}
               theme={theme}
@@ -372,10 +514,14 @@ const ThemeScreen: React.FC = () => {
         </View>
         
         <TouchableOpacity 
-          style={[styles.createButton, { backgroundColor: currentTheme.colors.primary }]} 
+          style={[
+            styles.createButton, 
+            { backgroundColor: currentTheme.colors.primary },
+            styles.buttonShadow
+          ]} 
           onPress={handleCreateTheme}
         >
-          <MaterialIcons name="add" size={24} color="#FFFFFF" />
+          <MaterialIcons name="add" size={20} color="#FFFFFF" />
           <Text style={styles.createButtonText}>Create Custom Theme</Text>
         </TouchableOpacity>
       </ScrollView>
@@ -390,26 +536,50 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 16,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
   },
   backButton: {
-    padding: 8,
+    padding: 6,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
   },
   headerTitle: {
-    fontSize: 20,
+    fontSize: 18,
     fontWeight: 'bold',
-    marginLeft: 16,
+    marginLeft: 12,
   },
   content: {
     flex: 1,
   },
   contentContainer: {
-    padding: 16,
+    padding: 12,
+    paddingBottom: 24,
+  },
+  filterContainer: {
+    marginBottom: 8,
+  },
+  filterList: {
+    paddingHorizontal: 12,
+  },
+  filterTab: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+    marginRight: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  filterTabText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: 'rgba(255, 255, 255, 0.8)',
   },
   sectionTitle: {
     fontSize: 12,
     fontWeight: 'bold',
-    marginBottom: 16,
+    marginBottom: 10,
+    letterSpacing: 0.5,
+    textTransform: 'uppercase',
   },
   themeGrid: {
     flexDirection: 'row',
@@ -417,13 +587,20 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   themeCard: {
-    width: (width - 48) / 2,
+    width: (width - 36) / 2,
-    marginBottom: 16,
+    marginBottom: 12,
     borderRadius: 12,
-    padding: 12,
+    padding: 10,
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
     borderWidth: 2,
     borderColor: 'transparent',
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
   },
   selectedThemeCard: {
     borderWidth: 2,
@@ -432,93 +609,221 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: 12,
+    marginBottom: 8,
   },
   themeCardTitle: {
-    fontSize: 16,
+    fontSize: 14,
     fontWeight: 'bold',
   },
   colorPreviewContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginBottom: 12,
+    marginBottom: 8,
   },
   colorPreview: {
-    width: 30,
+    width: 24,
-    height: 30,
+    height: 24,
-    borderRadius: 15,
+    borderRadius: 12,
-    justifyContent: 'center',
-    alignItems: 'center',
   },
-  colorPreviewLabel: {
+  colorPreviewShadow: {
-    fontSize: 6,
+    shadowColor: "#000",
-    color: '#FFFFFF',
+    shadowOffset: {
-    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+      width: 0,
-    textShadowOffset: { width: 0, height: 1 },
+      height: 1,
-    textShadowRadius: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.5,
+    elevation: 2,
   },
   themeCardActions: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'flex-end',
   },
   themeCardAction: {
-    flexDirection: 'row',
+    padding: 6,
-    alignItems: 'center',
+    marginLeft: 8,
-    padding: 4,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderRadius: 16,
   },
-  themeCardActionText: {
+  buttonShadow: {
-    fontSize: 12,
+    shadowColor: "#000",
-    marginLeft: 4,
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41,
+    elevation: 2,
   },
   createButton: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 16,
+    padding: 12,
-    borderRadius: 12,
+    borderRadius: 10,
-    marginTop: 16,
+    marginTop: 12,
   },
   createButtonText: {
     color: '#FFFFFF',
     fontWeight: 'bold',
+    fontSize: 14,
     marginLeft: 8,
   },
+  
+  // Editor styles
   editorContainer: {
     flex: 1,
-    padding: 16,
   },
-  editorTitle: {
+  editorHeader: {
-    fontSize: 22,
+    flexDirection: 'row',
-    fontWeight: 'bold',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  editorBackButton: {
+    padding: 5,
+    borderRadius: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.12)',
+  },
+  editorTitleInput: {
+    flex: 1,
     color: '#FFFFFF',
-    marginBottom: 24,
-  },
-  inputContainer: {
-    marginBottom: 24,
-  },
-  inputLabel: {
     fontSize: 14,
-    color: 'rgba(255,255,255,0.7)',
+    fontWeight: 'bold',
-    marginBottom: 8,
+    marginHorizontal: 10,
+    padding: 0,
+    height: 28,
   },
-  textInput: {
+  editorSaveButton: {
-    backgroundColor: 'rgba(255,255,255,0.1)',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+    backgroundColor: colors.primary,
+  },
+  editorBody: {
+    flex: 1,
+    padding: 10,
+  },
+  colorSectionRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  colorButtonsColumn: {
+    width: width * 0.4 - 20, // 40% minus padding
+    marginLeft: 10,
+    justifyContent: 'space-between',
+  },
+  previewContainer: {
+    width: width * 0.6,
+    height: 120,
     borderRadius: 8,
-    padding: 12,
+    overflow: 'hidden',
-    color: '#FFFFFF',
+    padding: 4,
-    fontSize: 16,
   },
-  colorSelectorContainer: {
+  previewContent: {
+    flex: 1,
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  previewHeader: {
+    height: 16,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginBottom: 24,
+    alignItems: 'center',
+    paddingHorizontal: 4,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  previewHeaderTitle: {
+    width: 40,
+    height: 8,
+    borderRadius: 2,
+    backgroundColor: 'rgba(255,255,255,0.4)',
+  },
+  previewIconGroup: {
+    flexDirection: 'row',
+  },
+  previewIcon: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: 'rgba(255,255,255,0.4)',
+    marginLeft: 4,
+  },
+  previewBody: {
+    flex: 1,
+    padding: 2,
+  },
+  previewFeatured: {
+    height: 50,
+    borderRadius: 4,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    marginBottom: 4,
+    justifyContent: 'flex-end',
+    padding: 4,
+  },
+  previewPosterGradient: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 30,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  previewTitle: {
+    width: 60,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: 'rgba(255,255,255,0.7)',
+    marginBottom: 4,
+  },
+  previewButtonRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  previewPlayButton: {
+    width: 35,
+    height: 12,
+    borderRadius: 3,
+    marginRight: 4,
+  },
+  previewActionButton: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+  },
+  previewSectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 2,
+  },
+  previewSectionTitle: {
+    width: 40,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: 'rgba(255,255,255,0.4)',
+  },
+  previewPosterRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  previewPoster: {
+    width: '30%',
+    height: 30,
+    borderRadius: 3,
+    backgroundColor: 'rgba(255,255,255,0.15)',
   },
   colorSelectorButton: {
-    width: (width - 64) / 3,
+    height: 36,
-    padding: 12,
+    paddingVertical: 5,
-    borderRadius: 8,
+    borderRadius: 6,
     alignItems: 'center',
     justifyContent: 'center',
+    marginBottom: 6,
   },
   selectedColorButton: {
     borderWidth: 2,
@@ -526,36 +831,58 @@ const styles = StyleSheet.create({
   },
   colorButtonText: {
     color: '#FFFFFF',
-    fontSize: 12,
+    fontSize: 10,
     fontWeight: 'bold',
     textShadowColor: 'rgba(0, 0, 0, 0.75)',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 2,
   },
   colorPickerContainer: {
-    height: 300,
+    flex: 1,
-    marginBottom: 24,
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    borderRadius: 8,
+    padding: 8,
+    marginBottom: 10,
   },
-  editorActions: {
+  
-    flexDirection: 'row',
+  // Legacy styles - keep for backward compatibility
-    justifyContent: 'space-between',
+  editorTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+  inputContainer: {
+    marginBottom: 16,
+  },
+  inputLabel: {
+    fontSize: 14,
+    color: 'rgba(255,255,255,0.7)',
+    marginBottom: 6,
+  },
+  textInput: {
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    borderRadius: 8,
+    padding: 10,
+    color: '#FFFFFF',
+    fontSize: 14,
   },
   cancelButton: {
-    width: (width - 48) / 2,
+    width: (width - 36) / 2,
-    padding: 16,
+    padding: 12,
-    borderRadius: 8,
+    borderRadius: 10,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'rgba(255,255,255,0.1)',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
   },
   cancelButtonText: {
     color: '#FFFFFF',
     fontWeight: 'bold',
+    fontSize: 14,
   },
   saveButton: {
-    width: (width - 48) / 2,
+    width: (width - 36) / 2,
-    padding: 16,
+    padding: 12,
-    borderRadius: 8,
+    borderRadius: 10,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: colors.primary,
@@ -563,6 +890,7 @@ const styles = StyleSheet.create({
   saveButtonText: {
     color: '#FFFFFF',
     fontWeight: 'bold',
+    fontSize: 14,
   },
 });