Added theme components. Reorganized them. Prepping for Tech Tracker Rewrite

components/theme/buttons/TextButton.tsx

@@ -1,33 +0,0 @@
-import Button from '@/components/theme/buttons/Button';
-import { ThemedText } from '@/components/theme/Theme';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-const DEFAULT_FONT_SIZE = 16;
-
-type Props = {
-  width?: number;
-  height?: number;
-  text: string;
-  fontSize?: number;
-  onPress?: () => void;
-};
-
-const TextButton = ({ width, height, text, fontSize, onPress }: Props) => {
-  const scheme = useColorScheme() ?? 'dark';
-  return (
-    <Button width={width} height={height} onPress={onPress}>
-      <ThemedText
-        style={[
-          {
-            color: Colors[scheme].background,
-            fontSize: fontSize ?? DEFAULT_FONT_SIZE,
-          },
-        ]}
-      >
-        {text}
-      </ThemedText>
-    </Button>
-  );
-};
-export default TextButton;

components/theme/buttons/ThemedButton.tsx

@@ -1,25 +1,30 @@
-import { StyleSheet, Pressable } from 'react-native';
-import { ThemedView } from '@/components/theme/Theme';
+import React from 'react';
+import { StyleSheet, Pressable, PressableProps } from 'react-native';
+import { ThemedView } from '@/components/theme';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
-import { StyleProp, ViewStyle } from 'react-native';
 
 const DEFAULT_WIDTH = 320;
 const DEFAULT_HEIGHT = 68;
 
-type Props = {
+type ThemedButtonProps = PressableProps & {
   width?: number;
   height?: number;
-  onPress?: () => void;
+  containerStyle?: object;
+  buttonStyle?: object;
 };
 
-const Button = ({
+const ThemedButton: React.FC<ThemedButtonProps> = ({
   width,
   height,
   children,
-  onPress,
-}: Props & React.ComponentProps<typeof Pressable>) => {
+  containerStyle,
+  buttonStyle,
+  style,
+  ...restProps // This now includes onPress automatically
+}) => {
   const scheme = useColorScheme() ?? 'dark';
+  
   return (
     <ThemedView
       style={[
@@ -28,18 +33,25 @@ const Button = ({
           width: width ?? DEFAULT_WIDTH,
           height: height ?? DEFAULT_HEIGHT,
         },
+        containerStyle,
       ]}
     >
       <Pressable
-        style={[styles.button, { backgroundColor: Colors[scheme].text }]}
-        onPress={onPress}
+        style={[
+          styles.button, 
+          { backgroundColor: Colors[scheme].text },
+          buttonStyle,
+          style,
+        ]}
+        {...restProps} // This passes onPress and all other Pressable props
       >
         {children}
       </Pressable>
     </ThemedView>
   );
 };
-export default Button;
+
+export default ThemedButton;
 
 const styles = StyleSheet.create({
   buttonContainer: {

components/theme/buttons/ThemedTextButton.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { TextStyle, PressableProps } from 'react-native';
+import { ThemedButton, ThemedText } from '@/components/theme';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+const DEFAULT_FONT_SIZE = 16;
+
+// Extend ThemedButton props (which already extends PressableProps)
+type ThemedTextButtonProps = Omit<PressableProps, 'children'> & {
+  width?: number;
+  height?: number;
+  text: string;
+  fontSize?: number;
+  textStyle?: TextStyle;
+  containerStyle?: object;
+  buttonStyle?: object;
+};
+
+const ThemedTextButton: React.FC<ThemedTextButtonProps> = ({
+  width,
+  height,
+  text,
+  fontSize,
+  textStyle,
+  containerStyle,
+  buttonStyle,
+  ...restProps // This includes onPress and all other Pressable props
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+  
+  return (
+    <ThemedButton 
+      width={width} 
+      height={height}
+      containerStyle={containerStyle}
+      buttonStyle={buttonStyle}
+      {...restProps}
+    >
+      <ThemedText
+        style={[
+          {
+            color: Colors[scheme].background,
+            fontSize: fontSize ?? DEFAULT_FONT_SIZE,
+          },
+          textStyle,
+        ]}
+      >
+        {text}
+      </ThemedText>
+    </ThemedButton>
+  );
+};
+
+export default ThemedTextButton;