Polished up some UI and added dark/light mode

FastNotes/app/newNote.tsx

@@ -2,12 +2,13 @@ import
 { 
     StyleSheet, Text, View, KeyboardAvoidingView, 
     Platform, Pressable, TextInput, ScrollView
-} from "react-native";
-import { router, } from "expo-router";
-import { useNotes } from "@/src/notes/NotesContext";
-import { useState, useRef } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useHeaderHeight } from "@react-navigation/elements";
+} from "react-native"
+import { router, } from "expo-router"
+import { useNotes } from "@/src/notes/NotesContext"
+import { useState, useRef } from "react"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { useHeaderHeight } from "@react-navigation/elements"
+import { useAppTheme } from "@/src/theme/AppThemeProvider"
 
 
 
@@ -20,6 +21,7 @@ export default function NewNoteScreen()
     const [localErrorMessage, setLocalErrorMessage] = useState<string | null>(null)
     const insets = useSafeAreaInsets()
     const headerHeight = useHeaderHeight()
+    const { colorScheme, palette } = useAppTheme()
     const [contentHeight, setContentHeight] = useState(160)
     const scrollRef = useRef<ScrollView>(null)
 
@@ -43,22 +45,24 @@ export default function NewNoteScreen()
     }
 
     return (
-      <KeyboardAvoidingView style={{ flex: 1}} behavior={Platform.OS === "ios" ? "padding" : undefined}
+      <KeyboardAvoidingView
+      style={styles.keyboardAvoider}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
       keyboardVerticalOffset={headerHeight}>
-        <View style={styles.container}>
-            <ScrollView ref={scrollRef} contentContainerStyle={{ padding: 16, paddingBottom: 120, gap: 10}}
+        <View style={[styles.container, { backgroundColor: palette.background }]}>
+            <ScrollView ref={scrollRef} contentContainerStyle={[styles.formContent, { paddingBottom: insets.bottom + 112 }]}
             keyboardShouldPersistTaps="handled">
-                <Text style={styles.label}>Title</Text>
                 <TextInput value={title} onChangeText={setTitle}
-                placeholder="Give it a title..." style={styles.input}
+                placeholder="Give it a title..." style={[styles.titleInput, { color: palette.text, borderColor: palette.border, backgroundColor: palette.input }]}
+                placeholderTextColor={palette.mutedText}
                 returnKeyType="next"/>
 
-                <Text style={styles.label}>Content</Text>
                 <TextInput value={content} onChangeText={setContent} placeholder="Write your note..."
-                style={[styles.input, { height: Math.max(160, contentHeight) }]} multiline 
+                style={[styles.contentInput, { minHeight: Math.max(200, contentHeight), color: palette.text, borderColor: palette.border, backgroundColor: palette.input }]} multiline 
+                placeholderTextColor={palette.mutedText}
                 textAlignVertical="top"
-                onContentSizeChange={(e) => {setContentHeight(e.nativeEvent.contentSize.height); 
-                    scrollRef.current?.scrollToEnd({ animated: true });
+                onContentSizeChange={(e) => {setContentHeight(e.nativeEvent.contentSize.height) 
+                    scrollRef.current?.scrollToEnd({ animated: true })
                 }}/>
 
                 {localErrorMessage ? (
@@ -70,59 +74,60 @@ export default function NewNoteScreen()
                 ) : null}
 
             </ScrollView>
-            <View>
+            <View style={[styles.actions, { bottom: insets.bottom + 16 }]}>
                 <Pressable disabled={isSaving} onPress={onSave}
-                    style={[styles.saveFloating, { bottom: insets.bottom + 16 }]}>
-                    <Text style={styles.saveFloatingText}>
-                        {isSaving ? "Saving..." : "Save"}
+                    style={[styles.saveButton, { backgroundColor: palette.accent }]}>
+                    <Text style={[styles.saveFloatingText, { color: colorScheme === "dark" ? "#000" : "#fff" }]}>
+                        {isSaving ? "Saving..." : "Save note"}
                     </Text>
                 </Pressable>
             </View>
         </View>
       </KeyboardAvoidingView>
-    );
+    )
 }
 
 const styles = StyleSheet.create(
     { 
-        container: { flex: 1, gap: 10 },
-        label: { fontSize: 14, fontWeight: "600" },
-        input: 
+        keyboardAvoider: { flex: 1 },
+        container: { flex: 1 },
+        formContent: { padding: 16, gap: 12 },
+        titleInput:
         { 
-            borderWidth: 1, borderRadius: 7, 
-            padding: 12, fontSize: 16
+            borderWidth: 1,
+            borderRadius: 8,
+            padding: 12,
+            fontSize: 22,
+            fontWeight: "700",
         },
-        saveBtn:
+        contentInput:
         {
-            borderRadius: 12,
-            paddingVertical: 14, alignItems: "center",
-            backgroundColor: "grey"
+            borderWidth: 1,
+            borderRadius: 8,
+            padding: 12,
+            fontSize: 16,
         },
-        saveText: { color: "white", fontSize: 16, fontWeight: "700"},
-        saveBar: 
-        {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            bottom: 0,
-            paddingTop: 12,
-            paddingHorizontal: 16,
-            backgroundColor: "white",
-            borderTopWidth: 1
-        },
-        saveFloating: 
-        {
+        actions: {
             position: "absolute",
             left: 16,
             right: 16,
+            flexDirection: "row",
+            gap: 12,
+        },
+        saveButton: 
+        {
+            flex: 1,
             borderRadius: 12,
             paddingVertical: 14,
             alignItems: "center",
-            backgroundColor: "#111"
+            shadowColor: "#000",
+            shadowOpacity: 0.18,
+            shadowOffset: { width: 0, height: 8 },
+            shadowRadius: 16,
+            elevation: 8,
         },
         saveFloatingText: 
         {
-            color: "white",
             fontSize: 16,
             fontWeight: "700"
         },
@@ -130,4 +135,4 @@ const styles = StyleSheet.create(
             color: "#c62828"
         },
     }
-);
+)