Settings page isn't too ugly now

pgarrison · pgarrison · commit 06c28d15bd6b · 2023-12-30T21:21:53.000-08:00
diff --git a/src/settings-page/settings.css b/src/settings-page/settings.css
@@ -0,0 +1,19 @@
+.input-label {
+    font-size: small;
+    color: gray;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+input {
+    margin-top: 0.5ex;
+    margin-bottom: 1.5ex;
+}
+
+/* Transition borrowed from StackOverflow under CC BY-SA 4.0
+ * https://stackoverflow.com/a/20910008
+ */
+.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 2s, opacity 2s ease-in;
+}
diff --git a/src/settings-page/settings.html b/src/settings-page/settings.html
@@ -1,24 +1,27 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>My Test Extension Options</title>
+    <title>Time Card Autofill Options</title>
+    <link rel="stylesheet" type="text/css" href="settings.css" />
   </head>
   <body>
-    <div>
+    <div class="input-label">
       Project Code (e.g. 103-01-001-10)
-      <input id="project-code" type="text" style="width: 30em;">
     </div>
-    <div>
+    <input id="project-code" type="text" style="width: 30em;">
+    <div class="input-label">
       Task (e.g. Default)
-      <input id="task" type="text" style="width: 15em;">
     </div>
-    <div>
+    <input id="task" type="text" style="width: 15em;">
+    <div class="input-label">
       Expenditure Type (e.g. Regular - Straight Time)
-      <input id="expenditure-type" type="text" style="width: 15em;">
     </div>
+    <input id="expenditure-type" type="text" style="width: 15em;">
 
-    <div id="status"></div>
-    <button id="save">Save</button>
+    <div>
+      <button id="save">Save</button>
+      <span id="status"></span>
+    </div>
 
     <script src="settings.js"></script>
   </body>
diff --git a/src/settings-page/settings.js b/src/settings-page/settings.js
@@ -10,9 +10,7 @@ const saveOptions = () => {
             // Update status to let user know options were saved.
             const status = document.getElementById('status');
             status.textContent = 'Saved.';
-            setTimeout(() => {
-                status.textContent = '';
-            }, 750);
+            status.classList.add('hidden'); // "hidden" class has a fade out animation
         });
 };
     
diff --git a/webpack.config.js b/webpack.config.js
@@ -24,6 +24,7 @@ module.exports = {
             { from: 'src/manifest.json' },
             { from: 'src/icons', to: 'icons' },
             { from: 'src/settings-page/settings.html' },
+            { from: 'src/settings-page/settings.css' },
         ],
     }),
   ],
