Polished pages and components

src/Components/Note/Header/Header.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import styles from "../../../styles";
+
+export default function Header() {
+  return (
+    <div style={styles.header}>
+      <p style={styles.text_medium}>React - A Notes Demo</p>
+    </div>
+  );
+}

src/Components/Note/Note.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import styles from "../../styles";
+import { Button } from "@mui/material";
+
+export interface props {
+  title: string;
+  content: string;
+}
+export default function Note(props: props) {
+  return (
+    <div style={styles.flex_column}>
+      <div style={styles.note}>
+        <p style={styles.text_medium}>{props.title}</p>
+        <div style={styles.note_content}>
+          <p style={styles.text_small}>{props.content}</p>
+        </div>
+        <Button
+          style={styles.button_remove}
+          variant="contained"
+          onClick={() => {
+            console.log("foo");
+          }}
+        >
+          Remove Note
+        </Button>
+      </div>
+    </div>
+  );
+}

src/Routes/Home/Home.tsx

@@ -1,22 +1,21 @@
 import styles from "../../styles";
 import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
+import Note from "../../Components/Note/Note";
+import Header from "../../Components/Note/Header/Header";
 
 export default function Home() {
   const navigate = useNavigate();
+  const notes_sample = [
+    { title: "note1", content: "notes are great!" },
+    { title: "note2", content: "notes are awesome!" },
+  ];
   return (
     <div style={styles.background}>
-      <div style={{ ...styles.header, ...{ height: "8vh" } }}>
-        <p style={styles.text_medium}>React - A Notes Demo</p>
-      </div>
-      <div style={styles.flex_column}>
-        <div style={styles.note}>
-          <p style={styles.text_medium}>Note Title</p>
-          <div style={styles.note_content}>
-            <p style={styles.text_small}>Notes Content</p>
-          </div>
-        </div>
-      </div>
+      <Header />
+      {notes_sample.map((note) => (
+        <Note title={note.title} content={note.content} />
+      ))}
       <div style={styles.flex_row}>
         <Button
           style={styles.button_add}

src/Routes/NewNote/NewNote.tsx

@@ -1,22 +1,31 @@
 import styles from "../../styles";
 import { Button } from "@mui/material";
-import TextField from "@mui/material/TextField";
 import { useNavigate } from "react-router-dom";
+import Header from "../../Components/Note/Header/Header";
 
 export default function NewNote() {
   const navigate = useNavigate();
   return (
     <div style={styles.background}>
-      <div style={{ ...styles.header, ...{ height: "8vh" } }}>
-        <p style={styles.text_medium}>React - A Notes Demo</p>
-      </div>
+      <Header />
       <p style={styles.text_medium}>New Note</p>
       <div style={styles.flex_column}>
         <div style={styles.note}>
-          <p style={styles.text_medium}>Note Title</p>
+          <input style={styles.input_notetitle} maxLength={20} />
           <div style={styles.note_content}>
-            <p style={styles.text_small}>Notes Content</p>
+            <p style={styles.text_small}>Content</p>
+            <textarea style={styles.input_notebody} />
           </div>
+          <Button
+            style={styles.button_add}
+            variant="contained"
+            onClick={() => {
+              console.log("foo");
+              navigate("/");
+            }}
+          >
+            Add Note
+          </Button>
         </div>
       </div>
       <div style={styles.flex_row}>

src/styles.tsx

@@ -2,8 +2,9 @@ const styles: { [key: string]: React.CSSProperties } = {
   background: {
     display: "flex",
     flexDirection: "column",
-    height: "100vh",
     backgroundColor: "#002d4c",
+    minHeight: "100vh",
+    paddingBottom: 128,
   },
   header: {
     display: "flex",
@@ -12,6 +13,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     position: "sticky",
     backgroundColor: "#0087e4",
     margin: "2vh",
+    height: "8vh",
     padding: 8,
     borderRadius: 4,
   },
@@ -24,7 +26,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     margin: "2vh",
     width: "50%",
     alignSelf: "center",
-    padding: 8,
+    padding: 32,
     borderRadius: 32,
   },
   note_content: {
@@ -40,19 +42,43 @@ const styles: { [key: string]: React.CSSProperties } = {
     paddingTop: 64,
     borderRadius: 4,
   },
+  input_notetitle: {
+    alignSelf: "center",
+    backgroundColor: "#004264",
+    borderRadius: 4,
+    border: "none",
+    outline: "none",
+    color: "white",
+    height: "3vh",
+    fontSize: "2vh",
+    fontWeight: "bold",
+  },
+  input_notebody: {
+    alignSelf: "center",
+    backgroundColor: "#00293e",
+    maxWidth: "100%",
+    borderRadius: 4,
+    border: "none",
+    outline: "none",
+    color: "white",
+    width: "90%",
+    height: "20vh",
+    fontSize: "2vh",
+    fontWeight: "bold",
+  },
   button_add: {
     backgroundColor: "#0dbc6a",
     alignSelf: "center",
     display: "flex",
     flexDirection: "row",
-    width: "128px",
+    width: "256x",
   },
   button_remove: {
     backgroundColor: "#bc231e",
     alignSelf: "center",
     display: "flex",
     flexDirection: "row",
-    width: "128px",
+    width: "256px",
   },
   text_small: {
     color: "white",