Finish cleaning up theme stuff

.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit",
-    "source.sortMembers": "explicit"
-  }
-}

components/theme/buttons/ThemedButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Pressable, PressableProps } from 'react-native';
-import { ThemedView } from '@/components/theme';
+import ThemedView from '@/components/theme/default/ThemedView';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
@@ -24,7 +24,7 @@ const ThemedButton: React.FC<ThemedButtonProps> = ({
   ...restProps // This now includes onPress automatically
 }) => {
   const scheme = useColorScheme() ?? 'dark';
-  
+
   return (
     <ThemedView
       style={[
@@ -37,12 +37,7 @@ const ThemedButton: React.FC<ThemedButtonProps> = ({
       ]}
     >
       <Pressable
-        style={[
+        style={[styles.button, { backgroundColor: Colors[scheme].text }, buttonStyle, style]}
-          styles.button, 
-          { backgroundColor: Colors[scheme].text },
-          buttonStyle,
-          style,
-        ]}
         {...restProps} // This passes onPress and all other Pressable props
       >
         {children}

components/theme/buttons/ThemedTextButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TextStyle, PressableProps } from 'react-native';
-import { ThemedButton, ThemedText } from '@/components/theme';
+import ThemedButton from '@/components/theme/buttons/ThemedButton';
+import ThemedText from '@/components/theme/default/ThemedText';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
@@ -28,10 +29,10 @@ const ThemedTextButton: React.FC<ThemedTextButtonProps> = ({
   ...restProps // This includes onPress and all other Pressable props
 }) => {
   const scheme = useColorScheme() ?? 'dark';
-  
+
   return (
-    <ThemedButton 
+    <ThemedButton
-      width={width} 
+      width={width}
       height={height}
       containerStyle={containerStyle}
       buttonStyle={buttonStyle}

components/theme/inputs/ThemedSearchBar.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { StyleSheet, ViewProps, View, DimensionValue } from 'react-native';
+import { StyleSheet, ViewProps, DimensionValue } from 'react-native';
+import ThemedView from '@/components/theme/default/ThemedView';
+import ThemedTextInput from '@/components/theme/inputs/ThemedTextInput';
 import { Ionicons } from '@expo/vector-icons';
-import { ThemedTextInput } from '@/components/theme';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
@@ -23,15 +24,10 @@ const ThemedSearchBar: React.FC<ThemedSearchBarProps> = ({
   ...restProps
 }) => {
   const scheme = useColorScheme() ?? 'dark';
-  
+
   return (
-    <View style={[styles.container, { width }, style]} {...restProps}>
+    <ThemedView style={[styles.container, { width }, style]} {...restProps}>
-      <Ionicons 
+      <Ionicons name='search' size={20} color={Colors[scheme].text} style={styles.icon} />
-        name="search" 
-        size={20} 
-        color={Colors[scheme].text} 
-        style={styles.icon} 
-      />
       <ThemedTextInput
         placeholder={placeholder}
         value={value}
@@ -40,7 +36,7 @@ const ThemedSearchBar: React.FC<ThemedSearchBarProps> = ({
         width={width}
         style={styles.input}
       />
-    </View>
+    </ThemedView>
   );
 };
 

components/theme/inputs/ThemedSwitch.tsx

@@ -5,16 +5,14 @@ import { useColorScheme } from '@/hooks/useColorScheme';
 
 type ThemedSwitchProps = SwitchProps;
 
-const ThemedSwitch: React.FC<ThemedSwitchProps> = ({
+const ThemedSwitch: React.FC<ThemedSwitchProps> = ({ ...props }) => {
-  ...props
-}) => {
   const scheme = useColorScheme() ?? 'dark';
-  
+
   return (
     <Switch
-      trackColor={{ 
+      trackColor={{
-        false: Colors[scheme].border, 
+        false: Colors[scheme].border,
-        true: Colors[scheme].tint + '80' 
+        true: Colors[scheme].tint + '80',
       }}
       thumbColor={props.value ? Colors[scheme].tint : Colors[scheme].card}
       ios_backgroundColor={Colors[scheme].border}

components/theme/inputs/ThemedTextInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, TextInput, TextInputProps, DimensionValue } from 'react-native';
-import { ThemedView } from '@/components/theme';
+import ThemedView from '@/components/theme/default/ThemedView';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
@@ -9,7 +9,7 @@ const DEFAULT_HEIGHT = 50;
 
 type ThemedTextInputProps = TextInputProps & {
   width?: DimensionValue;
-  height?: DimensionValue
+  height?: DimensionValue;
   containerStyle?: object;
 };
 
@@ -21,19 +21,13 @@ const ThemedTextInput: React.FC<ThemedTextInputProps> = ({
   ...restProps
 }) => {
   const scheme = useColorScheme() ?? 'dark';
-  
+
   return (
-    <ThemedView
+    <ThemedView style={[styles.inputContainer, { width, height }, containerStyle]}>
-      style={[
-        styles.inputContainer,
-        { width, height },
-        containerStyle,
-      ]}
-    >
       <TextInput
         style={[
           styles.input,
-          { 
+          {
             color: Colors[scheme].text,
             backgroundColor: Colors[scheme].background,
           },

components/theme/ui/ThemedAvatar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Image, ImageProps, View } from 'react-native';
-import { ThemedText } from '@/components/theme';
+import ThemedText from '@/components/theme/default/ThemedText';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
@@ -23,20 +23,20 @@ const ThemedAvatar: React.FC<ThemedAvatarProps> = ({
 }) => {
   const scheme = useColorScheme() ?? 'dark';
   const border = borderColor || Colors[scheme].tint;
-  
+
   // Get initials from name
   const getInitials = (name?: string) => {
     if (!name) return '';
     return name
       .split(' ')
-      .map(part => part[0])
+      .map((part) => part[0])
       .join('')
       .toUpperCase()
       .substring(0, 2);
   };
-  
+
   const initials = getInitials(name);
-  
+
   return (
     <View
       style={[

components/theme/ui/ThemedBadge.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, ViewProps } from 'react-native';
-import { ThemedView, ThemedText } from '@/components/theme';
+import ThemedText from '@/components/theme/default/ThemedText';
+import ThemedView from '@/components/theme/default/ThemedView';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
@@ -22,7 +23,7 @@ const ThemedBadge: React.FC<ThemedBadgeProps> = ({
   const scheme = useColorScheme() ?? 'dark';
   const badgeColor = color || Colors[scheme].tint;
   const badgeTextColor = textColor || Colors[scheme].background;
-  
+
   return (
     <ThemedView
       style={[
@@ -37,12 +38,7 @@ const ThemedBadge: React.FC<ThemedBadgeProps> = ({
       ]}
       {...restProps}
     >
-      <ThemedText 
+      <ThemedText style={[styles.text, { color: badgeTextColor, fontSize: size * 0.5 }]}>
-        style={[
-          styles.text, 
-          { color: badgeTextColor, fontSize: size * 0.5 }
-        ]}
-      >
         {value}
       </ThemedText>
     </ThemedView>

components/theme/ui/ThemedCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, ViewProps, Platform, DimensionValue } from 'react-native';
-import { ThemedView } from '@/components/theme';
+import ThemedView from '@/components/theme/default/ThemedView';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
@@ -23,7 +23,7 @@ const ThemedCard: React.FC<ThemedCardProps> = ({
   ...restProps
 }) => {
   const scheme = useColorScheme() ?? 'dark';
-  
+
   return (
     <ThemedView
       style={[
@@ -37,7 +37,7 @@ const ThemedCard: React.FC<ThemedCardProps> = ({
           ...Platform.select({
             ios: {
               shadowColor: Colors[scheme].text,
-              shadowOffset: { width: 0, height: elevation/2 },
+              shadowOffset: { width: 0, height: elevation / 2 },
               shadowOpacity: 0.1,
               shadowRadius: elevation,
             },

components/theme/ui/ThemedDivider.tsx

@@ -5,8 +5,8 @@ import { useColorScheme } from '@/hooks/useColorScheme';
 
 type ThemedDividerProps = ViewProps & {
   orientation?: 'horizontal' | 'vertical';
-  thickness?: DimensionValue
+  thickness?: DimensionValue;
-  length?: DimensionValue
+  length?: DimensionValue;
   color?: string;
 };
 
@@ -19,12 +19,12 @@ const ThemedDivider: React.FC<ThemedDividerProps> = ({
 }) => {
   const scheme = useColorScheme() ?? 'dark';
   const color = restProps.color || Colors[scheme].border;
-  
+
   return (
     <View
       style={[
-        orientation === 'horizontal' 
+        orientation === 'horizontal'
-          ? { height: thickness, width: length } 
+          ? { height: thickness, width: length }
           : { width: thickness, height: length },
         { backgroundColor: color },
         style,

components/theme/ui/ThemedIcon.tsx

@@ -10,25 +10,11 @@ type ThemedIconProps = ViewProps & {
   color?: string;
 };
 
-const ThemedIcon: React.FC<ThemedIconProps> = ({
+const ThemedIcon: React.FC<ThemedIconProps> = ({ name, size = 24, color, style, ...restProps }) => {
-  name,
-  size = 24,
-  color,
-  style,
-  ...restProps
-}) => {
   const scheme = useColorScheme() ?? 'dark';
   const iconColor = color || Colors[scheme].text;
-  
+
-  return (
+  return <Ionicons name={name} size={size} color={iconColor} style={style} {...restProps} />;
-    <Ionicons
-      name={name}
-      size={size}
-      color={iconColor}
-      style={style}
-      {...restProps}
-    />
-  );
 };
 
 export default ThemedIcon;

constants/Colors.ts

@@ -16,7 +16,7 @@ export const Colors = {
     icon: iconColorLight,
     tabIconDefault: iconColorLight,
     tabIconSelected: tintColorLight,
-    
+
     // New colors
     card: '#ffffff',
     border: '#d0d7de',
@@ -26,7 +26,7 @@ export const Colors = {
     subtle: '#f6f8fa',
     error: '#e5484d',
     success: '#46954a',
-    warning: '#daaa3f'
+    warning: '#daaa3f',
   },
   dark: {
     text: light,
@@ -35,7 +35,7 @@ export const Colors = {
     icon: iconColorDark,
     tabIconDefault: iconColorDark,
     tabIconSelected: tintColorDark,
-    
+
     // New colors
     card: '#3a3b4a',
     border: '#444c56',
@@ -45,6 +45,6 @@ export const Colors = {
     subtle: '#272934',
     error: '#ff6369',
     success: '#3fb950',
-    warning: '#d29922'
+    warning: '#d29922',
   },
 };