Addition of a toggleable dark mode.

Other UI cleanup and consistency.
2023-10-29 21:16:11 -04:00 · 2023-10-29 21:16:11 -04:00 · 7348bf3ee6
parent 77868b4f9b
commit 7348bf3ee6
5 changed files with 174 additions and 79 deletions
--- a/app/static/styles.css
+++ b/app/static/styles.css
@ -2,6 +2,48 @@ html {
  height: 100%;
 }

+body {
+  background-color: #f0f0f0;
+  line-height: 180%;
+  font-size: 110%;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Barlow', sans-serif;
+}
+
+.transition, .transition * {
+  transition-duration: 0.5s;
+  transition-property: color, border-color, background-color;
+}
+
+.theme-toggler {
+  cursor: pointer;
+}
+
+body.dark-mode {
+  color: #e7e7e7;
+  background: linear-gradient(to bottom right, #2e2e62, #1a1226);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+h1, h2 {
+  font-family: 'BarlowMedium', sans-serif;
+  text-align: center;
+  color: #111;
+}
+
+
+body.dark-mode h1 {
+  color: #e7e7e7;
+}
+
+body.dark-mode h2 {
+  color: #e7e7e7;
+}
+
 ::placeholder {
  color: #999;
 }
@ -37,26 +79,10 @@ h1:hover span.logo.right {
  background-color: white;
 }

-body {
-  background-color: #f0f0f0;
-  line-height: 180%;
-  font-size: 110%;
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  flex-direction: column;
-  font-family: 'Barlow', sans-serif;
-}
-
 strong {
  font-family: 'BarlowMedium', sans-serif;
 }

-h1, h2 {
-  font-family: 'BarlowMedium', sans-serif;
-  text-align: center;
-}
-
 h1 {
  user-select: none;
 }
@ -84,6 +110,10 @@ label {
  transition-timing-function: ease-out;
 }

+body.dark-mode label {
+  color: #eee;
+}
+
 label:hover {
  color: white;
  background-color: #222;
@ -93,12 +123,37 @@ input, textarea {
  font-family: 'Barlow', sans-serif;
 }

+body.dark-mode input {
+  color: #eee;
+  background-color: #000;
+  border: none;
+  padding: 8px;
+}
+
+body.dark-mode textarea {
+  color: #eee;
+  background-color: #000;
+  border: none;
+  padding: 12px;
+}
+
 select {
-  background-color: white;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
-  border-color: #ccc;
+  padding: 10px;
+}
+
+select, body.dark-mode select:hover {
+  background-color: white;
+  border-color: #8f8f9d;
+  color: black;
+}
+
+body.dark-mode select, select:hover {
+  background-color: black;
+  border-color: black;
+  color: #eee;
 }

 .letter-form {
@ -130,18 +185,19 @@ div.user form input, label {

 div.user form input {
  font-size: 120%;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #ddd;
-  padding: 0.3em;
 }

 .btn {
+  cursor: pointer;
  font-weight: bold;
  border-radius: 0;
  border-style: none;
 }

+input.btn {
+  padding: 0.8em 2em;
+}
+
 .color-fade {
  transition-property: color, background-color;
  transition-duration: 135ms;
@ -158,14 +214,20 @@ div.user form input {
  background-color: white;
 }

-.secondary {
+.secondary, body.dark-mode .secondary:hover {
  color: black;
  background-color: white;
+  border: 1px solid #8f8f9d;
 }

-.secondary:hover {
+.secondary a {
+  color: inherit;
+}
+
+.secondary:hover, body.dark-mode .secondary  {
  color: white;
  background-color: black;
+  border: 1px solid black;
 }

 .logged-in {
@ -269,6 +331,10 @@ textarea {
  transition-timing-function: ease-out;
 }

+body.dark-mode div.modal-content {
+  background-color: #111;
+}
+
 .modal-background {
  background: none;
 }
@ -306,6 +372,10 @@ textarea {
  color: #000;
 }

+body.dark-mode .text-button:hover {
+  color: #fff;
+}
+
 /* Small screens */
@media only screen and (max-width: 720px) {
  body {
@ -356,6 +426,7 @@ textarea {
  input, textarea {
    margin-bottom: 0.5em;
    font-size: 105%;
+    padding: 4px;
  }
  dd {
    margin-left: 0.5em;
@ -370,8 +441,6 @@ textarea {
    width: 50%;
  }
  div.user form input {
-    font-size: 110%;
-    padding: 0.5em;
    height: min-content;
  }
  .user {
--- a/app/templates/_formhelpers.jinja2
+++ b/app/templates/_formhelpers.jinja2
@ -51,7 +51,7 @@
          <input id="password" maxlength="32" minlength="4" name="password" type="password">
        </div>
        <div id="confirm-password-div">
-          <div style="font-size: 80%; margin-bottom: 1.5em;">Password must be between 8 and 64 characters</div>
+          <div style="margin-bottom: 1.5em;">Password must be between 8 and 64 characters</div>
          <label id='confirm-password-label' for="confirm-password">Confirm Password: </label>
          <input id="confirm-password" maxlength="32" minlength="4" name="confirm-password" type="password">
        </div>
--- a/app/templates/base.jinja2
+++ b/app/templates/base.jinja2
@ -3,50 +3,75 @@
 {% from "_formhelpers.jinja2" import modal %}

 <head>
-    <title>{% block title %}UnderCover{% endblock title %}</title>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
-    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" />
-    <meta name="description" content="UnderCover is an easy way to generate unique cover letters, making it simple to send personalized applications to many companies quickly.">
-    <meta name="viewport" content="user-scalable=no; width=device-width">
-    <script type="text/javascript">
-      function closeModal() {
-        document.getElementById('modal').classList.add('transparent')
-        document.body.classList.remove('scroll-lock')
+  <title>{% block title %}UnderCover{% endblock title %}</title>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
+  <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" />
+  <meta name="description" content="UnderCover is an easy way to generate unique cover letters, making it simple to send personalized applications to many companies quickly.">
+  <meta name="viewport" content="user-scalable=no; width=device-width">
+  <script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', () => {
+      const darkSystem = () => window.matchMedia('(prefers-color-scheme: dark)').matches
+      const lightStored = () => localStorage.getItem('dark-mode') === 'false'
+      const darkStored = () => localStorage.getItem('dark-mode') === 'true'
+      if (!lightStored() && (darkSystem() || darkStored())) {
+        document.body.classList.add('dark-mode')
      }
-      function showModal(login, text) {
-        document.getElementById('modal').classList.remove('transparent')
-        document.getElementById('modal-title').innerText = text
-        document.body.classList.add('scroll-lock')
-
-        const createAccountElements = [
-          'confirm-password',
-          'confirm-password-label',
-          'create-account-form-button'
-        ]
-        const loginElements = [
-          'log-in-form-button'
-        ]
-        const [visibleElements, hiddenElements] = login
-            ? [loginElements, createAccountElements]
-            : [createAccountElements, loginElements]
-
-        visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
-        hiddenElements.forEach(element => document.getElementById(element).classList.add('hidden'))
+      const togglers = document.getElementsByClassName('theme-toggler');
+      for (let i = 0; i < togglers.length; i++) {
+        togglers[i].addEventListener('click', () => {
+          document.body.classList.toggle('dark-mode')
+          const darkMode = document.body.classList.contains('dark-mode')
+          localStorage.setItem("dark-mode", darkMode)
+        })
      }
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Barlow';
-            font-display: swap;
-            src: url('/static/fonts/Barlow-Regular.ttf');
-        }
-        @font-face {
-            font-family: 'BarlowMedium';
-            font-display: swap;
-            src: url('/static/fonts/Barlow-Medium.ttf');
-        }
-    </style>
-    {% block head %}{{ head }}{% endblock head %}
+        setTimeout(() => document.body.classList.add('transition'), 600)
+    })
+    function toggleTheme() {
+      document.body.classList.toggle('dark-mode')
+    }
+    function closeModal() {
+      document.getElementById('modal').classList.add('transparent')
+      document.body.classList.remove('scroll-lock')
+    }
+    function showModal(login, text) {
+      document.getElementById('modal').classList.remove('transparent')
+      document.getElementById('modal-title').innerText = text
+      document.body.classList.add('scroll-lock')
+
+      const createAccountElements = [
+        'confirm-password',
+        'confirm-password-label',
+        'create-account-form-button'
+      ]
+      const loginElements = [
+        'log-in-form-button'
+      ]
+      const [visibleElements, hiddenElements] = login
+          ? [loginElements, createAccountElements]
+          : [createAccountElements, loginElements]
+
+      visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
+      hiddenElements.forEach(element => document.getElementById(element).classList.add('hidden'))
+    }
+  </script>
+  <style>
+    @font-face {
+      font-family: 'Barlow';
+      font-display: swap;
+      src: url('/static/fonts/Barlow-Regular.ttf');
+    }
+    @font-face {
+      font-family: 'BarlowMedium';
+      font-display: swap;
+      src: url('/static/fonts/Barlow-Medium.ttf');
+    }
+    @font-face {
+      font-family: 'BarlowBold';
+      font-display: swap;
+      src: url('/static/fonts/Barlow-Bold.ttf');
+    }
+  </style>
+  {% block head %}{{ head }}{% endblock head %}
 </head>

 <body>
@ -55,7 +80,7 @@
  <div class="user logged-in">
      <p style="margin: 0 1em 0 0;">{{ username }}</p>
      <form action="/logout">
-          <input class="btn primary color-fade" style="margin: 0; padding: 0.4em;" type="submit" value="Logout">
+        <input class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em;  margin: 0;" type="submit" value="Log Out"></input>
      </form>
  </div>
 {% else %}
@ -68,9 +93,9 @@
    </form>
  </div>
 {% endif %}
-<a href="/" style="text-decoration: none;">
-    <h1><span class="logo left">Under</span><span class="logo right">Cover</span></h1>
-</a>
+<!--<a href="/" style="text-decoration: none;">-->
+    <h1 title="Click to toggle dark mode" class="theme-toggler"><span class="logo left">Under</span><span class="logo right">Cover</span></h1>
+<!--</a>-->
 <h2>The secret cover letter generator</h2>
 {% if error %}
  <div class="errors">
--- a/app/templates/writing.jinja2
+++ b/app/templates/writing.jinja2
@ -49,11 +49,12 @@
                   onchange="window.location = '/?letter_name=' + this.options[this.value - 1].label"
               )
            }}
-            <a
-                href="/add_letter"
-                class="btn secondary color-fade"
-                style="padding-left: 0.75em; padding-right: 0.75em; text-decoration: none; margin-left: 0.5em; text-align: center;"
-            > + </a>
+            <div class="btn secondary color-fade" style="display: flex; justify-content: center; align-items: center; padding-left: 0.75em; padding-right: 0.75em; margin-left: 0.5em;">
+              <a
+                  href="/add_letter"
+                  style="text-decoration: none; margin: 0; padding: 0;"
+              > + </a>
+            </div>
          </div>
        </div>
      {% endif %}
--- a/2
+++ b/2
@ -2,7 +2,7 @@

 SCRIPT_DIR="$( cd "$( dirname "$0" )" && pwd )"

-source ./env
+source $SCRIPT_DIR/env

 if ! test -f "$SCRIPT_DIR/.undercover_init_successful"; then
    if ! "$SCRIPT_DIR/init"; then