Central Note Styling (darkMode needs work)

oss-slu · Aug 31, 2023 · 97c7668 · 97c7668
1 parent 6ab7f13
commit 97c7668
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 227 deletions.
diff --git a/lib/screens/AddNoteScreen.tsx b/lib/screens/AddNoteScreen.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState, useRef } from "react";
 import {
   Alert,
   View,
-  StyleSheet,
   TextInput,
   TouchableOpacity,
   Keyboard,
@@ -24,7 +23,7 @@ import {
   RichToolbar,
   actions,
 } from "react-native-pell-rich-editor";
-import Constants from "expo-constants";
+import { NotePageStyles } from "../../styles/pages/NoteStyles";
 
 const user = User.getInstance();
 
@@ -110,34 +109,34 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
 
   return (
     <View>
-      <View style={styles.topContainer}>
-        <TouchableOpacity style={styles.topButtons} onPress={saveNote}>
+      <View style={NotePageStyles.topContainer}>
+        <TouchableOpacity style={NotePageStyles.topButtons} onPress={saveNote}>
           <Ionicons name="arrow-back-outline" size={30} color="white" />
         </TouchableOpacity>
         <TextInput
-          style={styles.title}
+          style={NotePageStyles.title}
           placeholder="Title Field Note"
           onChangeText={(text) => setTitleText(text)}
           value={titleText}
         />
 
         {isPublished ? (
           <TouchableOpacity
-            style={styles.topButtons}
+            style={NotePageStyles.topButtons}
             onPress={() => setIsPublished(!isPublished)}
           >
             <Ionicons name="share" size={30} color="white" />
           </TouchableOpacity>
         ) : (
           <TouchableOpacity
-            style={styles.topButtons}
+            style={NotePageStyles.topButtons}
             onPress={() => setIsPublished(!isPublished)}
           >
             <Ionicons name="share-outline" size={30} color="white" />
           </TouchableOpacity>
         )}
       </View>
-      <View style={styles.keyContainer}>
+      <View style={NotePageStyles.keyContainer}>
         <TouchableOpacity
           onPress={() => {
             setViewMedia(!viewMedia);
@@ -222,7 +221,7 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
         iconTint={"#000"}
         selectedIconTint={"#2095F2"}
       />
-      <View style={styles.container}>
+      <View style={NotePageStyles.container}>
         <ScrollView
           nestedScrollEnabled={true}
           showsVerticalScrollIndicator={false}
@@ -297,7 +296,7 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
           >
             <RichEditor
               ref={(r) => (richTextRef.current = r)}
-              style={styles.input}
+              style={NotePageStyles.input}
               autoCorrect={true}
               placeholder="Write your note here"
               onChange={(text) => setBodyText(text)}
@@ -314,87 +313,4 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
   );
 };
 
-const styles = StyleSheet.create({
-  topContainer: {
-    justifyContent: "space-between",
-    paddingHorizontal: 5,
-    paddingTop: Constants.statusBarHeight,
-    flexDirection: "row",
-    backgroundColor: "#F4DFCD",
-    alignItems: "center",
-    textAlign: "center",
-  },
-  topText: {
-    flex: 1,
-    maxWidth: "100%",
-    fontWeight: "700",
-    fontSize: 32,
-    textAlign: "center",
-  },
-  topButtons: {
-    backgroundColor: "#111111",
-    borderRadius: 50,
-    width: 50,
-    height: 50,
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 99,
-  },
-  toggles: {
-    backgroundColor: "#111111",
-    borderRadius: 50,
-    width: 50,
-    height: 50,
-    alignItems: "center",
-    justifyContent: "center",
-    marginLeft: 10,
-    zIndex: 99,
-  },
-  container: {
-    backgroundColor: "white",
-    overflow: "hidden",
-  },
-  title: {
-    height: 45,
-    width: "70%",
-    borderColor: "#111111",
-    borderWidth: 1,
-    borderRadius: 30,
-    paddingHorizontal: 10,
-    textAlign: "center",
-    fontSize: 30,
-  },
-  input: {
-    flex: 1,
-    borderColor: "#111111",
-    fontSize: 22,
-  },
-  addButton: {
-    position: "absolute",
-    bottom: 20,
-    right: 20,
-    backgroundColor: "#111111",
-    borderRadius: 50,
-    width: 50,
-    height: 50,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  keyContainer: {
-    height: 60,
-    paddingVertical: 5,
-    width: "100%",
-    backgroundColor: "#F4DFCD",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 40,
-  },
-  saveText: {
-    color: "#111111",
-    fontWeight: "bold",
-    fontSize: 12,
-  },
-});
-
 export default AddNoteScreen;