From a5f761062ebb3f69281d917c46ca13387e60fad2 Mon Sep 17 00:00:00 2001
From: echo <petrovskidimitar@yandex.com>
Date: Wed, 11 Mar 2026 08:55:05 +0100
Subject: [PATCH] goal creation style fix

---
 apps/admin/data/fitai.db                      | Bin 172032 -> 172032 bytes
 .../src/components/GoalCreationModal.tsx      | 898 ++++++++++--------
 2 files changed, 499 insertions(+), 399 deletions(-)

diff --git a/apps/admin/data/fitai.db b/apps/admin/data/fitai.db
index 823a9751cbea5469abe50cef8187c1aa686cbfb1..25a5e7b590c9598546fa19c75bc1ca59ed022794 100644
GIT binary patch
delta 89
zcmZoTz}0YoYl1Xm%0wAw#*~c-3(xcNJ!N3xOJ(3M<V)pC-K?k(&Nn&rUIPmQ14GZ|
tm-i$XdHJ_9F!4`f;J?E^iGR{&L5CLp$&=ozf)uDW?|#31_j^Xy4FDI@9!LNH

delta 89
zcmZoTz}0YoYl1Xm@<bVD#^j9&3(xa1FfcIlr84jr@;&8C-K?k(&Nn&rUIR-bCzJ5z
sm-i$X!3y{%G4S8v-_Ad2v!Fu@|Kv&URasP+eHoi~zu&(5J)`Re0Oh(JmjD0&

diff --git a/apps/mobile/src/components/GoalCreationModal.tsx b/apps/mobile/src/components/GoalCreationModal.tsx
index 8086ef9..b727e15 100644
--- a/apps/mobile/src/components/GoalCreationModal.tsx
+++ b/apps/mobile/src/components/GoalCreationModal.tsx
@@ -1,426 +1,526 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
-    View,
-    Text,
-    StyleSheet,
-    Modal,
-    TextInput,
-    TouchableOpacity,
-    ScrollView,
-    Platform,
-    Alert,
-} from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import DateTimePicker from '@react-native-community/datetimepicker';
-import type { CreateGoalData } from '../services/fitnessGoals';
+  View,
+  Text,
+  StyleSheet,
+  Modal,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  Platform,
+  Alert,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import DateTimePicker from "@react-native-community/datetimepicker";
+import type { CreateGoalData } from "../services/fitnessGoals";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalButton } from "./MinimalButton";
 
 interface GoalCreationModalProps {
-    visible: boolean;
-    onClose: () => void;
-    onSubmit: (goalData: CreateGoalData) => Promise<void>;
+  visible: boolean;
+  onClose: () => void;
+  onSubmit: (goalData: CreateGoalData) => Promise<void>;
 }
 
 const GOAL_TYPES = [
-    { value: 'weight_target', label: 'Weight Target' },
-    { value: 'strength_milestone', label: 'Strength Milestone' },
-    { value: 'endurance_target', label: 'Endurance Target' },
-    { value: 'flexibility_goal', label: 'Flexibility Goal' },
-    { value: 'habit_building', label: 'Habit Building' },
-    { value: 'custom', label: 'Custom Goal' },
+  { value: "weight_target", label: "Weight Target" },
+  { value: "strength_milestone", label: "Strength Milestone" },
+  { value: "endurance_target", label: "Endurance Target" },
+  { value: "flexibility_goal", label: "Flexibility Goal" },
+  { value: "habit_building", label: "Habit Building" },
+  { value: "custom", label: "Custom Goal" },
 ] as const;
 
 const PRIORITIES = [
-    { value: 'low', label: 'Low', color: '#10b981' },
-    { value: 'medium', label: 'Medium', color: '#f59e0b' },
-    { value: 'high', label: 'High', color: '#ef4444' },
+  { value: "low", label: "Low" },
+  { value: "medium", label: "Medium" },
+  { value: "high", label: "High" },
 ] as const;
 
-export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationModalProps) {
-    const [goalType, setGoalType] = 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);
+export function GoalCreationModal({
+  visible,
+  onClose,
+  onSubmit,
+}: GoalCreationModalProps) {
+  const { colors, typography } = useTheme();
+  const [goalType, setGoalType] =
+    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');
-        setTitle('');
-        setDescription('');
-        setTargetValue('');
-        setCurrentValue('');
-        setUnit('');
-        setPriority('medium');
-        setTargetDate(undefined);
-    };
+  const resetForm = () => {
+    setGoalType("weight_target");
+    setTitle("");
+    setDescription("");
+    setTargetValue("");
+    setCurrentValue("");
+    setUnit("");
+    setPriority("medium");
+    setTargetDate(undefined);
+  };
 
-    const handleSubmit = async () => {
-        if (!title.trim()) {
-            Alert.alert('Error', 'Please enter a goal title');
-            return;
-        }
+  const handleSubmit = async () => {
+    if (!title.trim()) {
+      Alert.alert("Error", "Please enter a goal title");
+      return;
+    }
 
-        setSubmitting(true);
-        try {
-            const goalData: CreateGoalData = {
-                goalType,
-                title: title.trim(),
-                description: description.trim() || undefined,
-                targetValue: targetValue ? parseFloat(targetValue) : undefined,
-                currentValue: currentValue ? parseFloat(currentValue) : undefined,
-                unit: unit.trim() || undefined,
-                targetDate: targetDate?.toISOString(),
-                priority,
-            };
+    setSubmitting(true);
+    try {
+      const goalData: CreateGoalData = {
+        goalType,
+        title: title.trim(),
+        description: description.trim() || undefined,
+        targetValue: targetValue ? parseFloat(targetValue) : undefined,
+        currentValue: currentValue ? parseFloat(currentValue) : undefined,
+        unit: unit.trim() || undefined,
+        targetDate: targetDate?.toISOString(),
+        priority,
+      };
 
-            await onSubmit(goalData);
-            resetForm();
-            onClose();
-        } catch (error) {
-            console.error('Error creating goal:', error);
-            Alert.alert('Error', 'Failed to create goal. Please try again.');
-        } finally {
-            setSubmitting(false);
-        }
-    };
+      await onSubmit(goalData);
+      resetForm();
+      onClose();
+    } catch (error) {
+      console.error("Error creating goal:", error);
+      Alert.alert("Error", "Failed to create goal. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
 
-    const handleClose = () => {
-        resetForm();
-        onClose();
-    };
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
 
-    return (
-        <Modal
-            visible={visible}
-            animationType="slide"
-            presentationStyle="pageSheet"
-            onRequestClose={handleClose}
+  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}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={handleClose}
+    >
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
+        <View
+          style={[
+            styles.header,
+            {
+              backgroundColor: colors.surface,
+              borderBottomColor: colors.border,
+            },
+          ]}
         >
-            <View style={styles.container}>
-                <View style={styles.header}>
-                    <Text style={styles.headerTitle}>Create Fitness Goal</Text>
-                    <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
-                        <Ionicons name="close" size={28} color="#111827" />
-                    </TouchableOpacity>
-                </View>
+          <Text style={[typography.h2, { color: colors.textPrimary }]}>
+            Create Fitness Goal
+          </Text>
+          <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+            <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>
-                        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.typeScroll}>
-                            {GOAL_TYPES.map((type) => (
-                                <TouchableOpacity
-                                    key={type.value}
-                                    style={[
-                                        styles.typeButton,
-                                        goalType === type.value && styles.typeButtonActive,
-                                    ]}
-                                    onPress={() => setGoalType(type.value)}
-                                >
-                                    <Text
-                                        style={[
-                                            styles.typeButtonText,
-                                            goalType === type.value && styles.typeButtonTextActive,
-                                        ]}
-                                    >
-                                        {type.label}
-                                    </Text>
-                                </TouchableOpacity>
-                            ))}
-                        </ScrollView>
-                    </View>
+        <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+          {/* Goal Type */}
+          <View style={styles.field}>
+            <Text
+              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,
+                    {
+                      borderColor: colors.border,
+                      backgroundColor: colors.surface,
+                    },
+                    goalType === type.value && {
+                      backgroundColor: colors.primary,
+                      borderColor: colors.primary,
+                    },
+                  ]}
+                  onPress={() => setGoalType(type.value)}
+                >
+                  <Text
+                    style={[
+                      typography.caption,
+                      { color: colors.textSecondary },
+                      goalType === type.value && {
+                        color: colors.white,
+                        fontWeight: "600",
+                      },
+                    ]}
+                  >
+                    {type.label}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          </View>
 
-                    {/* Title */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Title *</Text>
-                        <TextInput
-                            style={styles.input}
-                            value={title}
-                            onChangeText={setTitle}
-                            placeholder="e.g., Lose 5kg"
-                            placeholderTextColor="#9ca3af"
-                        />
-                    </View>
+          {/* Title */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Title *
+            </Text>
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
+              value={title}
+              onChangeText={setTitle}
+              placeholder="e.g., Lose 5kg"
+              placeholderTextColor={colors.textTertiary}
+            />
+          </View>
 
-                    {/* Description */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Description</Text>
-                        <TextInput
-                            style={[styles.input, styles.textArea]}
-                            value={description}
-                            onChangeText={setDescription}
-                            placeholder="Optional description"
-                            placeholderTextColor="#9ca3af"
-                            multiline
-                            numberOfLines={3}
-                        />
-                    </View>
+          {/* Description */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Description
+            </Text>
+            <TextInput
+              style={[
+                styles.input,
+                styles.textArea,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
+              value={description}
+              onChangeText={setDescription}
+              placeholder="Optional description"
+              placeholderTextColor={colors.textTertiary}
+              multiline
+              numberOfLines={3}
+            />
+          </View>
 
-                    {/* Target Value & Unit */}
-                    <View style={styles.row}>
-                        <View style={[styles.field, styles.flex1]}>
-                            <Text style={styles.label}>Target Value</Text>
-                            <TextInput
-                                style={styles.input}
-                                value={targetValue}
-                                onChangeText={setTargetValue}
-                                placeholder="e.g., 70"
-                                placeholderTextColor="#9ca3af"
-                                keyboardType="numeric"
-                            />
-                        </View>
-                        <View style={[styles.field, styles.flex1]}>
-                            <Text style={styles.label}>Unit</Text>
-                            <TextInput
-                                style={styles.input}
-                                value={unit}
-                                onChangeText={setUnit}
-                                placeholder="e.g., kg"
-                                placeholderTextColor="#9ca3af"
-                            />
-                        </View>
-                    </View>
-
-                    {/* Current Value */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Current Value</Text>
-                        <TextInput
-                            style={styles.input}
-                            value={currentValue}
-                            onChangeText={setCurrentValue}
-                            placeholder="Starting value (optional)"
-                            placeholderTextColor="#9ca3af"
-                            keyboardType="numeric"
-                        />
-                    </View>
-
-                    {/* Target Date */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Target Date</Text>
-                        <TouchableOpacity
-                            style={styles.dateButton}
-                            onPress={() => setShowDatePicker(!showDatePicker)}
-                        >
-                            <Text style={targetDate ? styles.dateText : styles.datePlaceholder}>
-                                {targetDate ? targetDate.toLocaleDateString() : 'Select target date'}
-                            </Text>
-                            <Ionicons name={showDatePicker ? "chevron-up" : "calendar-outline"} size={20} color="#6b7280" />
-                        </TouchableOpacity>
-                    </View>
-
-                    {showDatePicker && (
-                        <View style={Platform.OS === 'ios' ? styles.datePickerContainer : undefined}>
-                            <DateTimePicker
-                                value={targetDate || new Date()}
-                                mode="date"
-                                display={Platform.OS === 'ios' ? 'inline' : 'default'}
-                                onChange={(event, selectedDate) => {
-                                    setShowDatePicker(Platform.OS === 'ios');
-                                    if (selectedDate) {
-                                        setTargetDate(selectedDate);
-                                    }
-                                }}
-                                minimumDate={new Date()}
-                                themeVariant="light"
-                            />
-                        </View>
-                    )}
-
-                    {/* Priority */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Priority</Text>
-                        <View style={styles.priorityContainer}>
-                            {PRIORITIES.map((p) => (
-                                <TouchableOpacity
-                                    key={p.value}
-                                    style={[
-                                        styles.priorityButton,
-                                        priority === p.value && { backgroundColor: p.color },
-                                    ]}
-                                    onPress={() => setPriority(p.value)}
-                                >
-                                    <Text
-                                        style={[
-                                            styles.priorityButtonText,
-                                            priority === p.value && styles.priorityButtonTextActive,
-                                        ]}
-                                    >
-                                        {p.label}
-                                    </Text>
-                                </TouchableOpacity>
-                            ))}
-                        </View>
-                    </View>
-                </ScrollView>
-
-                <View style={styles.footer}>
-                    <TouchableOpacity
-                        style={[styles.submitButton, submitting && styles.submitButtonDisabled]}
-                        onPress={handleSubmit}
-                        disabled={submitting}
-                    >
-                        <Text style={styles.submitButtonText}>
-                            {submitting ? 'Creating...' : 'Create Goal'}
-                        </Text>
-                    </TouchableOpacity>
-                </View>
+          {/* Target Value & Unit */}
+          <View style={styles.row}>
+            <View style={[styles.field, styles.flex1]}>
+              <Text
+                style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+              >
+                Target Value
+              </Text>
+              <TextInput
+                style={[
+                  styles.input,
+                  {
+                    backgroundColor: colors.surface,
+                    borderColor: colors.border,
+                    color: colors.textPrimary,
+                  },
+                ]}
+                value={targetValue}
+                onChangeText={setTargetValue}
+                placeholder="e.g., 70"
+                placeholderTextColor={colors.textTertiary}
+                keyboardType="numeric"
+              />
             </View>
-        </Modal>
-    );
+            <View style={[styles.field, styles.flex1]}>
+              <Text
+                style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+              >
+                Unit
+              </Text>
+              <TextInput
+                style={[
+                  styles.input,
+                  {
+                    backgroundColor: colors.surface,
+                    borderColor: colors.border,
+                    color: colors.textPrimary,
+                  },
+                ]}
+                value={unit}
+                onChangeText={setUnit}
+                placeholder="e.g., kg"
+                placeholderTextColor={colors.textTertiary}
+              />
+            </View>
+          </View>
+
+          {/* Current Value */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Current Value
+            </Text>
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
+              value={currentValue}
+              onChangeText={setCurrentValue}
+              placeholder="Starting value (optional)"
+              placeholderTextColor={colors.textTertiary}
+              keyboardType="numeric"
+            />
+          </View>
+
+          {/* Target Date */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Target Date
+            </Text>
+            <TouchableOpacity
+              style={[
+                styles.dateButton,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                },
+              ]}
+              onPress={() => setShowDatePicker(!showDatePicker)}
+            >
+              <Text
+                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={colors.textSecondary}
+              />
+            </TouchableOpacity>
+          </View>
+
+          {showDatePicker && (
+            <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"}
+                onChange={(event, selectedDate) => {
+                  setShowDatePicker(Platform.OS === "ios");
+                  if (selectedDate) {
+                    setTargetDate(selectedDate);
+                  }
+                }}
+                minimumDate={new Date()}
+                themeVariant="light"
+              />
+            </View>
+          )}
+
+          {/* Priority */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Priority
+            </Text>
+            <View style={styles.priorityContainer}>
+              {PRIORITIES.map((p) => (
+                <TouchableOpacity
+                  key={p.value}
+                  style={[
+                    styles.priorityButton,
+                    {
+                      borderColor: colors.border,
+                      backgroundColor: colors.surface,
+                    },
+                    priority === p.value && {
+                      backgroundColor: getPriorityColor(p.value),
+                      borderColor: getPriorityColor(p.value),
+                    },
+                  ]}
+                  onPress={() => setPriority(p.value)}
+                >
+                  <Text
+                    style={[
+                      typography.body,
+                      { color: colors.textSecondary },
+                      priority === p.value && {
+                        color: colors.white,
+                        fontWeight: "600",
+                      },
+                    ]}
+                  >
+                    {p.label}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+        </ScrollView>
+
+        <View
+          style={[
+            styles.footer,
+            {
+              backgroundColor: colors.surface,
+              borderTopColor: colors.border,
+            },
+          ]}
+        >
+          <MinimalButton
+            variant="primary"
+            title={submitting ? "Creating..." : "Create Goal"}
+            onPress={handleSubmit}
+            disabled={submitting}
+            loading={submitting}
+            style={styles.submitButton}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#f9fafb',
-    },
-    header: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 20,
-        paddingTop: Platform.OS === 'ios' ? 60 : 20,
-        backgroundColor: '#fff',
-        borderBottomWidth: 1,
-        borderBottomColor: '#e5e7eb',
-    },
-    headerTitle: {
-        fontSize: 20,
-        fontWeight: '600',
-        color: '#111827',
-    },
-    closeButton: {
-        padding: 4,
-    },
-    content: {
-        flex: 1,
-        padding: 20,
-    },
-    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',
-    },
-    textArea: {
-        height: 80,
-        textAlignVertical: 'top',
-    },
-    row: {
-        flexDirection: 'row',
-        gap: 12,
-    },
-    flex1: {
-        flex: 1,
-    },
-    typeScroll: {
-        flexGrow: 0,
-    },
-    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',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        borderWidth: 1,
-        borderColor: '#d1d5db',
-        borderRadius: 8,
-        padding: 12,
-    },
-    dateText: {
-        fontSize: 16,
-        color: '#111827',
-    },
-    datePlaceholder: {
-        fontSize: 16,
-        color: '#9ca3af',
-    },
-    priorityContainer: {
-        flexDirection: 'row',
-        gap: 12,
-    },
-    priorityButton: {
-        flex: 1,
-        paddingVertical: 12,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: '#d1d5db',
-        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,
-        backgroundColor: '#fff',
-        borderTopWidth: 1,
-        borderTopColor: '#e5e7eb',
-    },
-    submitButton: {
-        backgroundColor: '#2563eb',
-        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',
-    },
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 20,
+    paddingTop: Platform.OS === "ios" ? 60 : 20,
+    borderBottomWidth: 1,
+  },
+  closeButton: {
+    padding: 4,
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+  field: {
+    marginBottom: 20,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    marginTop: 8,
+  },
+  textArea: {
+    height: 80,
+    textAlignVertical: "top",
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  flex1: {
+    flex: 1,
+  },
+  typeScroll: {
+    flexGrow: 0,
+    marginTop: 8,
+  },
+  typeButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    marginRight: 8,
+  },
+  dateButton: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 8,
+  },
+  priorityContainer: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 8,
+  },
+  priorityButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+  },
+  footer: {
+    padding: 20,
+    paddingBottom: Platform.OS === "ios" ? 40 : 20,
+    borderTopWidth: 1,
+  },
+  submitButton: {
+    width: "100%",
+  },
+  datePickerContainer: {
+    borderRadius: 8,
+    borderWidth: 1,
+    marginTop: 8,
+    overflow: "hidden",
+  },
 });