feat: 💩 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..
coxender · Jan 2, 2024 · 89e9b52 · 89e9b52
1 parent 508a53e
commit 89e9b52
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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;