From 89e9b520435da89b67928fb7471c920fa40c61b0 Mon Sep 17 00:00:00 2001
From: Chiara Oxender <46496608+coxender@users.noreply.github.com>
Date: Mon, 1 Jan 2024 20:32:44 -0500
Subject: [PATCH] feat: :poop: Add some UI spacing and color changes

add primary, secondary, tertiary colors.  add colors to header and buttons.  add spacing to main div, to description.  fix issues with header and main..
---
 index.html    | 100 ++++++++++++++++++++++++++++++++------------------
 src/main.ts   |   2 +-
 src/style.css |  22 ++++++++++-
 3 files changed, 86 insertions(+), 38 deletions(-)
diff --git a/index.html b/index.html
index ac14441..ca5f952 100644
--- a/index.html
+++ b/index.html
@@ -11,41 +11,69 @@
     <title>Task Aggregator</title>
   </head>
   <body>
-    <h1>Task Aggregator</h1>
-    <h2>Add Tasks</h2>
-    <form id="task-form">
-      <label>Date: <input name="date" type="date" /></label>
-      <label>
-        Duration: <input value="0" name="hours" type="number" min="0" step="1" required /> :
-        <input value="0" name="minutes" type="number" min="0" max="59" step="1" required />
-      </label>
-      <label>
-        Tags:
-        <select name="tagNames" id="tag-dropdown" size="5" multiple></select>
-      </label>
-      <br>
-      <br>
-      <label>
-        Description:
-        <br><textarea name="description" placeholder="Describe the task..." rows="5" cols="80"></textarea>
-      </label>
-      <button type="submit">Add task</button>
-    </form>
-    <h2>Created Tags</h2>
-    <form id="tag-form">
-      <div id="tags-list" class="list"></div>
-      <input placeholder="New tag" name="name" required />
-      <input type="color" name="color" required />
-      <button type="submit">Add Tag</button>
-      <p id="tag-submission-error-text"></p>
-    </form>
-    <h2>Past Tasks</h2>
-    <div id="tasks-list"></div>
-    <script type="module" src="/src/main.ts"></script>
-    <dialog id="startup-dialog">
-      <h1>Open File</h1>
-      <button id="open-button">Open File</button>
-      <button id="create-button">Create File</button>
-    </dialog>
+    <div class="header">
+      <h1>Task Aggregator</h1>
+    </div>
+    <div class="main">
+      <h2>Add Tasks</h2>
+      <form id="task-form">
+        <label>Date: <input name="date" type="date" /></label>
+        <label>
+          Duration:
+          <input
+            value="0"
+            name="hours"
+            type="number"
+            min="0"
+            step="1"
+            required
+          />
+          :
+          <input
+            value="0"
+            name="minutes"
+            type="number"
+            min="0"
+            max="59"
+            step="1"
+            required
+          />
+        </label>
+        <label>
+          Tags:
+          <select name="tagNames" id="tag-dropdown" size="5" multiple></select>
+        </label>
+        <br />
+        <br />
+        <label>
+          Description:
+          <br />
+          <textarea
+            name="description"
+            placeholder="Describe the task..."
+            rows="5"
+            cols="80"
+          ></textarea>
+        </label>
+        <br>
+        <button class="form-button" type="submit">Add Task</button>
+      </form>
+      <h2>Created Tags</h2>
+      <form id="tag-form">
+        <div id="tags-list" class="list"></div>
+        <input placeholder="New tag" name="name" required />
+        <input type="color" name="color" required />
+        <button class="form-button" type="submit">Add Tag</button>
+        <p id="tag-submission-error-text"></p>
+      </form>
+      <h2>Past Tasks</h2>
+      <div id="tasks-list"></div>
+      <script type="module" src="/src/main.ts"></script>
+      <dialog id="startup-dialog">
+        <h1>Open File</h1>
+        <button class="form-button" id="open-button">Open File</button>
+        <button class="form-button" id="create-button">Create File</button>
+      </dialog>
+    </div>
   </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index 06007ae..30c7c86 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -77,7 +77,7 @@ function updateTasks() {
             <path fill="currentColor" d="${mdiTrashCan}" />
           </svg>
         </button>
-        <span>${task.date}</span>
+        <span>${task.date} | </span>
         <span>${displayDuration(task.minutes)}</span>
         ${task.tagNames.map(
           (tagName) => html`<span style="--tag-color: ${tagColors[tagName]}" class="tag">${tagName}</span>`
diff --git a/src/style.css b/src/style.css
index 840c0cc..0481a5c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,9 +1,12 @@
 :root {
   color-scheme: dark light;
-  --secondary-color: rebeccapurple;
+  --primary-color: #061a40;
+  --secondary-color: #0353a4;
+  --tertiary-color: #b9d6f2;
 }
 
 body {
+  margin:0;
   font-size: 24px;
   font-family: Arial, Helvetica, sans-serif;
 }
@@ -15,6 +18,23 @@ button {
   padding: 0px;
   border-radius: 4px;
 }
+.header {
+  background-color: var(--primary-color);
+}
+.header > h1 {
+  margin:inherit;
+  padding: 12px;
+}
+
+.main {
+  padding: 0 24px
+}
+
+.form-button {
+  padding: 4px 8px;
+  background-color: var(--secondary-color);
+}
+
 .tag {
   display: inline-block;
   margin: 8px;
