goal creation style fix

apps/mobile/src/components/GoalCreationModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
   View,
   Text,
@@ -9,10 +9,12 @@ import {
   ScrollView,
   Platform,
   Alert,
-} from 'react-native';
+} from "react-native";
-import { Ionicons } from '@expo/vector-icons';
+import { Ionicons } from "@expo/vector-icons";
-import DateTimePicker from '@react-native-community/datetimepicker';
+import DateTimePicker from "@react-native-community/datetimepicker";
-import type { CreateGoalData } from '../services/fitnessGoals';
+import type { CreateGoalData } from "../services/fitnessGoals";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalButton } from "./MinimalButton";
 
 interface GoalCreationModalProps {
   visible: boolean;
@@ -21,46 +23,52 @@ interface GoalCreationModalProps {
 }
 
 const GOAL_TYPES = [
-    { value: 'weight_target', label: 'Weight Target' },
+  { value: "weight_target", label: "Weight Target" },
-    { value: 'strength_milestone', label: 'Strength Milestone' },
+  { value: "strength_milestone", label: "Strength Milestone" },
-    { value: 'endurance_target', label: 'Endurance Target' },
+  { value: "endurance_target", label: "Endurance Target" },
-    { value: 'flexibility_goal', label: 'Flexibility Goal' },
+  { value: "flexibility_goal", label: "Flexibility Goal" },
-    { value: 'habit_building', label: 'Habit Building' },
+  { value: "habit_building", label: "Habit Building" },
-    { value: 'custom', label: 'Custom Goal' },
+  { value: "custom", label: "Custom Goal" },
 ] as const;
 
 const PRIORITIES = [
-    { value: 'low', label: 'Low', color: '#10b981' },
+  { value: "low", label: "Low" },
-    { value: 'medium', label: 'Medium', color: '#f59e0b' },
+  { value: "medium", label: "Medium" },
-    { value: 'high', label: 'High', color: '#ef4444' },
+  { value: "high", label: "High" },
 ] as const;
 
-export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationModalProps) {
+export function GoalCreationModal({
-    const [goalType, setGoalType] = useState<CreateGoalData['goalType']>('weight_target');
+  visible,
-    const [title, setTitle] = useState('');
+  onClose,
-    const [description, setDescription] = useState('');
+  onSubmit,
-    const [targetValue, setTargetValue] = useState('');
+}: GoalCreationModalProps) {
-    const [currentValue, setCurrentValue] = useState('');
+  const { colors, typography } = useTheme();
-    const [unit, setUnit] = useState('');
+  const [goalType, setGoalType] =
-    const [priority, setPriority] = useState<'low' | 'medium' | 'high'>('medium');
+    useState<CreateGoalData["goalType"]>("weight_target");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [targetValue, setTargetValue] = useState("");
+  const [currentValue, setCurrentValue] = useState("");
+  const [unit, setUnit] = useState("");
+  const [priority, setPriority] = useState<"low" | "medium" | "high">("medium");
   const [targetDate, setTargetDate] = useState<Date | undefined>();
   const [showDatePicker, setShowDatePicker] = useState(false);
   const [submitting, setSubmitting] = useState(false);
 
   const resetForm = () => {
-        setGoalType('weight_target');
+    setGoalType("weight_target");
-        setTitle('');
+    setTitle("");
-        setDescription('');
+    setDescription("");
-        setTargetValue('');
+    setTargetValue("");
-        setCurrentValue('');
+    setCurrentValue("");
-        setUnit('');
+    setUnit("");
-        setPriority('medium');
+    setPriority("medium");
     setTargetDate(undefined);
   };
 
   const handleSubmit = async () => {
     if (!title.trim()) {
-            Alert.alert('Error', 'Please enter a goal title');
+      Alert.alert("Error", "Please enter a goal title");
       return;
     }
 
@@ -81,8 +89,8 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
       resetForm();
       onClose();
     } catch (error) {
-            console.error('Error creating goal:', error);
+      console.error("Error creating goal:", error);
-            Alert.alert('Error', 'Failed to create goal. Please try again.');
+      Alert.alert("Error", "Failed to create goal. Please try again.");
     } finally {
       setSubmitting(false);
     }
@@ -93,6 +101,17 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
     onClose();
   };
 
+  const getPriorityColor = (p: "low" | "medium" | "high") => {
+    switch (p) {
+      case "high":
+        return colors.danger;
+      case "medium":
+        return colors.warning;
+      case "low":
+        return colors.success;
+    }
+  };
+
   return (
     <Modal
       visible={visible}
@@ -100,32 +119,61 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
       presentationStyle="pageSheet"
       onRequestClose={handleClose}
     >
-            <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
-                <View style={styles.header}>
+        <View
-                    <Text style={styles.headerTitle}>Create Fitness Goal</Text>
+          style={[
+            styles.header,
+            {
+              backgroundColor: colors.surface,
+              borderBottomColor: colors.border,
+            },
+          ]}
+        >
+          <Text style={[typography.h2, { color: colors.textPrimary }]}>
+            Create Fitness Goal
+          </Text>
           <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
-                        <Ionicons name="close" size={28} color="#111827" />
+            <Ionicons name="close" size={28} color={colors.textPrimary} />
           </TouchableOpacity>
         </View>
 
         <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
           {/* Goal Type */}
           <View style={styles.field}>
-                        <Text style={styles.label}>Goal Type *</Text>
+            <Text
-                        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.typeScroll}>
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Goal Type *
+            </Text>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              style={styles.typeScroll}
+            >
               {GOAL_TYPES.map((type) => (
                 <TouchableOpacity
                   key={type.value}
                   style={[
                     styles.typeButton,
-                                        goalType === type.value && styles.typeButtonActive,
+                    {
+                      borderColor: colors.border,
+                      backgroundColor: colors.surface,
+                    },
+                    goalType === type.value && {
+                      backgroundColor: colors.primary,
+                      borderColor: colors.primary,
+                    },
                   ]}
                   onPress={() => setGoalType(type.value)}
                 >
                   <Text
                     style={[
-                                            styles.typeButtonText,
+                      typography.caption,
-                                            goalType === type.value && styles.typeButtonTextActive,
+                      { color: colors.textSecondary },
+                      goalType === type.value && {
+                        color: colors.white,
+                        fontWeight: "600",
+                      },
                     ]}
                   >
                     {type.label}
@@ -137,25 +185,48 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
 
           {/* Title */}
           <View style={styles.field}>
-                        <Text style={styles.label}>Title *</Text>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Title *
+            </Text>
             <TextInput
-                            style={styles.input}
+              style={[
+                styles.input,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
               value={title}
               onChangeText={setTitle}
               placeholder="e.g., Lose 5kg"
-                            placeholderTextColor="#9ca3af"
+              placeholderTextColor={colors.textTertiary}
             />
           </View>
 
           {/* Description */}
           <View style={styles.field}>
-                        <Text style={styles.label}>Description</Text>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Description
+            </Text>
             <TextInput
-                            style={[styles.input, styles.textArea]}
+              style={[
+                styles.input,
+                styles.textArea,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
               value={description}
               onChangeText={setDescription}
               placeholder="Optional description"
-                            placeholderTextColor="#9ca3af"
+              placeholderTextColor={colors.textTertiary}
               multiline
               numberOfLines={3}
             />
@@ -164,63 +235,133 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
           {/* Target Value & Unit */}
           <View style={styles.row}>
             <View style={[styles.field, styles.flex1]}>
-                            <Text style={styles.label}>Target Value</Text>
+              <Text
+                style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+              >
+                Target Value
+              </Text>
               <TextInput
-                                style={styles.input}
+                style={[
+                  styles.input,
+                  {
+                    backgroundColor: colors.surface,
+                    borderColor: colors.border,
+                    color: colors.textPrimary,
+                  },
+                ]}
                 value={targetValue}
                 onChangeText={setTargetValue}
                 placeholder="e.g., 70"
-                                placeholderTextColor="#9ca3af"
+                placeholderTextColor={colors.textTertiary}
                 keyboardType="numeric"
               />
             </View>
             <View style={[styles.field, styles.flex1]}>
-                            <Text style={styles.label}>Unit</Text>
+              <Text
+                style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+              >
+                Unit
+              </Text>
               <TextInput
-                                style={styles.input}
+                style={[
+                  styles.input,
+                  {
+                    backgroundColor: colors.surface,
+                    borderColor: colors.border,
+                    color: colors.textPrimary,
+                  },
+                ]}
                 value={unit}
                 onChangeText={setUnit}
                 placeholder="e.g., kg"
-                                placeholderTextColor="#9ca3af"
+                placeholderTextColor={colors.textTertiary}
               />
             </View>
           </View>
 
           {/* Current Value */}
           <View style={styles.field}>
-                        <Text style={styles.label}>Current Value</Text>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Current Value
+            </Text>
             <TextInput
-                            style={styles.input}
+              style={[
+                styles.input,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
               value={currentValue}
               onChangeText={setCurrentValue}
               placeholder="Starting value (optional)"
-                            placeholderTextColor="#9ca3af"
+              placeholderTextColor={colors.textTertiary}
               keyboardType="numeric"
             />
           </View>
 
           {/* Target Date */}
           <View style={styles.field}>
-                        <Text style={styles.label}>Target Date</Text>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Target Date
+            </Text>
             <TouchableOpacity
-                            style={styles.dateButton}
+              style={[
+                styles.dateButton,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                },
+              ]}
               onPress={() => setShowDatePicker(!showDatePicker)}
             >
-                            <Text style={targetDate ? styles.dateText : styles.datePlaceholder}>
+              <Text
-                                {targetDate ? targetDate.toLocaleDateString() : 'Select target date'}
+                style={[
+                  typography.body,
+                  {
+                    color: targetDate
+                      ? colors.textPrimary
+                      : colors.textTertiary,
+                  },
+                ]}
+              >
+                {targetDate
+                  ? targetDate.toLocaleDateString()
+                  : "Select target date"}
               </Text>
-                            <Ionicons name={showDatePicker ? "chevron-up" : "calendar-outline"} size={20} color="#6b7280" />
+              <Ionicons
+                name={showDatePicker ? "chevron-up" : "calendar-outline"}
+                size={20}
+                color={colors.textSecondary}
+              />
             </TouchableOpacity>
           </View>
 
           {showDatePicker && (
-                        <View style={Platform.OS === 'ios' ? styles.datePickerContainer : undefined}>
+            <View
+              style={
+                Platform.OS === "ios"
+                  ? [
+                      styles.datePickerContainer,
+                      {
+                        backgroundColor: colors.surface,
+                        borderColor: colors.border,
+                      },
+                    ]
+                  : undefined
+              }
+            >
               <DateTimePicker
                 value={targetDate || new Date()}
                 mode="date"
-                                display={Platform.OS === 'ios' ? 'inline' : 'default'}
+                display={Platform.OS === "ios" ? "inline" : "default"}
                 onChange={(event, selectedDate) => {
-                                    setShowDatePicker(Platform.OS === 'ios');
+                  setShowDatePicker(Platform.OS === "ios");
                   if (selectedDate) {
                     setTargetDate(selectedDate);
                   }
@@ -233,21 +374,36 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
 
           {/* Priority */}
           <View style={styles.field}>
-                        <Text style={styles.label}>Priority</Text>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Priority
+            </Text>
             <View style={styles.priorityContainer}>
               {PRIORITIES.map((p) => (
                 <TouchableOpacity
                   key={p.value}
                   style={[
                     styles.priorityButton,
-                                        priority === p.value && { backgroundColor: p.color },
+                    {
+                      borderColor: colors.border,
+                      backgroundColor: colors.surface,
+                    },
+                    priority === p.value && {
+                      backgroundColor: getPriorityColor(p.value),
+                      borderColor: getPriorityColor(p.value),
+                    },
                   ]}
                   onPress={() => setPriority(p.value)}
                 >
                   <Text
                     style={[
-                                            styles.priorityButtonText,
+                      typography.body,
-                                            priority === p.value && styles.priorityButtonTextActive,
+                      { color: colors.textSecondary },
+                      priority === p.value && {
+                        color: colors.white,
+                        fontWeight: "600",
+                      },
                     ]}
                   >
                     {p.label}
@@ -258,16 +414,23 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
           </View>
         </ScrollView>
 
-                <View style={styles.footer}>
+        <View
-                    <TouchableOpacity
+          style={[
-                        style={[styles.submitButton, submitting && styles.submitButtonDisabled]}
+            styles.footer,
+            {
+              backgroundColor: colors.surface,
+              borderTopColor: colors.border,
+            },
+          ]}
+        >
+          <MinimalButton
+            variant="primary"
+            title={submitting ? "Creating..." : "Create Goal"}
             onPress={handleSubmit}
             disabled={submitting}
-                    >
+            loading={submitting}
-                        <Text style={styles.submitButtonText}>
+            style={styles.submitButton}
-                            {submitting ? 'Creating...' : 'Create Goal'}
+          />
-                        </Text>
-                    </TouchableOpacity>
         </View>
       </View>
     </Modal>
@@ -277,22 +440,14 @@ export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationMo
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-        backgroundColor: '#f9fafb',
   },
   header: {
-        flexDirection: 'row',
+    flexDirection: "row",
-        justifyContent: 'space-between',
+    justifyContent: "space-between",
-        alignItems: 'center',
+    alignItems: "center",
     padding: 20,
-        paddingTop: Platform.OS === 'ios' ? 60 : 20,
+    paddingTop: Platform.OS === "ios" ? 60 : 20,
-        backgroundColor: '#fff',
     borderBottomWidth: 1,
-        borderBottomColor: '#e5e7eb',
-    },
-    headerTitle: {
-        fontSize: 20,
-        fontWeight: '600',
-        color: '#111827',
   },
   closeButton: {
     padding: 4,
@@ -304,27 +459,19 @@ const styles = StyleSheet.create({
   field: {
     marginBottom: 20,
   },
-    label: {
-        fontSize: 14,
-        fontWeight: '600',
-        color: '#374151',
-        marginBottom: 8,
-    },
   input: {
-        backgroundColor: '#fff',
     borderWidth: 1,
-        borderColor: '#d1d5db',
     borderRadius: 8,
     padding: 12,
     fontSize: 16,
-        color: '#111827',
+    marginTop: 8,
   },
   textArea: {
     height: 80,
-        textAlignVertical: 'top',
+    textAlignVertical: "top",
   },
   row: {
-        flexDirection: 'row',
+    flexDirection: "row",
     gap: 12,
   },
   flex1: {
@@ -332,95 +479,48 @@ const styles = StyleSheet.create({
   },
   typeScroll: {
     flexGrow: 0,
+    marginTop: 8,
   },
   typeButton: {
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 8,
     borderWidth: 1,
-        borderColor: '#d1d5db',
-        backgroundColor: '#fff',
     marginRight: 8,
   },
-    typeButtonActive: {
-        backgroundColor: '#2563eb',
-        borderColor: '#2563eb',
-    },
-    typeButtonText: {
-        fontSize: 14,
-        color: '#374151',
-    },
-    typeButtonTextActive: {
-        color: '#fff',
-        fontWeight: '600',
-    },
   dateButton: {
-        flexDirection: 'row',
+    flexDirection: "row",
-        justifyContent: 'space-between',
+    justifyContent: "space-between",
-        alignItems: 'center',
+    alignItems: "center",
-        backgroundColor: '#fff',
     borderWidth: 1,
-        borderColor: '#d1d5db',
     borderRadius: 8,
     padding: 12,
-    },
+    marginTop: 8,
-    dateText: {
-        fontSize: 16,
-        color: '#111827',
-    },
-    datePlaceholder: {
-        fontSize: 16,
-        color: '#9ca3af',
   },
   priorityContainer: {
-        flexDirection: 'row',
+    flexDirection: "row",
     gap: 12,
+    marginTop: 8,
   },
   priorityButton: {
     flex: 1,
     paddingVertical: 12,
     borderRadius: 8,
     borderWidth: 1,
-        borderColor: '#d1d5db',
+    alignItems: "center",
-        backgroundColor: '#fff',
-        alignItems: 'center',
-    },
-    priorityButtonText: {
-        fontSize: 14,
-        color: '#374151',
-        fontWeight: '500',
-    },
-    priorityButtonTextActive: {
-        color: '#fff',
-        fontWeight: '600',
   },
   footer: {
     padding: 20,
-        paddingBottom: Platform.OS === 'ios' ? 40 : 20,
+    paddingBottom: Platform.OS === "ios" ? 40 : 20,
-        backgroundColor: '#fff',
     borderTopWidth: 1,
-        borderTopColor: '#e5e7eb',
   },
   submitButton: {
-        backgroundColor: '#2563eb',
+    width: "100%",
-        borderRadius: 8,
-        padding: 16,
-        alignItems: 'center',
-    },
-    submitButtonDisabled: {
-        opacity: 0.6,
-    },
-    submitButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#fff',
   },
   datePickerContainer: {
-        backgroundColor: '#fff',
     borderRadius: 8,
     borderWidth: 1,
-        borderColor: '#d1d5db',
     marginTop: 8,
-        overflow: 'hidden',
+    overflow: "hidden",
   },
 });