From e2cb4b220d4d62a7037a594e29cddbec750c54a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=AD=C3=B0ir=20Valberg=20Gu=C3=B0mundsson?=
 <valberg@orn.li>
Date: Wed, 22 Jan 2025 21:26:06 +0000
Subject: [PATCH] Fix CSS stuff (#61)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Halfdan Mouritzen <halfdan@robothangarskib.dk>
Co-authored-by: halfd <halfd@noreply@git.data.coop>
Reviewed-on: https://git.data.coop/data.coop/membersystem/pulls/61
Co-authored-by: Víðir Valberg Guðmundsson <valberg@orn.li>
Co-committed-by: Víðir Valberg Guðmundsson <valberg@orn.li>
---
 src/project/static/css/dark-style.css         |   5 +
 src/project/static/css/style.css              |  29 +++-
 src/project/templates/account/email.html      |   7 +-
 src/project/templates/account/login.html      |   7 +-
 .../templates/account/password_reset.html     |  75 +++++----
 .../account/password_reset_done.html          |  29 +++-
 src/project/templates/account/signup.html     | 146 ++++++++++--------
 7 files changed, 176 insertions(+), 122 deletions(-)

diff --git a/src/project/static/css/dark-style.css b/src/project/static/css/dark-style.css
index ebafa9b..da95fbd 100644
--- a/src/project/static/css/dark-style.css
+++ b/src/project/static/css/dark-style.css
@@ -65,3 +65,8 @@ html.dark input[type="email"] {
   width: 100%;
   color: var(--light-dust);
 }
+
+html.dark div.services>div,
+html.dark div.infobox {
+  background: var(--dark);
+}
\ No newline at end of file
diff --git a/src/project/static/css/style.css b/src/project/static/css/style.css
index d845d2c..769f07e 100644
--- a/src/project/static/css/style.css
+++ b/src/project/static/css/style.css
@@ -51,7 +51,6 @@ h6 {
   --light-dust: #fefef9;
   --dust: #f4f1ef;
   --medium-dust: #dadada;
-  --medium-dust : #dadada;
   --dark-dust: #bfbfbf;
   --fade: #878787;
   --twilight: #4a4a4a;
@@ -72,16 +71,24 @@ h6 {
   --outer-space: var(--double-space);
 }
 
+/* Media queries */
 @media (min-width: 1380px) {
   :root {
     --outer-space: 15%;
   }
 }
 
+@media (max-width: 720px) {
+  body header h1 {
+    font-size: 1em;
+  }
+}
+
 html,
 body {
   height: 100%;
-  font-size: 1.05em;
+  /* font-size: 1.05em; */
+  font-size: 16px;
 }
 
 h1,
@@ -375,6 +382,12 @@ article table#user_email_table tbody tr td:first-child {
   text-align: center;
 }
 
+article table tbody td input[type="radio"] {
+  width: var(--double-space);
+  height: var(--double-space);
+  vertical-align: middle;
+}
+
 form>div {
   margin: 0 0 var(--double-space);
 }
@@ -386,9 +399,9 @@ form>div>label {
 
 form>div>input[type="text"],
 form>div>input[type="password"],
-input[type="email"] {
+form>div>input[type="email"] {
   border: 2px solid var(--twilight);
-  border-radius: 6px;
+  border-radius: var(--quarter-space);
   padding: 8px;
   background: var(--light-dust);
   width: 100%;
@@ -423,7 +436,7 @@ form div.buttonHolder button {
   padding: var(--double-space);
 }
 
-#email-add-overlay .content-view p {
+#email-add-overlay .panel-body div {
   margin: var(--double-space) 0;
 }
 
@@ -505,7 +518,9 @@ footer {
   opacity: 0.8;
 }
 
-footer a, footer a:visited, footer a:active {
+footer a,
+footer a:visited,
+footer a:active {
   color: var(--dust);
   text-decoration: underline;
 }
@@ -562,4 +577,4 @@ span.time_remaining {
 
 .pagination .page-item.disabled .page-link {
   cursor: default;
-}
+}
\ No newline at end of file
diff --git a/src/project/templates/account/email.html b/src/project/templates/account/email.html
index 7900a34..0b33a71 100644
--- a/src/project/templates/account/email.html
+++ b/src/project/templates/account/email.html
@@ -81,14 +81,13 @@
         <div class="content-view">
             <h3>{% trans "Add E-mail" %}</h3>
             <div class="panel-body">
-                <form method="post" action="{% url 'account_email' %}"
-                      class="add_email">
+                <form method="post" action="{% url 'account_email' %}" class="add_email">
                     {% csrf_token %}
-                    {{ form.as_p }}
+                    {{ form.as_div }}
                     <button name="action_add" style="float:right" type="submit">
                         {% trans "Add E-mail" %}
                     </button>
-                    <button id="overlay-close-button" class="secondary">Cancel</button>
+                    <button id="overlay-close-button" class="secondary">{% trans "Cancel" %}</button>
                 </form>
             </div>
         </div>
diff --git a/src/project/templates/account/login.html b/src/project/templates/account/login.html
index 523d32b..60aa982 100644
--- a/src/project/templates/account/login.html
+++ b/src/project/templates/account/login.html
@@ -3,7 +3,6 @@
 {% load static %}
 
 {% block non_login_content %}
-
     <div id="loginbox">
         <div class="login">
             {% if form.non_field_errors %}
@@ -13,7 +12,7 @@
                     </div>
                 {% endfor %}
             {% endif %}
-            <h2>Login</h2>
+            <h2>{% trans "Login "%}</h2>
 
             <form method="post" action="">
                 {% csrf_token %}
@@ -46,8 +45,7 @@
                 </div>
             </form>
             <div>
-                <a href="{% url "account_reset_password" %}"
-                   class="w-100 btn btn-lg btn-outline-info">
+                <a href="{% url "account_reset_password" %}">
                     {% trans "Forgot password?" %}
                 </a>
             </div>
@@ -60,5 +58,4 @@
             </div>
         </div>
     </div>
-
 {% endblock %}
diff --git a/src/project/templates/account/password_reset.html b/src/project/templates/account/password_reset.html
index ce8be80..138c6de 100644
--- a/src/project/templates/account/password_reset.html
+++ b/src/project/templates/account/password_reset.html
@@ -6,44 +6,51 @@
 {% block head_title %}{% trans "Password Reset" %}{% endblock %}
 
 {% block non_login_content %}
+    <div id="loginbox">
+        <div class="login">
+            <h2>{% trans "Password Reset" %}</h1>
 
-    <h1 class="h3 mb-3 fw-normal">{% trans "Password Reset" %}</h1>
+            {% if user.is_authenticated %}
+            {% include "account/snippets/already_logged_in.html" %}
+            {% endif %}
 
-    {% if user.is_authenticated %}
-    {% include "account/snippets/already_logged_in.html" %}
-    {% endif %}
+            <p>{% trans "Enter your e-mail address below, and we'll send you an e-mail allowing you to reset your password." %}</p>
 
-    <p>{% trans "Forgotten your password? Enter your e-mail address below, and we'll send you an e-mail allowing you to reset it." %}</p>
-
-    <form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">
-        {% csrf_token %}
-        <label for="id_email" class="visually-hidden">
-            {% trans "E-mail address" %}
-        </label>
-        <input type="email"
-               id="id_email"
-               name="email"
-               class="form-control mb-lg-2 {% if form.email.errors %}is-invalid{% elif form.is_bound %}is-valid{% endif %}"
-               placeholder="{% trans "E-mail address" %}"
-               required>
-        {% if form.email.errors %}
-            {% for error in form.email.errors %}
-                <div class="invalid-feedback mb-lg-2">
-                    {{ error }}
+            <form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">
+                {% csrf_token %}
+                <div>
+                    <label for="id_email" class="visually-hidden">
+                        {% trans "E-mail" %}
+                    </label>
+                    <input type="email"
+                           id="id_email"
+                           name="email"
+                           class="form-control mb-lg-2 {% if form.email.errors %}is-invalid{% elif form.is_bound %}is-valid{% endif %}"
+                           placeholder="{% trans "E-mail" %}"
+                           required>
+                    {% if form.email.errors %}
+                        {% for error in form.email.errors %}
+                            <div class="invalid-feedback mb-lg-2">
+                                {{ error }}
+                            </div>
+                        {% endfor %}
+                    {% endif %}
                 </div>
-            {% endfor %}
-        {% endif %}
+                <button type="submit">{% trans 'Reset My Password' %}</button>
+            </form>
 
-        <input class="w-100 btn btn-lg btn-primary"
-               type="submit" value="{% trans 'Reset My Password' %}" />
-    </form>
+            <p><small>{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}</small></p>
 
-    <p>{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}</p>
-
-    <hr>
-    <a class="w-100"
-       type="submit"
-       href="{% url "account_login" %}">
-        {% trans "To login" %}
-    </a>
+            <a href="{% url "account_login" %}">
+                {% trans "To login" %}
+            </a>
+        </div>
+        <div class="signup">
+            <img src="https://data.coop/static/img/logo_da.svg" alt="data.coop logo">
+            <div class="new_here">
+                <h2>{% trans "Are you new here?" %}</h2>
+                <a class="button" href="{% url "account_signup" %}">{% trans "Become a member" %}</a>
+            </div>
+        </div>
+    </div>
 {% endblock %}
diff --git a/src/project/templates/account/password_reset_done.html b/src/project/templates/account/password_reset_done.html
index 6a9ac20..2e1be72 100644
--- a/src/project/templates/account/password_reset_done.html
+++ b/src/project/templates/account/password_reset_done.html
@@ -6,11 +6,30 @@
 {% block head_title %}{% trans "Password Reset" %}{% endblock %}
 
 {% block non_login_content %}
-    <h1>{% trans "Password Reset" %}</h1>
+    <div id="loginbox">
+        <div class="login">
+            <div>
+            <h2>{% trans "Password Reset" %}</h2>
 
-    {% if user.is_authenticated %}
-    {% include "account/snippets/already_logged_in.html" %}
-    {% endif %}
+            <hr />
+            {% if user.is_authenticated %}
+            {% include "account/snippets/already_logged_in.html" %}
+            {% endif %}
 
-    <p>{% blocktrans %}We have sent you an e-mail. Please contact us if you do not receive it within a few minutes.{% endblocktrans %}</p>
+            <p>{% blocktrans %}We have sent you an e-mail. Please contact us if you do not receive it within a few minutes.{% endblocktrans %}</p>
+            </div>
+            <a class="w-100"
+               type="submit"
+               href="{% url "account_login" %}">
+                {% trans "To login" %}
+            </a>
+        </div>
+        <div class="signup">
+            <img src="https://data.coop/static/img/logo_da.svg" alt="data.coop logo">
+            <div class="new_here">
+                <h2>{% trans "Are you new here?" %}</h2>
+                <a class="button" href="{% url "account_signup" %}">{% trans "Become a member" %}</a>
+            </div>
+        </div>
+    </div>
 {% endblock %}
diff --git a/src/project/templates/account/signup.html b/src/project/templates/account/signup.html
index 27eb870..554190d 100644
--- a/src/project/templates/account/signup.html
+++ b/src/project/templates/account/signup.html
@@ -3,73 +3,85 @@
 {% load static %}
 
 {% block non_login_content %}
-    <h1 class="h3 mb-3 fw-normal">{% trans "Become a member" %}</h1>
+    <div id="loginbox">
+        <div class="login">
+            <h2>{% trans "Become a member" %}</h2>
 
-    {% if form.non_field_errors %}
-        {% for error in form.non_field_errors %}
-            <div class="alert alert-danger" role="alert">
-                {{ error }}
+            {% if form.non_field_errors %}
+                {% for error in form.non_field_errors %}
+                    <div class="alert alert-danger" role="alert">
+                        {{ error }}
+                    </div>
+                {% endfor %}
+            {% endif %}
+
+            {{ form.email.errors }}
+            {{ form.password1.errors }}
+
+            <p>{% trans "To become a member, you need to have an account. Create one here." %}</p>
+
+            <form method="post" action="">
+                {% csrf_token %}
+
+                <div>
+                    <label for="id_email"
+                           class="visually-hidden">
+                        {% trans "E-mail" %}
+                    </label>
+                    <input type="email"
+                           id="id_email"
+                           name="email"
+                           class="form-control mb-lg-2 {% if form.email.errors %}is-invalid{% elif form.is_bound %}is-valid{% endif %}"
+                           placeholder="{% trans "E-mail" %}"
+                           required
+                           autofocus>
+                    {% if form.email.errors %}
+                        {% for error in form.email.errors %}
+                            <div class="invalid-feedback">
+                                {{ error }}
+                            </div>
+                        {% endfor %}
+                    {% endif %}
+                </div>
+
+                <div>
+                    <label for="id_password" class="visually-hidden">
+                        {% trans "Password" %}
+                    </label>
+                    <input type="password"
+                           id="id_password"
+                           name="password1"
+                           class="form-control mb-lg-2 {% if form.password1.errors %}is-invalid{% elif form.is_bound %}is-valid{% endif %}"
+                           placeholder="{% trans "Password" %}"
+                           required>
+                    {% if form.password1.errors %}
+                        {% for error in form.password1.errors %}
+                            <div class="invalid-feedback">
+                                {{ error }}
+                            </div>
+                        {% endfor %}
+                    {% endif %}
+                </div>
+
+                {% if redirect_field_value %}
+                    <input type="hidden" name="{{ redirect_field_name }}"
+                           value="{{ redirect_field_value }}"/>
+                {% endif %}
+
+                <button type="submit">{% trans "Sign up" %}</button>
+            </form>
+            <div>
+                <a href="{% url "account_login" %}">
+                    {% trans "To login" %}
+                </a>
             </div>
-        {% endfor %}
-    {% endif %}
-
-    {{ form.email.errors }}
-    {{ form.password1.errors }}
-
-    <p>{% trans "To become a member, you need to have an account. Create one here." %}</p>
-
-    <form method="post" action="">
-        {% csrf_token %}
-
-        <label for="id_email"
-               class="visually-hidden">
-            {% trans "E-mail" %}
-        </label>
-        <input type="email"
-               id="id_email"
-               name="email"
-               class="form-control mb-lg-2 {% if form.email.errors %}is-invalid{% elif form.is_bound %}is-valid{% endif %}"
-               placeholder="{% trans "E-mail" %}"
-               required
-               autofocus>
-        {% if form.email.errors %}
-            {% for error in form.email.errors %}
-                <div class="invalid-feedback">
-                    {{ error }}
-                </div>
-            {% endfor %}
-        {% endif %}
-
-        <label for="id_password" class="visually-hidden">
-            {% trans "Password" %}
-        </label>
-        <input type="password"
-               id="id_password"
-               name="password1"
-               class="form-control mb-lg-2 {% if form.password1.errors %}is-invalid{% elif form.is_bound %}is-valid{% endif %}"
-               placeholder="{% trans "Password" %}"
-               required>
-        {% if form.password1.errors %}
-            {% for error in form.password1.errors %}
-                <div class="invalid-feedback">
-                    {{ error }}
-                </div>
-            {% endfor %}
-        {% endif %}
-
-        {% if redirect_field_value %}
-            <input type="hidden" name="{{ redirect_field_name }}"
-                   value="{{ redirect_field_value }}"/>
-        {% endif %}
-
-        <button class="w-100 btn btn-lg btn-primary"
-                type="submit">{% trans "Sign up" %}</button>
-    </form>
-    <hr>
-    <a class="w-100"
-       type="submit"
-       href="{% url "account_login" %}">
-        {% trans "To login" %}
-    </a>
-
+        </div>
+        <div class="signup">
+            <img src="https://data.coop/static/img/logo_da.svg" alt="data.coop logo">
+            <div class="new_here">
+                <h2>{% trans "Are you new here?" %}</h2>
+                <a class="button" href="{% url "account_signup" %}">{% trans "Become a member" %}</a>
+            </div>
+        </div>
+    </div>
 {% endblock %}