[frontend] chore: css tweak

frontend/src/App.css

@@ -3,7 +3,7 @@ body {
 }
 
 body {
-  margin: 20px;
+  margin: 0px;
   background-color: white;
 }
 
@@ -37,7 +37,7 @@ body {
   width: 400px;
   min-height: 250px;
   align-items: center;
-  margin: 10px;
+  margin-bottom: 10px;
   justify-content: space-between;
   height: 100%;
 }
@@ -59,8 +59,9 @@ h2 {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 100%;
+  width: 100vw;
   margin-bottom: 20px;
+  background-color: lightgrey;
 }
 
 .note-form {
@@ -105,7 +106,7 @@ textarea {
 
 .notes-header button{
   border-radius: 5px;
-  background-color: coral;
+  background-color: crimson;
   border: none;
   padding: 8px;
   font-size: 10px;

frontend/src/App.tsx

@@ -84,14 +84,14 @@ function App() {
     <div className="app-container">
       <header className="app-header">
         <img className="app-logo" src="notes.png" alt="note icon" />
-        <Button
+      </header>
+      <Button
           className="add-note-button"
           type="primary"
           onClick={() => setIsModalVisible(true)}
         >
           Add a note
         </Button>
-      </header>
       {connectionIssue && (
         <h3 className="connection-warning">Warning: API Connection Issue</h3>
       )}