added help button and improved dashboard styling to be in line with the rest of the project

app/(tabs)/index.tsx

@@ -1,4 +1,3 @@
-import { defaultStyles } from "@/constants/defaultStyles";
 import {
   GetActiveSprint,
   RemoveActiveSprint,
@@ -6,11 +5,20 @@ import {
 } from '@/lib/asyncStorage';
 import { formatDate } from '@/lib/date';
 import { RegisterForLocalNotificationsAsync } from '@/lib/notifications';
+import { CheckAssignmentCompletion } from '@/lib/progress';
 import { supabase } from "@/lib/supabase";
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import { Session } from '@supabase/supabase-js';
 import { router, Stack, useFocusEffect } from "expo-router";
 import { useCallback, useEffect, useState } from 'react';
-import { Button, Pressable, StyleSheet, Text, View } from "react-native";
+import {
+  Alert,
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+} from "react-native";
 
 type UpcomingDeadlineTask = {
   tId: string;
@@ -22,6 +30,29 @@ type UpcomingDeadlineTask = {
   deadline: string;
 };
 
+const FLOW_STEPS = [
+  {
+    label: '1',
+    title: 'Subject',
+    description: 'A subject is the top-level container for one course or area you are studying.',
+  },
+  {
+    label: '2',
+    title: 'Assignment',
+    description: 'Each subject contains assignments like projects, exercises, or exam prep blocks.',
+  },
+  {
+    label: '3',
+    title: 'Task',
+    description: 'Assignments are broken down into tasks so you always have one concrete thing to work on.',
+  },
+  {
+    label: '4',
+    title: 'Sprint',
+    description: 'A sprint is one focused work session tied to a single task and tracked by the timer.',
+  },
+] as const;
+
 function formatTime(totalSeconds: number) {
   const minutes = Math.floor(totalSeconds / 60);
   const seconds = totalSeconds % 60;
@@ -36,6 +67,8 @@ export default function HomeScreen() {
   const [activeSprintTaskDesc, setActiveSprintTaskDesc] = useState<string | null>(null);
   const [remainingSeconds, setRemainingSeconds] = useState(0);
   const [upcomingDeadlineTasks, setUpcomingDeadlineTasks] = useState<UpcomingDeadlineTask[]>([]);
+  const [isFlowInfoVisible, setIsFlowInfoVisible] = useState(false);
+  const [completingTaskId, setCompletingTaskId] = useState<string | null>(null);
 
   const loadActiveSprint = useCallback(async () => {
     const storedSprint = await GetActiveSprint();
@@ -221,37 +254,177 @@ export default function HomeScreen() {
     return () => clearInterval(intervalId);
   }, [activeSprint]);
 
+  const handleTaskCompletion = useCallback(async (task: UpcomingDeadlineTask) => {
+    if (completingTaskId) {
+      return;
+    }
+
+    setCompletingTaskId(task.tId);
+
+    const { error } = await supabase
+      .from('tasks')
+      .update({
+        isCompleted: true,
+        lastChanged: new Date().toISOString(),
+      })
+      .eq('tId', task.tId);
+
+    if (error) {
+      setCompletingTaskId(null);
+      Alert.alert('Task could not be completed, please try again');
+      return;
+    }
+
+    try {
+      await CheckAssignmentCompletion(task.aId);
+    } catch {
+      setCompletingTaskId(null);
+      Alert.alert('Task was updated, but assignment progress could not be refreshed');
+      return;
+    }
+
+    setUpcomingDeadlineTasks((currentTasks) =>
+      currentTasks.filter((currentTask) => currentTask.tId !== task.tId)
+    );
+    setCompletingTaskId(null);
+  }, [completingTaskId]);
+
   return (
-    <View style={defaultStyles.container}>
+    <View className="flex-1 bg-app-bg">
       <Stack.Screen
         options={{
-          title: "Home",
+          title: 'Dashboard',
           headerTitleAlign: 'center',
-          headerTitleStyle: defaultStyles.title,
+          headerLeft: () => {
+            return (
+              <View className="ml-3">
+                <Pressable
+                  className="h-10.5 w-11 items-center justify-center rounded-full"
+                  onPress={() => setIsFlowInfoVisible(true)}
+                >
+                  <MaterialIcons name="help" size={36} color="#52606D" />
+                </Pressable>
+              </View>
+            )
+          },
           headerRight: () => {
             return (
-              <View style={defaultStyles.buttonContainer}>
+              <View className="mr-3">
-                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
+                <Pressable
+                  className="rounded-full bg-app-subtle px-4 py-2"
+                  onPress={async () => await supabase.auth.signOut()}
+                >
+                  <Text className="text-sm font-semibold text-text-secondary">
+                    Logout
+                  </Text>
+                </Pressable>
               </View>
             )
           },
         }}
       />
 
-      <View style={defaultStyles.container}>
+      <View className="m-1 flex-1 p-6">
+        <Modal
+          animationType="fade"
+          transparent
+          visible={isFlowInfoVisible}
+          onRequestClose={() => setIsFlowInfoVisible(false)}
+        >
+          <View className="flex-1 justify-center bg-[rgba(15,23,42,0.42)] px-5">
+            <Pressable
+              className="absolute inset-0"
+              onPress={() => setIsFlowInfoVisible(false)}
+            />
+
+            <View className="max-h-[80%] gap-4 rounded-[28px] bg-[#FCFDFE] p-5 shadow-lg">
+              <View className="flex-row items-start justify-between gap-3">
+                <View>
+                  <Text className="text-xs font-bold uppercase tracking-[0.8px] text-[#7B8794]">
+                    How the app is structured
+                  </Text>
+                  <Text className="mt-1 text-[28px] font-extrabold text-[#1F2933]">
+                    Study flow
+                  </Text>
+                </View>
+
+                <Pressable
+                  className="h-9 w-9 items-center justify-center rounded-full bg-[#EFF3F8]"
+                  onPress={() => setIsFlowInfoVisible(false)}
+                >
+                  <MaterialIcons name="close" size={18} color="#52606D" />
+                </Pressable>
+              </View>
+
+              <Text className="text-[15px] leading-[22px] text-[#52606D]">
+                Build your work from the big container down to the focused work session.
+              </Text>
+
+              <ScrollView
+                className="max-h-80"
+                contentContainerStyle={{ gap: 4 }}
+                showsVerticalScrollIndicator={false}
+              >
+                {FLOW_STEPS.map((step, index) => (
+                  <View key={step.title} className="flex-row gap-[14px]">
+                    <View className="items-center">
+                      <View className="h-8 w-8 items-center justify-center rounded-full bg-[#323F4E]">
+                        <Text className="text-[13px] font-extrabold text-white">{step.label}</Text>
+                      </View>
+                      {index < FLOW_STEPS.length - 1 ? (
+                        <View className="my-[6px] min-h-7 w-[2px] flex-1 bg-[#D5D9DF]" />
+                      ) : null}
+                    </View>
+
+                    <View className="flex-1 pb-[18px]">
+                      <Text className="text-lg font-bold text-[#1F2933]">{step.title}</Text>
+                      <Text className="mt-1 text-sm leading-[21px] text-[#52606D]">
+                        {step.description}
+                      </Text>
+                    </View>
+                  </View>
+                ))}
+              </ScrollView>
+
+              <View className="rounded-[18px] bg-[#F1F5F9] px-4 py-[14px]">
+                <Text className="text-xs font-bold uppercase tracking-[0.8px] text-[#7B8794]">
+                  Quick map
+                </Text>
+                <Text className="mt-[6px] text-base font-bold text-[#1F2933]">
+                  {'Subject -> Assignment -> Task -> Sprint'}
+                </Text>
+              </View>
+
+              <Pressable
+                className="min-h-12 items-center justify-center rounded-2xl bg-[#323F4E] px-4"
+                onPress={() => {
+                  setIsFlowInfoVisible(false);
+                  router.push('/subjects');
+                }}
+              >
+                <Text className="text-[15px] font-bold text-white">Start with Subjects</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+
         {activeSprint ? (
-          <View style={styles.activeSprintCard}>
+          <View className="gap-2 rounded-2xl border border-[#D5D9DF] bg-[#F7F9FC] p-4">
-            <Text style={styles.cardEyebrow}>Active Sprint</Text>
+            <Text className="text-[13px] font-semibold text-[#5D6B7A]">Active Sprint</Text>
-            <Text style={styles.cardTitle}>
+            <Text className="text-[20px] font-bold text-[#1F2933]">
               {activeSprintTaskTitle ?? 'Selected task'}
             </Text>
-            <Text style={styles.cardDesc}> {activeSprintTaskDesc ?? null} </Text>
+            <Text className="text-sm font-medium text-[#38414b]">
-            <Text style={styles.cardMeta}>
+              {' '}
+              {activeSprintTaskDesc ?? null}
+              {' '}
+            </Text>
+            <Text className="text-[15px] text-[#52606D]">
               {formatTime(remainingSeconds)} remaining
             </Text>
 
             <Pressable
-              style={styles.resumeButton}
+              className="mt-2 min-h-11 items-center justify-center rounded-xl bg-[#323F4E] px-4"
               onPress={() =>
                 router.push({
                   pathname: '/task/timer',
@@ -259,21 +432,25 @@ export default function HomeScreen() {
                 })
               }
             >
-              <Text style={styles.resumeButtonText}>Open Sprint</Text>
+              <Text className="text-[15px] font-bold text-white">Open Sprint</Text>
             </Pressable>
           </View>
         ) : (
           <>
-            <Text style={defaultStyles.body}>No active sprint right now.</Text>
+            <Text className="mx-1 my-1 text-left text-base font-normal">
+              No active sprint right now.
+            </Text>
 
-            <View style={styles.deadlineSection}>
+            <View className="mt-6 gap-3">
-              <Text style={styles.sectionTitle}>Tasks with upcoming deadlines</Text>
+              <Text className="text-lg font-bold text-[#1F2933]">
+                Tasks with upcoming deadlines
+              </Text>
 
               {upcomingDeadlineTasks.length > 0 ? (
                 upcomingDeadlineTasks.map((task) => (
                   <Pressable
                     key={task.tId}
-                    style={styles.deadlineTaskCard}
+                    className="gap-[6px] rounded-2xl border border-[#D5D9DF] bg-white p-4"
                     onPress={() =>
                       router.push({
                         pathname: '/task/viewDetailsTask',
@@ -281,19 +458,49 @@ export default function HomeScreen() {
                       })
                     }
                   >
-                    <Text style={styles.deadlineTaskTitle}>{task.title}</Text>
+                    <Text className="text-base font-bold text-[#1F2933]">{task.title}</Text>
                     {task.description ? (
-                      <Text style={styles.deadlineTaskDescription} numberOfLines={2}>
+                      <Text className="text-sm text-[#52606D]" numberOfLines={2}>
                         {task.description}
                       </Text>
                     ) : null}
-                    <Text style={styles.deadlineTaskMeta}>
+                    <Text className="text-[13px] font-semibold text-[#7B8794]">
                       {task.subjectTitle} • {task.assignmentTitle} • {formatDate(task.deadline)}
                     </Text>
+
+                    <Pressable
+                      className={`mt-2 min-h-10 items-center justify-center rounded-xl px-4 ${
+                        completingTaskId === task.tId ? 'bg-[#9AA5B1]' : 'bg-[#323F4E]'
+                      }`}
+                      disabled={completingTaskId !== null}
+                      onPress={(event) => {
+                        event.stopPropagation();
+                        Alert.alert(
+                          'Complete task',
+                          'Mark this task as completed?',
+                          [
+                            {
+                              text: 'Cancel',
+                              style: 'cancel',
+                            },
+                            {
+                              text: 'Complete',
+                              onPress: () => {
+                                void handleTaskCompletion(task);
+                              },
+                            },
+                          ]
+                        );
+                      }}
+                    >
+                      <Text className="text-sm font-bold text-white">
+                        {completingTaskId === task.tId ? 'Completing...' : 'Mark as completed'}
+                      </Text>
+                    </Pressable>
                   </Pressable>
                 ))
               ) : (
-                <Text style={styles.emptyDeadlineText}>No upcoming task deadlines.</Text>
+                <Text className="text-sm text-[#7B8794]">No upcoming task deadlines.</Text>
               )}
             </View>
           </>
@@ -302,82 +509,3 @@ export default function HomeScreen() {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  activeSprintCard: {
-    borderWidth: 1,
-    borderColor: '#D5D9DF',
-    borderRadius: 16,
-    padding: 16,
-    backgroundColor: '#F7F9FC',
-    gap: 8,
-  },
-  cardEyebrow: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: '#5D6B7A',
-  },
-  cardTitle: {
-    fontSize: 20,
-    fontWeight: '700',
-    color: '#1F2933',
-  },
-  cardDesc: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#38414b',
-  },
-  cardMeta: {
-    fontSize: 15,
-    color: '#52606D',
-  },
-  resumeButton: {
-    marginTop: 8,
-    minHeight: 44,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#323F4E',
-    paddingHorizontal: 16,
-  },
-  resumeButtonText: {
-    fontSize: 15,
-    fontWeight: '700',
-    color: '#FFFFFF',
-  },
-  deadlineSection: {
-    marginTop: 24,
-    gap: 12,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#1F2933',
-  },
-  deadlineTaskCard: {
-    borderWidth: 1,
-    borderColor: '#D5D9DF',
-    borderRadius: 16,
-    padding: 16,
-    backgroundColor: '#FFFFFF',
-    gap: 6,
-  },
-  deadlineTaskTitle: {
-    fontSize: 16,
-    fontWeight: '700',
-    color: '#1F2933',
-  },
-  deadlineTaskDescription: {
-    fontSize: 14,
-    color: '#52606D',
-  },
-  deadlineTaskMeta: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: '#7B8794',
-  },
-  emptyDeadlineText: {
-    fontSize: 14,
-    color: '#7B8794',
-  },
-});

app/(tabs)/subjects.tsx

@@ -1,16 +1,41 @@
 import { SUBJECT_COLORS } from '@/lib/subjectColors';
 import { supabase } from '@/lib/supabase';
 import { Subject } from '@/lib/types';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import { Session } from '@supabase/supabase-js';
 import { router, Stack, useFocusEffect } from 'expo-router';
 import { useCallback, useEffect, useState } from 'react';
-import { Alert, Pressable, ScrollView, Text, View } from 'react-native';
+import { Alert, Modal, Pressable, ScrollView, Text, View } from 'react-native';
 
 import type { SubjectColor } from '@/lib/subjectColors';
 
+const FLOW_STEPS = [
+  {
+    label: '1',
+    title: 'Subject',
+    description: 'A subject is the top-level container for one course or area you are studying.',
+  },
+  {
+    label: '2',
+    title: 'Assignment',
+    description: 'Each subject contains assignments like projects, exercises, or exam prep blocks.',
+  },
+  {
+    label: '3',
+    title: 'Task',
+    description: 'Assignments are broken down into tasks so you always have one concrete thing to work on.',
+  },
+  {
+    label: '4',
+    title: 'Sprint',
+    description: 'A sprint is one focused work session tied to a single task and tracked by the timer.',
+  },
+] as const;
+
 export default function Subjects() {
   const [subjects, SetSubjects] = useState<Subject[]>([]);
   const [session, SetSession] = useState<Session | null>(null);
+  const [isFlowInfoVisible, setIsFlowInfoVisible] = useState(false);
 
   useEffect(() => {
     supabase.auth.getSession().then(({ data }) => {
@@ -57,19 +82,118 @@ export default function Subjects() {
         options={{
           title: 'Subjects',
           headerTitleAlign: 'center',
+          headerLeft: () => (
+            <View className="ml-3">
+              <Pressable
+                className="h-10.5 w-11 items-center justify-center rounded-full"
+                onPress={() => setIsFlowInfoVisible(true)}
+              >
+                <MaterialIcons name="help" size={36} color="#52606D" />
+              </Pressable>
+            </View>
+          ),
           headerRight: () => (
-            <Pressable
+            <View className="mr-3">
-              className="rounded-full bg-app-subtle px-4 py-2"
+              <Pressable
-              onPress={async () => await supabase.auth.signOut()}
+                className="rounded-full bg-app-subtle px-4 py-2"
-            >
+                onPress={async () => await supabase.auth.signOut()}
-              <Text className="text-sm font-semibold text-text-secondary">
+              >
-                Logout
+                <Text className="text-sm font-semibold text-text-secondary">
-              </Text>
+                  Logout
-            </Pressable>
+                </Text>
+              </Pressable>
+            </View>
           ),
         }}
       />
 
+      <Modal
+        animationType="fade"
+        transparent
+        visible={isFlowInfoVisible}
+        onRequestClose={() => setIsFlowInfoVisible(false)}
+      >
+        <View className="flex-1 justify-center bg-[rgba(15,23,42,0.42)] px-5">
+          <Pressable
+            className="absolute inset-0"
+            onPress={() => setIsFlowInfoVisible(false)}
+          />
+
+          <View className="max-h-[80%] gap-4 rounded-[28px] bg-[#FCFDFE] p-5 shadow-lg">
+            <View className="flex-row items-start justify-between gap-3">
+              <View>
+                <Text className="text-xs font-bold uppercase tracking-[0.8px] text-[#7B8794]">
+                  How the app is structured
+                </Text>
+                <Text className="mt-1 text-[28px] font-extrabold text-[#1F2933]">
+                  Study flow
+                </Text>
+              </View>
+
+              <Pressable
+                className="h-9 w-9 items-center justify-center rounded-full bg-[#EFF3F8]"
+                onPress={() => setIsFlowInfoVisible(false)}
+              >
+                <MaterialIcons name="close" size={18} color="#52606D" />
+              </Pressable>
+            </View>
+
+            <Text className="text-[15px] leading-[22px] text-[#52606D]">
+              Build your work from the big container down to the focused work session.
+            </Text>
+
+            <ScrollView
+              className="max-h-80"
+              contentContainerStyle={{ gap: 4 }}
+              showsVerticalScrollIndicator={false}
+            >
+              {FLOW_STEPS.map((step, index) => (
+                <View key={step.title} className="flex-row gap-[14px]">
+                  <View className="items-center">
+                    <View className="h-8 w-8 items-center justify-center rounded-full bg-[#323F4E]">
+                      <Text className="text-[13px] font-extrabold text-white">
+                        {step.label}
+                      </Text>
+                    </View>
+                    {index < FLOW_STEPS.length - 1 ? (
+                      <View className="my-[6px] min-h-7 w-[2px] flex-1 bg-[#D5D9DF]" />
+                    ) : null}
+                  </View>
+
+                  <View className="flex-1 pb-[18px]">
+                    <Text className="text-lg font-bold text-[#1F2933]">
+                      {step.title}
+                    </Text>
+                    <Text className="mt-1 text-sm leading-[21px] text-[#52606D]">
+                      {step.description}
+                    </Text>
+                  </View>
+                </View>
+              ))}
+            </ScrollView>
+
+            <View className="rounded-[18px] bg-[#F1F5F9] px-4 py-[14px]">
+              <Text className="text-xs font-bold uppercase tracking-[0.8px] text-[#7B8794]">
+                Quick map
+              </Text>
+              <Text className="mt-[6px] text-base font-bold text-[#1F2933]">
+                {'Subject -> Assignment -> Task -> Sprint'}
+              </Text>
+            </View>
+
+            <Pressable
+              className="min-h-12 items-center justify-center rounded-2xl bg-[#323F4E] px-4"
+              onPress={() => {
+                setIsFlowInfoVisible(false);
+                router.push('/subjects');
+              }}
+            >
+              <Text className="text-[15px] font-bold text-white">Start with Subjects</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+
       <ScrollView
         className="flex-1"
         contentContainerStyle={{