From cfd73fc1063ef0f8e5b19982748a011821d53c52 Mon Sep 17 00:00:00 2001
From: Guy Davis <guy@guyware.nz>
Date: Sun, 3 Mar 2024 09:06:00 +1300
Subject: [PATCH] [guivis/KeepPolling#10] - 'improve' design of the app - 
 pointer cursor for clickables - spacings around items - hover colors and
 background colors - fix a couple of tests due to copy changes

---
 landing/templates/landing/landing.html  |  8 +++
 polls/templates/polls/poll_details.html | 30 +++++----
 polls/templates/polls/poll_entry.html   |  4 +-
 polls/templates/polls/poll_results.html | 20 +++---
 polls/templates/polls/polls.html        |  4 +-
 polls/tests.py                          |  6 +-
 static/css/fonts.css                    |  8 ++-
 static/css/landing.css                  | 87 +++++++++++++++++++++++++
 static/css/login.css                    | 27 ++++++++
 static/css/style.css                    | 28 ++++----
 static/css/styleguide.css               | 37 +++++++++++
 templates/base_template.html            | 33 +++++-----
 templates/registration/login.html       | 26 +++++---
 13 files changed, 246 insertions(+), 72 deletions(-)
 create mode 100644 static/css/landing.css
 create mode 100644 static/css/login.css
 create mode 100644 static/css/styleguide.css

diff --git a/landing/templates/landing/landing.html b/landing/templates/landing/landing.html
index 702acb9..18f1f90 100644
--- a/landing/templates/landing/landing.html
+++ b/landing/templates/landing/landing.html
@@ -1,5 +1,13 @@
 {% extends "base_template.html" %}
 
+{% load static %}
+
+{% block extra-head %}
+
+<link rel="stylesheet" href="{% static 'css/landing.css' %}"/>
+
+{% endblock %}
+
 {% block content %}
 
 <div hx-get="{% url 'polls' %}"
diff --git a/polls/templates/polls/poll_details.html b/polls/templates/polls/poll_details.html
index da30adf..a4f1ec0 100644
--- a/polls/templates/polls/poll_details.html
+++ b/polls/templates/polls/poll_details.html
@@ -1,18 +1,20 @@
-<div>
-    <div>
-        {{ poll.question }}
+<div class="h1 kanit-semibold">
+    {{ poll.question }}
+</div>
+<div class="h2 kanit-light-italic">
+    Select from one of the following options:
+</div>
+<div class="options-list">
+    {% for option in options %}
+    <div
+            hx-post="{% url 'cast-vote' poll.pk option.pk %}"
+            hx-target="#poll-details"
+    >
+        Option: {{ option.text }}
     </div>
+    {% empty %}
     <div>
-        Options!
-        {% for option in options %}
-        <div
-                hx-post="{% url 'cast-vote' poll.pk option.pk %}"
-                hx-target="#poll-details"
-        >
-            Option: {{ option.text }}
-        </div>
-        {% empty %}
         No options defined for Question!
-        {% endfor %}
     </div>
-</div>
\ No newline at end of file
+    {% endfor %}
+</div>
diff --git a/polls/templates/polls/poll_entry.html b/polls/templates/polls/poll_entry.html
index 7fa7452..9166bae 100644
--- a/polls/templates/polls/poll_entry.html
+++ b/polls/templates/polls/poll_entry.html
@@ -2,5 +2,7 @@
      hx-target="#poll-details"
      hx-get="{% url 'poll-details' poll.pk %}"
 >
-    {{ poll.question }}
+    <div class="h2 kanit-regular">
+        {{ poll.question }}
+    </div>
 </div>
diff --git a/polls/templates/polls/poll_results.html b/polls/templates/polls/poll_results.html
index aca6e1c..bd23e5b 100644
--- a/polls/templates/polls/poll_results.html
+++ b/polls/templates/polls/poll_results.html
@@ -1,15 +1,17 @@
+<div class="h1 kanit-semibold">
+    {{ poll.question }}
+</div>
+<div class="h2 kanit-light-italic">
+    Review the poll results below
+</div>
 <div>
+    {% for result in results %}
     <div>
-        {{ poll.question }}
+        {{ result.option.text }} - {{ result.count }}
     </div>
+    {% empty %}
     <div>
-        Results!
-        {% for result in results %}
-        <div>
-            {{ result.option.text }} - {{ result.count }}
-        </div>
-        {% empty %}
         No options defined for Question!
-        {% endfor %}
     </div>
-</div>
\ No newline at end of file
+    {% endfor %}
+</div>
diff --git a/polls/templates/polls/polls.html b/polls/templates/polls/polls.html
index 550e8d3..9c2403e 100644
--- a/polls/templates/polls/polls.html
+++ b/polls/templates/polls/polls.html
@@ -7,6 +7,8 @@
         {% endfor %}
     </div>
     <div id="poll-details">
-        Select a Poll on the Left
+        <div class="select-poll h1 kanit-medium-italic">
+            Select a Poll from the<br>list on the Left
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/polls/tests.py b/polls/tests.py
index b3b3e58..650ed10 100644
--- a/polls/tests.py
+++ b/polls/tests.py
@@ -58,7 +58,7 @@ class PollDetailsTests(
         )
         self.assertContains(
             response,
-            "Options!",
+            "Select from one of the following options:",
         )
         options = Option.objects.filter(
             poll=poll,
@@ -100,11 +100,11 @@ class PollDetailsTests(
         )
         self.assertNotContains(
             response,
-            "Options!",
+            "Select from one of the following options:",
         )
         self.assertContains(
             response,
-            "Results!",
+            "Review the poll results below",
         )
 
     def test_re_voting_doesnt_change_votes(
diff --git a/static/css/fonts.css b/static/css/fonts.css
index 0706cc1..dead8e4 100644
--- a/static/css/fonts.css
+++ b/static/css/fonts.css
@@ -1,7 +1,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 .h0 {
-    font-size: 48px;
+    font-size: 40px;
+}
+.h1 {
+    font-size: 32px;
+}
+.h2 {
+    font-size: 20px;
 }
 
 .kanit-thin {
diff --git a/static/css/landing.css b/static/css/landing.css
new file mode 100644
index 0000000..bd5b100
--- /dev/null
+++ b/static/css/landing.css
@@ -0,0 +1,87 @@
+.polls {
+    display: grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 1fr 1fr;
+    height: 100%;
+}
+
+.polls > div {
+    border-color: var(--accent-500);
+    border-right-width: 1px;
+    border-right-style: solid;
+    padding: 16px;
+    background-color: var(--neutral-200);
+}
+.polls > div:first-of-type {
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+}
+.polls > div:last-of-type {
+    border-top-right-radius: 16px;
+    border-bottom-right-radius: 16px;
+    border-right-style: none;
+}
+
+.polls-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.poll-entry {
+    min-height: 64px;
+    padding: 8px;
+    border-radius: 24px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--accent-500);
+    background-color: var(--primary-300);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.poll-entry:hover {
+    background-color: var(--accent-300);
+}
+
+#poll-details {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.select-poll {
+    padding: 128px;
+    align-self: center;
+    text-align: center;
+}
+
+.options-list {
+    display: flex;
+    flex-direction: column;
+    border-color: var(--accent-400);
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 16px;
+}
+.options-list > div {
+    border-color: var(--accent-400);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    padding: 32px;
+    background-color: var(--primary-300);
+    cursor: pointer;
+}
+.options-list > div:hover {
+    background-color: var(--accent-300);
+}
+.options-list > div:first-of-type {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+}
+.options-list > div:last-of-type {
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    border-bottom-style: none;
+}
\ No newline at end of file
diff --git a/static/css/login.css b/static/css/login.css
new file mode 100644
index 0000000..d3284a3
--- /dev/null
+++ b/static/css/login.css
@@ -0,0 +1,27 @@
+.login-form {
+    width: 380px;
+    border-radius: 16px;
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.login-button {
+    cursor: pointer;
+    display: inline-flex;
+    width: 160px;
+    height: 90px;
+    align-items: center;
+    justify-content: space-around;
+    padding: 15px;
+    background-color: var(--button-background);
+    border-radius: 12px;
+}
+.login-button:hover {
+    background-color: var(--button-background-hover);
+}
+
+.error {
+    color: var(--accent-400);
+}
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 3c7656a..de74fc4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -9,13 +9,16 @@ body {
     height: 100%;
 }
 body {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--neutral-200);
 }
 
 header {
     display: flex;
-    padding: 16px;
+    padding: 16px 32px;
+    align-items: center;
+    background-color: var(--neutral-100);
 }
 
 .title {
@@ -25,21 +28,18 @@ header {
 .content {
     flex-grow: 1;
     z-index: 2;
-    height: auto;
-    min-height: 400px;
     left: 0px;
     right: 0px;
-    background-color: rgb(225, 234, 214);
-    border-radius: 16px;
-    box-shadow: 0px 5px 50px #e5e0dd;
+    background-color: var(--primary-100);
+    border-radius: 32px;
+    box-shadow: 0px 5px 50px #e4e0dd;
     padding: 16px;
-    margin-bottom: 64px;
+    margin: 16px 16px;
     overflow-y: scroll;
 }
 
 footer {
     z-index: 3;
-    position: fixed;
     bottom: 0px;
     left: 0px;
     right: 0px;
@@ -47,11 +47,5 @@ footer {
     height: 64px;
     padding: 8px 16px;
     align-items: center;
-    background-color: rgb(250, 234, 234);
-}
-
-.polls {
-    display: grid;
-    grid-template-rows: 100%;
-    grid-template-columns: 1fr 1fr;
+    background-color: var(--neutral-100);
 }
diff --git a/static/css/styleguide.css b/static/css/styleguide.css
new file mode 100644
index 0000000..aa92217
--- /dev/null
+++ b/static/css/styleguide.css
@@ -0,0 +1,37 @@
+:root {
+    /* Primary: Hello Spring */
+    --primary-100: #F2FFF7;
+    --primary-200: #C8FEDA;
+    --primary-300: #9CFBB5;
+    --primary-400: #6EF189;
+    --primary-500: #40DE58;
+    --primary-600: #1FB02C;
+    --primary-700: #0F8213;
+    --primary-800: #0A5408;
+    --primary-900: #062603;
+
+    /* Accent: Méi Gūi Zǐ Purple */
+    --accent-100: #FFF2FA;
+    --accent-200: #FFC4EC;
+    --accent-300: #FC95E1;
+    --accent-400: #F565D7;
+    --accent-500: #E835CD;
+    --accent-600: #B815A9;
+    --accent-700: #870783;
+    --accent-800: #550357;
+    --accent-900: #230126;
+
+    /* Neutral */
+    --neutral-100: #FAFCFB;
+    --neutral-200: #EAEFEC;
+    --neutral-300: #DAE2DC;
+    --neutral-400: #CAD4CC;
+    --neutral-500: #BBC7BD;
+    --neutral-600: #949F95;
+    --neutral-700: #6D776E;
+    --neutral-800: #474E47;
+    --neutral-900: #232622;
+
+    --button-background: var(--primary-300);
+    --button-background-hover: var(--accent-300);
+}
diff --git a/templates/base_template.html b/templates/base_template.html
index 3a86c05..0ff6845 100644
--- a/templates/base_template.html
+++ b/templates/base_template.html
@@ -10,6 +10,7 @@
 
     <!-- Add additional CSS in static file -->
     {% load static %}
+    <link rel="stylesheet" href="{% static 'css/styleguide.css' %}"/>
     <link rel="stylesheet" href="{% static 'css/style.css' %}"/>
     <link rel="stylesheet" href="{% static 'css/fonts.css' %}"/>
 
@@ -28,24 +29,22 @@
         event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
     })
 </script>
-<div class="full-screen">
-    <header>
-        <div class="title h0 kanit-semibold">
-            Keep Polling
-        </div>
-        {% if user.is_authenticated %}
-        <form method="post" action="{% url 'logout' %}">
-            {% csrf_token %}
-            <button type="submit">Logout</button>
-        </form>
-        {% endif %}
-    </header>
-    <div class="content">
-        {% block content %}{% endblock %}
+<header>
+    <div class="title h0 kanit-semibold">
+        Keep Polling
     </div>
-    <footer>
-        Made by Guy Davis
-    </footer>
+    {% if user.is_authenticated %}
+    <form method="post" action="{% url 'logout' %}">
+        {% csrf_token %}
+        <button type="submit">Logout</button>
+    </form>
+    {% endif %}
+</header>
+<div class="content">
+    {% block content %}{% endblock %}
 </div>
+<footer>
+    Made by Guy Davis
+</footer>
 </body>
 </html>
diff --git a/templates/registration/login.html b/templates/registration/login.html
index ee0508a..a6b3030 100644
--- a/templates/registration/login.html
+++ b/templates/registration/login.html
@@ -1,19 +1,27 @@
 {% extends "base_template.html" %}
 
+{% load static %}
+
+{% block extra-head %}
+
+<link rel="stylesheet" href="{% static 'css/login.css' %}"/>
+
+{% endblock %}
+
 {% block content %}
 
-<div>Login</div>
+<div class="h0 kanit-semibold">Login</div>
 
 {% if form.errors %}
-<p>Your username and password didn't match. Please try again.</p>
+<p class="h2 kanit-light-italic error">Your username and password didn't match. Please try again.</p>
 {% endif %}
 
 {% if next %}
     {% if user.is_authenticated %}
-    <p>Your account doesn't have access to this page. To proceed,
+    <p class="h2 kanit-semibold">Your account doesn't have access to this page. To proceed,
     please login with an account that has access.</p>
     {% else %}
-    <p>Please login to see this page.</p>
+    <p class="h2 kanit-semibold">Please login to see this page.</p>
     {% endif %}
 {% endif %}
 
@@ -24,14 +32,14 @@
 >
 {% csrf_token %}
 <div>
-    <div>{{ form.username.label_tag }}</div>
-    <div>{{ form.username }}</div>
+    <div class="h2 kanit-regular">{{ form.username.label_tag }}</div>
+    <div class="h2 kanit-regular">{{ form.username }}</div>
 </div>
 <div>
-    <div>{{ form.password.label_tag }}</div>
-    <div>{{ form.password }}</div>
+    <div class="h2 kanit-regular">{{ form.password.label_tag }}</div>
+    <div class="h2 kanit-regular">{{ form.password }}</div>
 </div>
-<div class="login-button"
+<div class="login-button h1 kanit-regular"
      onclick="document.forms['login-form'].submit();"
 >
     Login