restyle subject, assignment, and task screens with card layouts, consistent inputs, custom theme classes. replaced buttons with pressables and fixed some saving issues

app/(tabs)/_layout.tsx

@@ -28,9 +28,9 @@ export default function TabLayout() {
     return null;
   }
 
- //   if (!session) {
+//    if (!session) {
- //     return <Redirect href="/createUser" />;
+//      return <Redirect href="/createUser" />;
- //   }
+//    }
 
   return (
     <Tabs>

app/(tabs)/assignments.tsx

@@ -1,10 +1,16 @@
-import { defaultStyles } from "@/constants/defaultStyles";
+import { defaultStyles } from '@/constants/defaultStyles';
-import { supabase } from "@/lib/supabase";
+import { supabase } from '@/lib/supabase';
 import { Ionicons } from '@expo/vector-icons';
-import { Session } from "@supabase/supabase-js";
+import { Session } from '@supabase/supabase-js';
-import { router, Stack, useFocusEffect } from "expo-router";
+import { router, Stack, useFocusEffect } from 'expo-router';
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from 'react';
-import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
+import {
+  Alert,
+  Pressable,
+  SectionList,
+  Text,
+  View,
+} from 'react-native';
 
 type Assignment = {
   aId: string;
@@ -15,36 +21,52 @@ type Assignment = {
   lastChanged: string;
   uId: string;
   sId: string;
-}
+};
 
 export default function Assignments() {
-  const [assignments, SetAssignments] = useState<Assignment[]>([])
+  const [assignments, SetAssignments] = useState<Assignment[]>([]);
-  const [session, SetSession] = useState<Session | null>(null)
+  const [session, SetSession] = useState<Session | null>(null);
 
   const assignmentSections = [
-    { title: "Upcoming Assignments", data: assignments.filter((assignment) => !assignment.isCompleted), emptyMessage: "No upcoming assignments" },
+    {
-    { title: "Completed Assignments", data: assignments.filter((assignment) => assignment.isCompleted), emptyMessage: "No completed assignments" },
+      title: 'Upcoming Assignments',
+      data: assignments.filter((assignment) => !assignment.isCompleted),
+      emptyMessage: 'No upcoming assignments',
+    },
+    {
+      title: 'Completed Assignments',
+      data: assignments.filter((assignment) => assignment.isCompleted),
+      emptyMessage: 'No completed assignments',
+    },
   ];
 
   useEffect(() => {
-    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
+    supabase.auth
-    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
+      .getSession()
-      SetSession(newSession)
+      .then(({ data }) => SetSession(data.session ?? null));
-    })
-    return () => sub.subscription.unsubscribe()
-    },
-  [])
 
-  const GetAssignments = async () => { 
+    const { data: sub } = supabase.auth.onAuthStateChange(
-    const { data, error } = await supabase.from("assignments").select("*").order("deadline", { ascending: false });
+      (_event, newSession) => {
+        SetSession(newSession);
+      }
+    );
+
+    return () => sub.subscription.unsubscribe();
+  }, []);
+
+  const GetAssignments = async () => {
+    const { data, error } = await supabase
+      .from('assignments')
+      .select('*')
+      .order('deadline', { ascending: false });
 
     if (error) {
-      Alert.alert("Assignments could not be fetched, please try again");
+      Alert.alert('Assignments could not be fetched, please try again');
       return;
     }
 
     SetAssignments(data ?? []);
-  }
+  };
 
   useFocusEffect(
     useCallback(() => {
@@ -56,92 +78,205 @@ export default function Assignments() {
 
   const DeleteAssignment = async (aId: string) => {
     Alert.alert(
-      "Delete Assignment",
+      'Delete Assignment',
-      "Are you sure you want to delete this assignment?",
+      'Are you sure you want to delete this assignment?',
       [
         {
-          text: "Cancel",
+          text: 'Cancel',
-          style: "cancel"
+          style: 'cancel',
         },
         {
-          text: "Delete",
+          text: 'Delete',
-          style: "destructive",
+          style: 'destructive',
           onPress: async () => {
-            const { error } = await supabase.from("assignments").delete().eq("aId", aId);
+            const { error } = await supabase
+              .from('assignments')
+              .delete()
+              .eq('aId', aId);
 
             if (error) {
-              Alert.alert("Assignment could not be deleted, please try again");
+              Alert.alert('Assignment could not be deleted, please try again');
               return;
             }
 
-            Alert.alert("Assignment deleted successfully!");
+            Alert.alert('Assignment deleted successfully!');
             GetAssignments();
-          }
+          },
-        }
+        },
       ]
-    )
+    );
-  }
+  };
 
   return (
-    <View style={defaultStyles.container}>
+    <View className="flex-1 bg-app-bg">
       <Stack.Screen
         options={{
-          title: "Assignments",
+          title: 'Assignments',
           headerTitleStyle: defaultStyles.title,
-          headerRight: () => {
+          headerRight: () => (
-            return (
+            <View className="flex-row items-center">
-              <View style={defaultStyles.buttonContainer}>
+              <Pressable
-                <Pressable style={defaultStyles.circularButton} onPress={GetAssignments}>
+                className="mr-3 h-10 w-10 items-center justify-center rounded-full border border-app-border bg-app-surface"
-                  <Ionicons name="refresh" size={22} color="#333" />
+                onPress={GetAssignments}
-                </Pressable>
+              >
-                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
+                <Ionicons name="refresh" size={20} color="#333" />
-              </View>
+              </Pressable>
-            )
+
-          },
+              <Pressable
-        }}
+                className="rounded-full bg-app-subtle px-4 py-2"
-      />
+                onPress={async () => await supabase.auth.signOut()}
-
+              >
-      <View style={defaultStyles.buttonContainer}>
+                <Text className="text-sm font-semibold text-text-secondary">
-        <Button title="Create Assignment" onPress={() => router.push("/assignment/createAssignment")} />
+                  Logout
-      </View>
+                </Text>
-
-      <SectionList
-        sections={assignmentSections}
-        keyExtractor={(item) => item.aId}
-        renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
-        renderItem={({ item }) => {
-          const isOwner = session?.user.id === item.uId;
-
-          return (
-            <View style={defaultStyles.container}>
-              <Pressable style={defaultStyles.container} onPress={() => router.push({pathname: "/assignment/viewDetailsAssignment", params: { aId: item.aId }})}>
-                <Text style={defaultStyles.boldBody}>{item.title}</Text>
-                <Text style={defaultStyles.body}>{item.deadline}</Text>
-                <View style={defaultStyles.checkbox}>
-                  {item.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
-                </View>
               </Pressable>
-              
-              {isOwner && (
-                <View style={defaultStyles.buttonContainer}>
-                  <Button title="Edit" onPress={() => router.push({pathname: "/assignment/editAssignment", params: { aId: item.aId }})} />
-                  <Button title="Delete" onPress={() => DeleteAssignment(item.aId)} />
-                </View>
-              )}
             </View>
-          );
+          ),
         }}
-        renderSectionFooter={({ section }) =>
-          section.data.length === 0 ? (
-            <View style={defaultStyles.container}>
-              <Text style={defaultStyles.body}>{section.emptyMessage}</Text>
-              <View style={defaultStyles.separator} />
-            </View>
-          ) : (
-            <View style={defaultStyles.separator} />
-          )
-        }
       />
+
+      <View className="flex-1 px-5 pt-5">
+        <View className="mb-6">
+          <Text className="text-3xl font-bold text-text-main">
+            Assignments
+          </Text>
+          <Text className="mt-2 text-base leading-6 text-text-secondary">
+            Track what is coming up and what you have already finished.
+          </Text>
+        </View>
+
+        <Pressable
+          className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
+          onPress={() => router.push('/assignment/createAssignment')}
+        >
+          <Text className="text-base font-bold text-text-inverse">
+            Create Assignment
+          </Text>
+        </Pressable>
+
+        <SectionList
+          sections={assignmentSections}
+          keyExtractor={(item) => item.aId}
+          showsVerticalScrollIndicator={false}
+          stickySectionHeadersEnabled={false}
+          contentContainerStyle={{
+            paddingBottom: 32,
+          }}
+          renderSectionHeader={({ section: { title, data } }) => (
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                {title}
+              </Text>
+
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {data.length}
+                </Text>
+              </View>
+            </View>
+          )}
+          renderItem={({ item }) => {
+            const isOwner = session?.user.id === item.uId;
+
+            return (
+              <View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4 shadow-sm">
+                <Pressable
+                  onPress={() =>
+                    router.push({
+                      pathname: '/assignment/viewDetailsAssignment',
+                      params: { aId: item.aId },
+                    })
+                  }
+                >
+                  <View className="flex-row items-start">
+                    <View
+                      className={`mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                        item.isCompleted
+                          ? 'border-accent bg-accent'
+                          : 'border-app-border bg-app-subtle'
+                      }`}
+                    >
+                      {item.isCompleted && (
+                        <Text className="text-sm font-bold text-text-inverse">
+                          ✓
+                        </Text>
+                      )}
+                    </View>
+
+                    <View className="flex-1">
+                      <Text
+                        className={`text-base font-bold ${
+                          item.isCompleted
+                            ? 'text-text-secondary'
+                            : 'text-text-main'
+                        }`}
+                      >
+                        {item.title}
+                      </Text>
+
+                      {item.description ? (
+                        <Text
+                          className="mt-1 text-sm leading-5 text-text-muted"
+                          numberOfLines={2}
+                        >
+                          {item.description}
+                        </Text>
+                      ) : null}
+
+                      <View className="mt-3 self-start rounded-full bg-app-subtle px-3 py-1">
+                        <Text className="text-xs font-semibold text-text-secondary">
+                          Deadline: {item.deadline || 'No deadline'}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </Pressable>
+
+                {isOwner && (
+                  <View className="mt-4 flex-row border-t border-app-border pt-4">
+                    <Pressable
+                      className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
+                      onPress={() =>
+                        router.push({
+                          pathname: '/assignment/editAssignment',
+                          params: { aId: item.aId },
+                        })
+                      }
+                    >
+                      <Text className="text-sm font-bold text-text-secondary">
+                        Edit
+                      </Text>
+                    </Pressable>
+
+                    <Pressable
+                      className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
+                      onPress={() => DeleteAssignment(item.aId)}
+                    >
+                      <Text className="text-sm font-bold text-status-danger">
+                        Delete
+                      </Text>
+                    </Pressable>
+                  </View>
+                )}
+              </View>
+            );
+          }}
+          renderSectionFooter={({ section }) =>
+            section.data.length === 0 ? (
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  {section.emptyMessage}
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  New assignments will show up here.
+                </Text>
+              </View>
+            ) : (
+              <View className="mb-2" />
+            )
+          }
+        />
+      </View>
     </View>
-  )
+  );
-}
+}

app/(tabs)/subjects.tsx

@@ -1,10 +1,16 @@
-import { defaultStyles } from "@/constants/defaultStyles";
+import { defaultStyles } from '@/constants/defaultStyles';
-import { supabase } from "@/lib/supabase";
+import { supabase } from '@/lib/supabase';
 import { Ionicons } from '@expo/vector-icons';
-import { Session } from "@supabase/supabase-js";
+import { Session } from '@supabase/supabase-js';
-import { router, Stack, useFocusEffect } from "expo-router";
+import { router, Stack, useFocusEffect } from 'expo-router';
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from 'react';
-import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
+import {
+  Alert,
+  Pressable,
+  SectionList,
+  Text,
+  View,
+} from 'react-native';
 
 type Subject = {
   sId: string;
@@ -13,36 +19,52 @@ type Subject = {
   isActive: boolean;
   lastChanged: string;
   uId: string;
-}
+};
 
 export default function Subjects() {
-  const [subjects, SetSubject] = useState<Subject[]>([])
+  const [subjects, SetSubjects] = useState<Subject[]>([]);
-  const [session, SetSession] = useState<Session | null>(null)
+  const [session, SetSession] = useState<Session | null>(null);
 
   const subjectSections = [
-    { title: "Active Subjects", data: subjects.filter((subject) => !subject.isActive), emptyMessage: "No active subjects" },
+    {
-    { title: "Inactive Subjects", data: subjects.filter((subject) => subject.isActive), emptyMessage: "No inactive subjects" },
+      title: 'Active Subjects',
+      data: subjects.filter((subject) => subject.isActive),
+      emptyMessage: 'No active subjects',
+    },
+    {
+      title: 'Inactive Subjects',
+      data: subjects.filter((subject) => !subject.isActive),
+      emptyMessage: 'No inactive subjects',
+    },
   ];
 
   useEffect(() => {
-    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
+    supabase.auth
-    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
+      .getSession()
-      SetSession(newSession)
+      .then(({ data }) => SetSession(data.session ?? null));
-    })
-    return () => sub.subscription.unsubscribe()
-    },
-  [])
 
-  const GetSubjects = async () => { 
+    const { data: sub } = supabase.auth.onAuthStateChange(
-    const { data, error } = await supabase.from("subjects").select("*");
+      (_event, newSession) => {
+        SetSession(newSession);
+      }
+    );
+
+    return () => sub.subscription.unsubscribe();
+  }, []);
+
+  const GetSubjects = async () => {
+    const { data, error } = await supabase
+      .from('subjects')
+      .select('*')
+      .order('lastChanged', { ascending: false });
 
     if (error) {
-      Alert.alert("Subjects could not be fetched, please try again");
+      Alert.alert('Subjects could not be fetched, please try again');
       return;
     }
 
-    SetSubject(data ?? []);
+    SetSubjects(data ?? []);
-  }
+  };
 
   useFocusEffect(
     useCallback(() => {
@@ -54,91 +76,206 @@ export default function Subjects() {
 
   const DeleteSubject = async (sId: string) => {
     Alert.alert(
-      "Delete Subject",
+      'Delete Subject',
-      "Are you sure you want to delete this subject?",
+      'Are you sure you want to delete this subject?',
       [
         {
-          text: "Cancel",
+          text: 'Cancel',
-          style: "cancel"
+          style: 'cancel',
         },
         {
-          text: "Delete",
+          text: 'Delete',
-          style: "destructive",
+          style: 'destructive',
           onPress: async () => {
-            const { error } = await supabase.from("subjects").delete().eq("sId", sId);
+            const { error } = await supabase
+              .from('subjects')
+              .delete()
+              .eq('sId', sId);
 
             if (error) {
-              Alert.alert("Subject could not be deleted, please try again");
+              Alert.alert('Subject could not be deleted, please try again');
               return;
             }
 
-            Alert.alert("Subject deleted successfully!");
+            Alert.alert('Subject deleted successfully!');
             GetSubjects();
-          }
+          },
-        }
+        },
       ]
-    )
+    );
-  }
+  };
 
   return (
-    <View style={defaultStyles.container}>
+    <View className="flex-1 bg-app-bg">
       <Stack.Screen
         options={{
-          title: "Subjects",
+          title: 'Subjects',
           headerTitleStyle: defaultStyles.title,
-          headerRight: () => {
+          headerRight: () => (
-            return (
+            <View className="flex-row items-center">
-              <View style={defaultStyles.buttonContainer}>
+              <Pressable
-                <Pressable style={defaultStyles.circularButton} onPress={GetSubjects}>
+                className="mr-3 h-10 w-10 items-center justify-center rounded-full border border-app-border bg-app-surface"
-                  <Ionicons name="refresh" size={22} color="#333" />
+                onPress={GetSubjects}
-                </Pressable>
+              >
-                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
+                <Ionicons name="refresh" size={20} color="#333" />
-              </View>
+              </Pressable>
-            )
+
-          },
+              <Pressable
-        }}
+                className="rounded-full bg-app-subtle px-4 py-2"
-      />
+                onPress={async () => await supabase.auth.signOut()}
-
+              >
-      <View style={defaultStyles.buttonContainer}>
+                <Text className="text-sm font-semibold text-text-secondary">
-        <Button title="Create Subject" onPress={() => router.push("/subject/createSubject")} />
+                  Logout
-      </View>
+                </Text>
-
-      <SectionList
-        sections={subjectSections}
-        keyExtractor={(item) => item.sId}
-        renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
-        renderItem={({ item }) => {
-          const isOwner = session?.user.id === item.uId;
-
-          return (
-            <View style={defaultStyles.container}>
-              <Pressable style={defaultStyles.buttonContainer} onPress={() => router.push({pathname: "/subject/viewDetailsSubject", params: { sId: item.sId }})}>
-                <Text style={defaultStyles.title}>{item.title}</Text>
-                <View style={defaultStyles.checkbox}>
-                  {item.isActive && <Text style={defaultStyles.checkboxMark}>✓</Text>}
-                </View>
               </Pressable>
-              
-              {isOwner && (
-                <View style={defaultStyles.buttonContainer}>
-                  <Button title="Edit" onPress={() => router.push({pathname: "/subject/editSubject", params: { sId: item.sId }})} />
-                  <Button title="Delete" onPress={() => DeleteSubject(item.sId)} />
-                </View>
-              )}
             </View>
-          );
+          ),
         }}
-        renderSectionFooter={({ section }) =>
-          section.data.length === 0 ? (
-            <View style={defaultStyles.container}>
-              <Text style={defaultStyles.body}>{section.emptyMessage}</Text>
-              <View style={defaultStyles.separator} />
-            </View>
-          ) : (
-            <View style={defaultStyles.separator} />
-          )
-        }
       />
+
+      <View className="flex-1 px-5 pt-5">
+        <View className="mb-6">
+          <Text className="text-3xl font-bold text-text-main">
+            Subjects
+          </Text>
+          <Text className="mt-2 text-base leading-6 text-text-secondary">
+            Organize your study work by subject, then break it into assignments
+            and tasks.
+          </Text>
+        </View>
+
+        <Pressable
+          className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
+          onPress={() => router.push('/subject/createSubject')}
+        >
+          <Text className="text-base font-bold text-text-inverse">
+            Create Subject
+          </Text>
+        </Pressable>
+
+        <SectionList
+          sections={subjectSections}
+          keyExtractor={(item) => item.sId}
+          showsVerticalScrollIndicator={false}
+          stickySectionHeadersEnabled={false}
+          contentContainerStyle={{
+            paddingBottom: 32,
+          }}
+          renderSectionHeader={({ section: { title, data } }) => (
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                {title}
+              </Text>
+
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {data.length}
+                </Text>
+              </View>
+            </View>
+          )}
+          renderItem={({ item }) => {
+            const isOwner = session?.user.id === item.uId;
+
+            return (
+              <View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4 shadow-sm">
+                <Pressable
+                  onPress={() =>
+                    router.push({
+                      pathname: '/subject/viewDetailsSubject',
+                      params: { sId: item.sId },
+                    })
+                  }
+                >
+                  <View className="flex-row items-start">
+                    <View
+                      className={`mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                        item.isActive
+                          ? 'border-accent bg-accent'
+                          : 'border-app-border bg-app-subtle'
+                      }`}
+                    >
+                      {item.isActive && (
+                        <Text className="text-sm font-bold text-text-inverse">
+                          ✓
+                        </Text>
+                      )}
+                    </View>
+
+                    <View className="flex-1">
+                      <Text
+                        className={`text-base font-bold ${
+                          item.isActive
+                            ? 'text-text-main'
+                            : 'text-text-secondary'
+                        }`}
+                      >
+                        {item.title}
+                      </Text>
+
+                      {item.description ? (
+                        <Text
+                          className="mt-1 text-sm leading-5 text-text-muted"
+                          numberOfLines={2}
+                        >
+                          {item.description}
+                        </Text>
+                      ) : null}
+
+                      <View className="mt-3 self-start rounded-full bg-app-subtle px-3 py-1">
+                        <Text className="text-xs font-semibold text-text-secondary">
+                          {item.isActive ? 'Active' : 'Inactive'}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </Pressable>
+
+                {isOwner && (
+                  <View className="mt-4 flex-row border-t border-app-border pt-4">
+                    <Pressable
+                      className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
+                      onPress={() =>
+                        router.push({
+                          pathname: '/subject/editSubject',
+                          params: { sId: item.sId },
+                        })
+                      }
+                    >
+                      <Text className="text-sm font-bold text-text-secondary">
+                        Edit
+                      </Text>
+                    </Pressable>
+
+                    <Pressable
+                      className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
+                      onPress={() => DeleteSubject(item.sId)}
+                    >
+                      <Text className="text-sm font-bold text-status-danger">
+                        Delete
+                      </Text>
+                    </Pressable>
+                  </View>
+                )}
+              </View>
+            );
+          }}
+          renderSectionFooter={({ section }) =>
+            section.data.length === 0 ? (
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  {section.emptyMessage}
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  Subjects you create will show up here.
+                </Text>
+              </View>
+            ) : (
+              <View className="mb-2" />
+            )
+          }
+        />
+      </View>
     </View>
-  )
+  );
-}
+}

app/(tabs)/tasks.tsx

@@ -1,10 +1,16 @@
-import { defaultStyles } from "@/constants/defaultStyles";
+import { defaultStyles } from '@/constants/defaultStyles';
-import { supabase } from "@/lib/supabase";
+import { supabase } from '@/lib/supabase';
 import { Ionicons } from '@expo/vector-icons';
-import { Session } from "@supabase/supabase-js";
+import { Session } from '@supabase/supabase-js';
-import { router, Stack, useFocusEffect } from "expo-router";
+import { router, Stack, useFocusEffect } from 'expo-router';
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from 'react';
-import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
+import {
+  Alert,
+  Pressable,
+  SectionList,
+  Text,
+  View,
+} from 'react-native';
 
 type Task = {
   tId: string;
@@ -14,36 +20,49 @@ type Task = {
   lastChanged: string;
   uId: string;
   aId: string;
-}
+};
 
 export default function Tasks() {
-  const [tasks, SetTasks] = useState<Task[]>([])
+  const [tasks, SetTasks] = useState<Task[]>([]);
-  const [session, SetSession] = useState<Session | null>(null)
+  const [session, SetSession] = useState<Session | null>(null);
 
   const taskSections = [
-    { title: "Upcoming Tasks", data: tasks.filter((task) => !task.isCompleted), emptyMessage: "No upcoming tasks" },
+    {
-    { title: "Completed Tasks", data: tasks.filter((task) => task.isCompleted), emptyMessage: "No completed tasks" },
+      title: 'Upcoming Tasks',
+      data: tasks.filter((task) => !task.isCompleted),
+      emptyMessage: 'No upcoming tasks',
+    },
+    {
+      title: 'Completed Tasks',
+      data: tasks.filter((task) => task.isCompleted),
+      emptyMessage: 'No completed tasks',
+    },
   ];
 
   useEffect(() => {
-    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
+    supabase.auth
-    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
+      .getSession()
-      SetSession(newSession)
+      .then(({ data }) => SetSession(data.session ?? null));
-    })
-    return () => sub.subscription.unsubscribe()
-    },
-  [])
 
-  const GetTasks = async () => { 
+    const { data: sub } = supabase.auth.onAuthStateChange(
-    const { data, error } = await supabase.from("tasks").select("*");
+      (_event, newSession) => {
+        SetSession(newSession);
+      }
+    );
+
+    return () => sub.subscription.unsubscribe();
+  }, []);
+
+  const GetTasks = async () => {
+    const { data, error } = await supabase.from('tasks').select('*');
 
     if (error) {
-      Alert.alert("Tasks could not be fetched, please try again");
+      Alert.alert('Tasks could not be fetched, please try again');
       return;
     }
 
     SetTasks(data ?? []);
-  }
+  };
 
   useFocusEffect(
     useCallback(() => {
@@ -55,91 +74,205 @@ export default function Tasks() {
 
   const DeleteTask = async (tId: string) => {
     Alert.alert(
-      "Delete Task",
+      'Delete Task',
-      "Are you sure you want to delete this task?",
+      'Are you sure you want to delete this task?',
       [
         {
-          text: "Cancel",
+          text: 'Cancel',
-          style: "cancel"
+          style: 'cancel',
         },
         {
-          text: "Delete",
+          text: 'Delete',
-          style: "destructive",
+          style: 'destructive',
           onPress: async () => {
-            const { error } = await supabase.from("tasks").delete().eq("tId", tId);
+            const { error } = await supabase
+              .from('tasks')
+              .delete()
+              .eq('tId', tId);
 
             if (error) {
-              Alert.alert("Task could not be deleted, please try again");
+              Alert.alert('Task could not be deleted, please try again');
               return;
             }
 
-            Alert.alert("Task deleted successfully!");
+            Alert.alert('Task deleted successfully!');
             GetTasks();
-          }
+          },
-        }
+        },
       ]
-    )
+    );
-  }
+  };
 
   return (
-    <View style={defaultStyles.container}>
+    <View className="flex-1 bg-app-bg">
       <Stack.Screen
         options={{
-          title: "Tasks",
+          title: 'Tasks',
           headerTitleStyle: defaultStyles.title,
-          headerRight: () => {
+          headerRight: () => (
-            return (
+            <View className="flex-row items-center">
-              <View style={defaultStyles.buttonContainer}>
+              <Pressable
-                <Pressable style={defaultStyles.circularButton} onPress={GetTasks}>
+                className="mr-3 h-10 w-10 items-center justify-center rounded-full border border-app-border bg-app-surface"
-                  <Ionicons name="refresh" size={22} color="#333" />
+                onPress={GetTasks}
-                </Pressable>
+              >
-                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
+                <Ionicons name="refresh" size={20} color="#333" />
-              </View>
-            )
-          },
-        }}
-      />
-
-      <View style={defaultStyles.buttonContainer}>
-        <Button title="Create Task" onPress={() => router.push("/task/createTask")} />
-      </View>
-
-      <SectionList
-        sections={taskSections}
-        keyExtractor={(item) => item.tId}
-        renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
-        renderItem={({ item }) => {
-          const isOwner = session?.user.id === item.uId;
-
-          return (
-            <View style={defaultStyles.container}>
-              <Pressable style={defaultStyles.container} onPress={() => router.push({pathname: "/task/viewDetailsTask", params: { tId: item.tId }})}>
-                <Text style={defaultStyles.boldBody}>{item.title}</Text>
-                <View style={defaultStyles.checkbox}>
-                  {item.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
-                </View>
               </Pressable>
 
-              {isOwner && (
+              <Pressable
-                <View style={defaultStyles.buttonContainer}>
+                className="rounded-full bg-app-subtle px-4 py-2"
-                  <Button title="Edit" onPress={() => router.push({pathname: "/task/editTask", params: { tId: item.tId }})} />
+                onPress={async () => await supabase.auth.signOut()}
-                  <Button title="Delete" onPress={() => DeleteTask(item.tId)} />
+              >
-                </View>
+                <Text className="text-sm font-semibold text-text-secondary">
-              )}
+                  Logout
+                </Text>
+              </Pressable>
             </View>
-          );
+          ),
         }}
-        renderSectionFooter={({ section }) =>
-          section.data.length === 0 ? (
-            <View style={defaultStyles.container}>
-              <Text style={defaultStyles.body}>{section.emptyMessage}</Text>
-              <View style={defaultStyles.separator} />
-            </View>
-          ) : (
-            <View style={defaultStyles.separator} />
-          )
-        }
       />
+
+      <View className="flex-1 px-5 pt-5">
+        <View className="mb-6">
+          <Text className="text-3xl font-bold text-text-main">
+            Tasks
+          </Text>
+          <Text className="mt-2 text-base leading-6 text-text-secondary">
+            Break assignments into small steps and keep your progress clear.
+          </Text>
+        </View>
+
+        <Pressable
+          className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
+          onPress={() => router.push('/task/createTask')}
+        >
+          <Text className="text-base font-bold text-text-inverse">
+            Create Task
+          </Text>
+        </Pressable>
+
+        <SectionList
+          sections={taskSections}
+          keyExtractor={(item) => item.tId}
+          showsVerticalScrollIndicator={false}
+          stickySectionHeadersEnabled={false}
+          contentContainerStyle={{
+            paddingBottom: 32,
+          }}
+          renderSectionHeader={({ section: { title, data } }) => (
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                {title}
+              </Text>
+
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {data.length}
+                </Text>
+              </View>
+            </View>
+          )}
+          renderItem={({ item }) => {
+            const isOwner = session?.user.id === item.uId;
+
+            return (
+              <View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4 shadow-sm">
+                <Pressable
+                  onPress={() =>
+                    router.push({
+                      pathname: '/task/viewDetailsTask',
+                      params: { tId: item.tId },
+                    })
+                  }
+                >
+                  <View className="flex-row items-start">
+                    <View
+                      className={`mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                        item.isCompleted
+                          ? 'border-accent bg-accent'
+                          : 'border-app-border bg-app-subtle'
+                      }`}
+                    >
+                      {item.isCompleted && (
+                        <Text className="text-sm font-bold text-text-inverse">
+                          ✓
+                        </Text>
+                      )}
+                    </View>
+
+                    <View className="flex-1">
+                      <Text
+                        className={`text-base font-bold ${
+                          item.isCompleted
+                            ? 'text-text-secondary'
+                            : 'text-text-main'
+                        }`}
+                      >
+                        {item.title}
+                      </Text>
+
+                      {item.description ? (
+                        <Text
+                          className="mt-1 text-sm leading-5 text-text-muted"
+                          numberOfLines={2}
+                        >
+                          {item.description}
+                        </Text>
+                      ) : null}
+
+                      <View className="mt-3 self-start rounded-full bg-app-subtle px-3 py-1">
+                        <Text className="text-xs font-semibold text-text-secondary">
+                          {item.isCompleted ? 'Completed' : 'In progress'}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </Pressable>
+
+                {isOwner && (
+                  <View className="mt-4 flex-row border-t border-app-border pt-4">
+                    <Pressable
+                      className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
+                      onPress={() =>
+                        router.push({
+                          pathname: '/task/editTask',
+                          params: { tId: item.tId },
+                        })
+                      }
+                    >
+                      <Text className="text-sm font-bold text-text-secondary">
+                        Edit
+                      </Text>
+                    </Pressable>
+
+                    <Pressable
+                      className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
+                      onPress={() => DeleteTask(item.tId)}
+                    >
+                      <Text className="text-sm font-bold text-status-danger">
+                        Delete
+                      </Text>
+                    </Pressable>
+                  </View>
+                )}
+              </View>
+            );
+          }}
+          renderSectionFooter={({ section }) =>
+            section.data.length === 0 ? (
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  {section.emptyMessage}
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  Tasks for this assignment will show up here.
+                </Text>
+              </View>
+            ) : (
+              <View className="mb-2" />
+            )
+          }
+        />
+      </View>
     </View>
-  )
+  );
-}
+}

app/assignment/createAssignment.tsx

@@ -2,10 +2,23 @@ import { defaultStyles } from '@/constants/defaultStyles';
 import { supabase } from '@/lib/supabase';
 import { router, Stack, useLocalSearchParams } from 'expo-router';
 import { useState } from 'react';
-import { ActivityIndicator, Alert, Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, 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 CreateAssignment() {
   const sId = (useLocalSearchParams().sId as string) ?? null;
+
   const [title, SetTitle] = useState('');
   const [description, SetDescription] = useState('');
   const [deadline, SetDeadline] = useState('');
@@ -13,171 +26,188 @@ export default function CreateAssignment() {
   const [isSaving, SetIsSaving] = useState(false);
 
   const CreateAssignment = async () => {
-    if(title.trim() === '') {
+    if (title.trim() === '') {
-      Alert.alert("Title is required!");
+      Alert.alert('Title is required!');
       return;
     }
-        
+
     const { data, error: userError } = await supabase.auth.getUser();
 
-    if(userError || !data.user) {
+    if (userError || !data.user) {
-      router.replace("../createUser");
+      router.replace('../createUser');
       return;
-    } 
+    }
 
     SetIsSaving(true);
 
-    const { error: dbError } = await supabase.from("assignments").insert({
+    const { error: dbError } = await supabase.from('assignments').insert({
-      title,
+      title: title.trim(),
-      description,
+      description: description.trim(),
-      deadline,
+      deadline: deadline.trim(),
       isCompleted,
       lastChanged: new Date().toISOString(),
       uId: data.user.id,
-      sId: sId,
+      sId,
     });
 
     if (dbError) {
-      Alert.alert("Assignment could not be created, please try again");
+      SetIsSaving(false);
+      Alert.alert('Assignment could not be created, please try again');
       return;
     }
 
-    Alert.alert("Assignment successfully created!");
+    Alert.alert('Assignment successfully created!');
 
     SetTitle('');
     SetDescription('');
+    SetDeadline('');
     SetIsCompleted(false);
-
     SetIsSaving(false);
 
     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 (
     <>
       <Stack.Screen
         options={{
-          title: "Create Assignment",
+          title: 'Create Assignment',
-          headerTitleStyle: defaultStyles.title
+          headerTitleStyle: defaultStyles.title,
         }}
       />
 
-      <View style={defaultStyles.container}>
+      <KeyboardAvoidingView
-        <Text style={defaultStyles.title}>Create New Assignment</Text>
+        className="flex-1 bg-app-bg"
-        <KeyboardAvoidingView 
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          className="flex-1 bg-gray-100"
+      >
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-        >
+          <ScrollView
-          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            className="flex-1"
-            <ScrollView
+            keyboardShouldPersistTaps="handled"
-              keyboardShouldPersistTaps="handled"
+            contentContainerStyle={{
-              contentContainerStyle={{
+              flexGrow: 1,
-                flexGrow: 1,
+              justifyContent: 'center',
-                justifyContent: 'center',
+              paddingHorizontal: 20,
-                paddingHorizontal: 20,
+              paddingVertical: 32,
-                paddingVertical: 32,
+            }}
-              }}
+          >
-            >
+            <View className="mb-6">
-              <View className="rounded-3xl bg-white p-6 shadow-lg">
+              <Text className="text-3xl font-bold text-text-main">
-                <View className="mb-4">
+                Create Assignment
-                  <Text className="mb-2 text-sm font-semibold text-gray-700">
+              </Text>
-                    Title
+              <Text className="mt-2 text-base leading-6 text-text-secondary">
-                  </Text>
+                Add a new assignment to keep your subject organized.
-                  <TextInput
+              </Text>
-                    className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
+            </View>
-                    placeholder="Enter title"
-                    placeholderTextColor="#9ca3af"
-                    value={title}
-                    onChangeText={SetTitle}
-                  />
-                </View>
 
-                <View className="mb-4">
+            <View className="rounded-3xl border border-app-border bg-app-surface p-5 shadow-sm">
-                  <Text className="mb-2 text-sm font-semibold text-gray-700">
+              <View className="mb-5">
-                    Description
+                <Text className={labelClassName}>Title</Text>
-                  </Text>
+                <TextInput
-                  <TextInput
+                  className={inputClassName}
-                    className="min-h-28 rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"                      placeholder="Enter description"
+                  placeholder="Enter assignment title"
-                    placeholderTextColor="#9ca3af"
+                  value={title}
-                    value={description}
+                  onChangeText={SetTitle}
-                    onChangeText={SetDescription}
+                  returnKeyType="next"
-                    multiline
+                />
-                    textAlignVertical="top"
-                  />
-                </View>
-
-                <View className="mb-4">
-                  <Text className="mb-2 text-sm font-semibold text-gray-700">
-                    Deadline
-                  </Text>
-                  <TextInput
-                    className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
-                    placeholder="YYYY-MM-DD"
-                    placeholderTextColor="#9ca3af"
-                    value={deadline}
-                    onChangeText={SetDeadline}
-                  />
-                </View>
-
-                <Pressable
-                  className={`mb-6 flex-row items-center rounded-xl border p-4
-                    ${isCompleted
-                      ? 'border-blue-600 bg-blue-50'
-                      : 'border-gray-300 bg-gray-50'
-                    }`
-                  }
-                  onPress={() => SetIsCompleted((current) => !current)}
-                >
-                  <View
-                    className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 
-                      ${isCompleted
-                        ? 'border-blue-600 bg-blue-600' 
-                        : 'border-gray-400 bg-white'
-                      }`
-                    }
-                  >
-                    {isCompleted && (
-                      <Text className="text-base font-bold text-white">✓</Text>
-                    )}
-                  </View>
-
-                  <Text className="text-base font-semibold text-gray-900">
-                    {isCompleted ? 'Completed' : 'Not completed'}
-                  </Text>
-                </Pressable>
-
-                <Pressable
-                  className={`h-14 items-center justify-center rounded-2xl ${
-                    isSaving ? 'bg-blue-400' : 'bg-blue-600'
-                  }`}
-                  onPress={CreateAssignment}
-                  disabled={isSaving}
-                >
-                  <Text className="text-base font-bold text-white">
-                    {isSaving ? 'Saving...' : 'Save Changes'}
-                  </Text>
-                </Pressable>
-
-                {isSaving && (
-                  <View className="mt-4">
-                    <ActivityIndicator size="small" />
-                  </View>
-                )}
-
-                <Pressable
-                  className="mt-3 h-14 items-center justify-center rounded-2xl bg-gray-200"
-                  onPress={() => router.back()}
-                  disabled={isSaving}
-                >
-                  <Text className="text-base font-bold text-gray-900">
-                    Cancel
-                  </Text>
-                </Pressable>
               </View>
-            </ScrollView>
+
-          </TouchableWithoutFeedback>
+              <View className="mb-5">
-        </KeyboardAvoidingView>
+                <Text className={labelClassName}>Description</Text>
-      </View>
+                <TextInput
+                  className={`${inputClassName} min-h-28`}
+                  placeholder="Add a short description"
+                  value={description}
+                  onChangeText={SetDescription}
+                  multiline
+                  textAlignVertical="top"
+                />
+              </View>
+
+              <View className="mb-5">
+                <Text className={labelClassName}>Deadline</Text>
+                <TextInput
+                  className={inputClassName}
+                  placeholder="YYYY-MM-DD"
+                  value={deadline}
+                  onChangeText={SetDeadline}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                />
+              </View>
+
+              <Pressable
+                className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
+                  isCompleted
+                    ? 'border-accent bg-accent-soft'
+                    : 'border-app-border bg-app-subtle'
+                }`}
+                onPress={() => SetIsCompleted((current) => !current)}
+                disabled={isSaving}
+              >
+                <View
+                  className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                    isCompleted
+                      ? 'border-accent bg-accent'
+                      : 'border-app-border bg-app-surface'
+                  }`}
+                >
+                  {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 later.
+                  </Text>
+                </View>
+              </Pressable>
+
+              <Pressable
+                className={`h-14 items-center justify-center rounded-2xl ${
+                  isSaving ? 'bg-accent-disabled' : 'bg-accent'
+                }`}
+                onPress={CreateAssignment}
+                disabled={isSaving}
+              >
+                {isSaving ? (
+                  <View className="flex-row items-center">
+                    <ActivityIndicator size="small" />
+                    <Text className="ml-3 text-base font-bold text-text-inverse">
+                      Creating...
+                    </Text>
+                  </View>
+                ) : (
+                  <Text className="text-base font-bold text-text-inverse">
+                    Create Assignment
+                  </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>
     </>
   );
 }

app/subject/createSubject.tsx

@@ -2,99 +2,194 @@ import { defaultStyles } from '@/constants/defaultStyles';
 import { supabase } from '@/lib/supabase';
 import { router, Stack } from 'expo-router';
 import { 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 CreateTask() {
+export default function CreateSubject() {
   const [title, SetTitle] = useState('');
   const [description, SetDescription] = useState('');
   const [isActive, SetIsActive] = useState(true);
   const [isSaving, SetIsSaving] = useState(false);
 
   const CreateSubject = async () => {
-    if(title.trim() === '') {
+    if (title.trim() === '') {
-      Alert.alert("Title is required!");
+      Alert.alert('Title is required!');
       return;
     }
-        
+
     const { data, error: userError } = await supabase.auth.getUser();
 
-    if(userError || !data.user) {
+    if (userError || !data.user) {
-      router.replace("../createUser");
+      router.replace('../createUser');
       return;
-    } 
+    }
 
     SetIsSaving(true);
 
-    const { error: dbError } = await supabase.from("subjects").insert({
+    const { error: dbError } = await supabase.from('subjects').insert({
-      title,
+      title: title.trim(),
-      description,
+      description: description.trim(),
       isActive,
       lastChanged: new Date().toISOString(),
       uId: data.user.id,
     });
 
     if (dbError) {
-      Alert.alert("Subject could not be created, please try again");
+      SetIsSaving(false);
+      Alert.alert('Subject could not be created, please try again');
       return;
     }
 
-    Alert.alert("Subject successfully created!");
+    Alert.alert('Subject successfully created!');
 
     SetTitle('');
     SetDescription('');
-    SetIsActive(false);
+    SetIsActive(true);
-
     SetIsSaving(false);
 
     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 (
     <>
       <Stack.Screen
         options={{
-          title: "Create Subject",
+          title: 'Create Subject',
-          headerTitleStyle: defaultStyles.title
+          headerTitleStyle: defaultStyles.title,
         }}
       />
 
-      <View style={defaultStyles.container}>
+      <KeyboardAvoidingView
-        <Text style={defaultStyles.title}>Create New Subject</Text>
+        className="flex-1 bg-app-bg"
-        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      >
-            <View style={defaultStyles.container}>
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-              <TextInput
+          <ScrollView
-                style={defaultStyles.inputText}
+            className="flex-1"
-                placeholder="Enter title"
+            keyboardShouldPersistTaps="handled"
-                value={title}
+            contentContainerStyle={{
-                onChangeText={SetTitle}
+              flexGrow: 1,
-              />
+              justifyContent: 'center',
-              <TextInput
+              paddingHorizontal: 20,
-                style={defaultStyles.inputText}
+              paddingVertical: 32,
-                placeholder="Enter description"
+            }}
-                value={description}
+          >
-                onChangeText={SetDescription}
+            <View className="mb-6">
-              />
+              <Text className="text-3xl font-bold text-text-main">
+                Create Subject
+              </Text>
+              <Text className="mt-2 text-base leading-6 text-text-secondary">
+                Add a subject to organize your assignments and study tasks.
+              </Text>
+            </View>
+
+            <View className="rounded-3xl border border-app-border bg-app-surface p-5 shadow-sm">
+              <View className="mb-5">
+                <Text className={labelClassName}>Title</Text>
+                <TextInput
+                  className={inputClassName}
+                  placeholder="Enter subject title"
+                  value={title}
+                  onChangeText={SetTitle}
+                  returnKeyType="next"
+                />
+              </View>
+
+              <View className="mb-5">
+                <Text className={labelClassName}>Description</Text>
+                <TextInput
+                  className={`${inputClassName} min-h-28`}
+                  placeholder="Add a short description"
+                  value={description}
+                  onChangeText={SetDescription}
+                  multiline
+                  textAlignVertical="top"
+                />
+              </View>
+
               <Pressable
-                onPress={() => SetIsActive(state => !state)}
+                onPress={() => SetIsActive((state) => !state)}
-                style={defaultStyles.checkboxContainer}
+                disabled={isSaving}
+                className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
+                  isActive
+                    ? 'border-accent bg-accent-soft'
+                    : 'border-app-border bg-app-subtle'
+                }`}
               >
-                <View style={defaultStyles.checkbox}>
+                <View
-                  {isActive && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                  className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                    isActive
+                      ? 'border-accent bg-accent'
+                      : 'border-app-border bg-app-surface'
+                  }`}
+                >
+                  {isActive && (
+                    <Text className="text-sm font-bold text-text-inverse">
+                      ✓
+                    </Text>
+                  )}
+                </View>
+
+                <View className="flex-1">
+                  <Text className="text-base font-semibold text-text-main">
+                    Active subject
+                  </Text>
+                  <Text className="mt-1 text-sm text-text-muted">
+                    Active subjects appear in your main study workflow.
+                  </Text>
                 </View>
-                <Text style={defaultStyles.checkboxLabel}>{isActive ? 'Active' : 'Inactive'}</Text>
               </Pressable>
 
-              <Button title={isSaving ? "Saving..." : "Save"} onPress={CreateSubject} disabled={isSaving} />
+              <Pressable
-              {isSaving && (
+                className={`h-14 items-center justify-center rounded-2xl ${
-                <ActivityIndicator size="large" />
+                  isSaving ? 'bg-accent-disabled' : 'bg-accent'
-              )}
+                }`}
-              <Button title="Cancel" onPress={() => router.back()} />
+                onPress={CreateSubject}
-            </View>
+                disabled={isSaving}
-          </TouchableWithoutFeedback>
+              >
-        </KeyboardAvoidingView>
+                {isSaving ? (
-      </View>
+                  <View className="flex-row items-center">
-    </>
+                    <ActivityIndicator size="small" />
-  )
+                    <Text className="ml-3 text-base font-bold text-text-inverse">
-}
+                      Creating...
+                    </Text>
+                  </View>
+                ) : (
+                  <Text className="text-base font-bold text-text-inverse">
+                    Create Subject
+                  </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>
+    </>
+  );
+}

app/task/createTask.tsx

@@ -2,102 +2,197 @@ import { defaultStyles } from '@/constants/defaultStyles';
 import { supabase } from '@/lib/supabase';
 import { router, Stack, useLocalSearchParams } from 'expo-router';
 import { 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 CreateTask() {
   const aId = (useLocalSearchParams().aId as string) ?? null;
+
   const [title, SetTitle] = useState('');
   const [description, SetDescription] = useState('');
   const [isCompleted, SetIsCompleted] = useState(false);
   const [isSaving, SetIsSaving] = useState(false);
 
   const CreateTask = async () => {
-    if(title.trim() === '') {
+    if (title.trim() === '') {
-      Alert.alert("Title is required!");
+      Alert.alert('Title is required!');
       return;
     }
-        
+
     const { data, error: userError } = await supabase.auth.getUser();
 
-    if(userError || !data.user) {
+    if (userError || !data.user) {
-      router.replace("../createUser");
+      router.replace('../createUser');
       return;
-    } 
+    }
 
     SetIsSaving(true);
 
-    const { error: dbError } = await supabase.from("tasks").insert({
+    const { error: dbError } = await supabase.from('tasks').insert({
-      title,
+      title: title.trim(),
-      description,
+      description: description.trim(),
       isCompleted,
       lastChanged: new Date().toISOString(),
       uId: data.user.id,
-      aId: aId,
+      aId,
     });
 
     if (dbError) {
-      Alert.alert("Task could not be created, please try again");
+      SetIsSaving(false);
+      Alert.alert('Task could not be created, please try again');
       return;
     }
 
-    Alert.alert("Task successfully created!");
+    Alert.alert('Task successfully created!');
 
     SetTitle('');
     SetDescription('');
     SetIsCompleted(false);
-
     SetIsSaving(false);
 
     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 (
     <>
       <Stack.Screen
         options={{
-          title: "Create Task",
+          title: 'Create Task',
-          headerTitleStyle: defaultStyles.title
+          headerTitleStyle: defaultStyles.title,
         }}
       />
 
-      <View style={defaultStyles.container}>
+      <KeyboardAvoidingView
-        <Text style={defaultStyles.title}>Create New Task</Text>
+        className="flex-1 bg-app-bg"
-        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      >
-            <View style={defaultStyles.container}>
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-              <TextInput
+          <ScrollView
-                style={defaultStyles.inputText}
+            className="flex-1"
-                placeholder="Enter title"
+            keyboardShouldPersistTaps="handled"
-                value={title}
+            contentContainerStyle={{
-                onChangeText={SetTitle}
+              flexGrow: 1,
-              />
+              justifyContent: 'center',
-              <TextInput
+              paddingHorizontal: 20,
-                style={defaultStyles.inputText}
+              paddingVertical: 32,
-                placeholder="Enter description"
+            }}
-                value={description}
+          >
-                onChangeText={SetDescription}
+            <View className="mb-6">
-              />
+              <Text className="text-3xl font-bold text-text-main">
+                Create Task
+              </Text>
+              <Text className="mt-2 text-base leading-6 text-text-secondary">
+                Add a small step to move this assignment forward.
+              </Text>
+            </View>
+
+            <View className="rounded-3xl border border-app-border bg-app-surface p-5 shadow-sm">
+              <View className="mb-5">
+                <Text className={labelClassName}>Title</Text>
+                <TextInput
+                  className={inputClassName}
+                  placeholder="Enter task title"
+                  value={title}
+                  onChangeText={SetTitle}
+                  returnKeyType="next"
+                />
+              </View>
+
+              <View className="mb-5">
+                <Text className={labelClassName}>Description</Text>
+                <TextInput
+                  className={`${inputClassName} min-h-28`}
+                  placeholder="Add a short description"
+                  value={description}
+                  onChangeText={SetDescription}
+                  multiline
+                  textAlignVertical="top"
+                />
+              </View>
 
               <Pressable
-                onPress={() => SetIsCompleted(state => !state)}
+                onPress={() => SetIsCompleted((state) => !state)}
-                style={defaultStyles.checkboxContainer}
+                disabled={isSaving}
+                className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
+                  isCompleted
+                    ? 'border-accent bg-accent-soft'
+                    : 'border-app-border bg-app-subtle'
+                }`}
               >
-                <View style={defaultStyles.checkbox}>
+                <View
-                  {isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                  className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                    isCompleted
+                      ? 'border-accent bg-accent'
+                      : 'border-app-border bg-app-surface'
+                  }`}
+                >
+                  {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 later.
+                  </Text>
                 </View>
-                <Text style={defaultStyles.checkboxLabel}>{isCompleted ? 'Completed' : 'Not completed'}</Text>
               </Pressable>
 
-              <Button title={isSaving ? "Saving..." : "Save"} onPress={CreateTask} disabled={isSaving} />
+              <Pressable
-              {isSaving && (
+                className={`h-14 items-center justify-center rounded-2xl ${
-                <ActivityIndicator size="large" />
+                  isSaving ? 'bg-accent-disabled' : 'bg-accent'
-              )}
+                }`}
-              <Button title="Cancel" onPress={() => router.back()} />
+                onPress={CreateTask}
-            </View>
+                disabled={isSaving}
-          </TouchableWithoutFeedback>
+              >
-        </KeyboardAvoidingView>
+                {isSaving ? (
-      </View>
+                  <View className="flex-row items-center">
-    </>
+                    <ActivityIndicator size="small" />
-  )
+                    <Text className="ml-3 text-base font-bold text-text-inverse">
-}
+                      Creating...
+                    </Text>
+                  </View>
+                ) : (
+                  <Text className="text-base font-bold text-text-inverse">
+                    Create Task
+                  </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>
+    </>
+  );
+}

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "study-sprint",
       "version": "1.0.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@expo/vector-icons": "^15.0.3",
         "@react-navigation/bottom-tabs": "^7.4.0",

tailwind.config.js

@@ -10,59 +10,60 @@ module.exports = {
     extend: {
       colors: {
         app: {
-          bg: "var(--color-bg)",
+          bg: '#F7F5EF',
-          surface: "var(--color-surface)",
+          surface: '#FFFFFF',
-          subtle: "var(--color-subtle)",
+          subtle: '#EFEBE3',
-          border: "var(--color-border)",
+          border: '#DDD6C8',
         },
 
         text: {
-          main: "var(--color-text-main)",
+          main: '#1F2933',
-          secondary: "var(--color-text-secondary)",
+          secondary: '#52616B',
-          muted: "var(--color-text-muted)",
+          muted: '#9AA6B2',
-          inverse: "var(--color-text-inverse)",
+          inverse: '#FFFFFF',
         },
 
         accent: {
-          DEFAULT: "var(--color-accent)",
+          DEFAULT: '#3B82A0',
-          soft: "var(--color-accent-soft)",
+          soft: '#DCEFF5',
-          hover: "var(--color-accent-hover)",
+          hover: '#2F6F88',
+          disabled: '#9CC7D6',
         },
 
         status: {
-          success: "var(--color-success)",
+          success: '#15803D',
-          warning: "var(--color-warning)",
+          warning: '#B7791F',
-          danger: "var(--color-danger)",
+          danger: '#B91C1C',
         },
 
         subject: {
           blue: {
-            bg: "var(--subject-blue-bg)",
+            bg: '#DCEFF5',
-            text: "var(--subject-blue-text)",
+            text: '#2F6F88',
           },
           emerald: {
-            bg: "var(--subject-emerald-bg)",
+            bg: '#DDEFE5',
-            text: "var(--subject-emerald-text)",
+            text: '#2F7D55',
           },
           amber: {
-            bg: "var(--subject-amber-bg)",
+            bg: '#F6E8C6',
-            text: "var(--subject-amber-text)",
+            text: '#9A6A16',
           },
           violet: {
-            bg: "var(--subject-violet-bg)",
+            bg: '#E9E2F5',
-            text: "var(--subject-violet-text)",
+            text: '#6D4BA3',
           },
           cyan: {
-            bg: "var(--subject-cyan-bg)",
+            bg: '#DDF0EF',
-            text: "var(--subject-cyan-text)",
+            text: '#287C7A',
           },
           rose: {
-            bg: "var(--subject-rose-bg)",
+            bg: '#F4E1DF',
-            text: "var(--subject-rose-text)",
+            text: '#9B4A43',
           },
           slate: {
-            bg: "var(--subject-slate-bg)",
+            bg: '#E8E4DA',
-            text: "var(--subject-slate-text)",
+            text: '#52616B',
           },
         },
       },