createSubject and editSubject removed, upsertSubject added. Tasks and assignments removed from top-level tabs and now only accessible through Subjects -> Assignments -> Tasks. More styling in general.

app/task/editTask.tsx

@@ -1,16 +1,28 @@
-import { defaultStyles } from '@/constants/defaultStyles';
 import { CheckAssignmentCompletion } from '@/lib/progress';
 import { supabase } from '@/lib/supabase';
 import type { Task } from '@/lib/types';
 import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
 import { useCallback, useState } from 'react';
-import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+import {
+  ActivityIndicator,
+  Alert,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 
 export default function EditTask() {
   const { tId } = useLocalSearchParams<{ tId: string }>();
-  const [task, SetTask] = useState<Task | null>(null)
+  const [task, SetTask] = useState<Task | null>(null);
   const [isSaving, SetIsSaving] = useState(false);
 
+
   const GetTask = async (tId: string) => { 
     const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
 
@@ -63,8 +75,6 @@ export default function EditTask() {
       return;
     }
 
-    Alert.alert("Task successfully edited!");
-
     if (task.aId) {
       try {
         await CheckAssignmentCompletion(task.aId);
@@ -73,63 +83,173 @@ export default function EditTask() {
       }
     }
 
+    Alert.alert("Task successfully edited!");
     router.back();
-  }
+  };
+
+  const inputClassName =
+    'rounded-2xl border border-app-border bg-app-subtle px-4 py-3 text-base text-text-main';
+
+  const labelClassName = 'mb-2 text-sm font-semibold text-text-secondary';
+
 
   return (
-    <View style={defaultStyles.container}>
+    <>
       <Stack.Screen
         options={{
-          title: "Edit Task",
-          headerTitleStyle: defaultStyles.title
+          title: 'Edit Task',
         }}
       />
 
-      {!task && (
-        <View style={defaultStyles.container}>
-          <Text style={defaultStyles.title}>Task not found</Text>
-        </View>
-      )}
+      {!task ? (
+        <View className="flex-1 bg-app-bg px-5 pt-6">
+          <View className="rounded-3xl border border-app-border bg-app-surface p-5">
+            <Text className="text-2xl font-bold text-text-main">
+              Task not found
+            </Text>
+            <Text className="mt-2 text-base text-text-secondary">
+              The task could not be loaded.
+            </Text>
+
+            <Pressable
+              className="mt-5 h-12 items-center justify-center rounded-2xl bg-accent"
+              onPress={() => router.back()}
+            >
+              <Text className="text-base font-bold text-text-inverse">
+                Go back
+              </Text>
+            </Pressable>
+          </View>
+        </View>
+      ) : (
+        <KeyboardAvoidingView
+          className="flex-1 bg-app-bg"
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        >
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <ScrollView
+              className="flex-1"
+              keyboardShouldPersistTaps="handled"
+              contentContainerStyle={{
+                flexGrow: 1,
+                justifyContent: 'center',
+                paddingHorizontal: 20,
+                paddingVertical: 32,
+              }}
+            >
+              <View className="mb-6">
+                <Text className="text-3xl font-bold text-text-main">
+                  Edit Task
+                </Text>
+                <Text className="mt-2 text-base leading-6 text-text-secondary">
+                  Update the task details and completion state.
+                </Text>
+              </View>
+
+              <View className="rounded-3xl border border-app-border bg-app-surface p-5">
+                <View className="mb-5">
+                  <Text className={labelClassName}>Title</Text>
+                  <TextInput
+                    className={inputClassName}
+                    placeholder="Enter task title"
+                    placeholderTextColor="#9CA3AF"
+                    value={task.title}
+                    onChangeText={(text) =>
+                      SetTask((prev) => (prev ? { ...prev, title: text } : prev))
+                    }
+                    returnKeyType="next"
+                  />
+                </View>
+
+                <View className="mb-5">
+                  <Text className={labelClassName}>Description</Text>
+                  <TextInput
+                    className={`${inputClassName} min-h-28`}
+                    placeholder="Add a short description"
+                    placeholderTextColor="#9CA3AF"
+                    value={task.description}
+                    onChangeText={(text) =>
+                      SetTask((prev) =>
+                        prev ? { ...prev, description: text } : prev
+                      )
+                    }
+                    multiline
+                    textAlignVertical="top"
+                  />
+                </View>
 
-      {task && (
-        <View style={defaultStyles.container}>
-          <Text style={defaultStyles.title}>Edit Task</Text>
-          <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
-            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-              <View style={defaultStyles.container}>
-                <TextInput
-                  style={defaultStyles.inputText}
-                  placeholder="Title"
-                  value={task.title}
-                  onChangeText={(text) => SetTask(prev => prev ? { ...prev, title: text } : prev)}
-                />
-                <TextInput
-                  style={defaultStyles.inputText}
-                  placeholder="Text"
-                  value={task.description}
-                  onChangeText={(text) => SetTask(prev => prev ? { ...prev, description: text } : prev)}
-                />
                 <Pressable
-                  onPress={() => SetTask(prev => prev ? { ...prev, isCompleted: !prev.isCompleted } : prev)}
-                  style={defaultStyles.checkboxContainer}
+                  onPress={() =>
+                    SetTask((prev) =>
+                      prev ? { ...prev, isCompleted: !prev.isCompleted } : prev
+                    )
+                  }
+                  disabled={isSaving}
+                  className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
+                    task.isCompleted
+                      ? 'border-accent bg-accent-soft'
+                      : 'border-app-border bg-app-subtle'
+                  }`}
                 >
-                  <View style={defaultStyles.checkbox}>
-                    {task.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                  <View
+                    className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                      task.isCompleted
+                        ? 'border-accent bg-accent'
+                        : 'border-app-border bg-app-surface'
+                    }`}
+                  >
+                    {task.isCompleted && (
+                      <Text className="text-sm font-bold text-text-inverse">
+                        ✓
+                      </Text>
+                    )}
+                  </View>
+
+                  <View className="flex-1">
+                    <Text className="text-base font-semibold text-text-main">
+                      Mark as completed
+                    </Text>
+                    <Text className="mt-1 text-sm text-text-muted">
+                      You can change this again later.
+                    </Text>
                   </View>
-                  <Text style={defaultStyles.checkboxLabel}>{task.isCompleted ? 'Completed' : 'Not Completed'}</Text>
                 </Pressable>
 
-                <Button title={isSaving ? "Saving..." : "Save"} onPress={EditTask} disabled={isSaving} />
-                {isSaving && (
-                  <ActivityIndicator size="large" />
-                )}
-                <Button title="Cancel" onPress={() => router.back()} />
-              </View>
-            </TouchableWithoutFeedback>
-          </KeyboardAvoidingView>
-        </View>
-      )}
-    </View>
-  )
-}
+                <Pressable
+                  className={`h-14 items-center justify-center rounded-2xl ${
+                    isSaving ? 'bg-accent-disabled' : 'bg-accent'
+                  }`}
+                  onPress={EditTask}
+                  disabled={isSaving}
+                >
+                  {isSaving ? (
+                    <View className="flex-row items-center">
+                      <ActivityIndicator size="small" />
+                      <Text className="ml-3 text-base font-bold text-text-inverse">
+                        Saving...
+                      </Text>
+                    </View>
+                  ) : (
+                    <Text className="text-base font-bold text-text-inverse">
+                      Save Changes
+                    </Text>
+                  )}
+                </Pressable>
 
+                <Pressable
+                  className="mt-3 h-14 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
+                  onPress={() => router.back()}
+                  disabled={isSaving}
+                >
+                  <Text className="text-base font-semibold text-text-secondary">
+                    Cancel
+                  </Text>
+                </Pressable>
+              </View>
+            </ScrollView>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      )}
+    </>
+  );
+}