From c067301452943085950f720320d7d04e67153e8f Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 22 May 2024 08:26:05 +0200
Subject: [PATCH] Add a Remeber me checkbox to login that extend session time.
 (#3926)

Fixes #3897

"Remember me" is only available when logging in with password. I see
this as an "advanced" feature. The passwordless login flow is easy so
not a big hassle to do it once a day.

Organisation that wants to can set `SESSION_COOKIE_AGE` to a custom
value, e.g. set it to two weeks to reagin the old behaviour.

To disable "Remember me" set `SESSION_COOKIE_AGE` to the same value as
`SESSION_COOKIE_AGE_LONG`

This PR also:

* removes unused code is_public_site
* removes unused code register_extra_text
* removes all use of link-button* classes. Buttons are now only handled
by the button class.
* add a tiny border radius to all buttons (this is something we
implement on all elements in Hypha)
---
 docs/setup/administrators/configuration.md    |  9 +++-
 .../dashboard/includes/my-tasks.html          |  2 +-
 .../templates/review/review_detail.html       |  2 +-
 .../forms/includes/multi_input_field.html     |  2 +-
 hypha/apply/users/forms.py                    | 21 +++++++-
 ...remove_authsettings_register_extra_text.py | 16 ++++++
 hypha/apply/users/models.py                   |  9 ----
 hypha/apply/users/templates/users/login.html  |  2 +-
 .../partials/confirmation_code_sent.html      |  2 +-
 .../templates/users/password_reset/form.html  |  2 +-
 .../users/passwordless_login_signup.html      |  2 +-
 hypha/apply/users/views.py                    | 13 +++--
 .../news/templates/news/news_index.html       |  2 +-
 hypha/settings/base.py                        |  9 +++-
 .../javascript/submission-form-copy.js        |  6 +--
 hypha/static_src/javascript/toggle-related.js |  2 +-
 hypha/static_src/sass/abstracts/_mixins.scss  | 20 ++------
 .../static_src/sass/abstracts/_variables.scss | 10 ++++
 hypha/static_src/sass/components/_button.scss | 42 ++++++++++++----
 hypha/static_src/sass/components/_link.scss   | 50 -------------------
 .../sass/components/_status-bar.scss          |  1 +
 hypha/templates/base-apply.html               |  6 +--
 hypha/templates/includes/login_button.html    |  6 +--
 .../templates/includes/org_login_button.html  |  4 +-
 .../includes/password_login_button.html       |  4 +-
 .../includes/passwordless_login_button.html   |  2 +-
 26 files changed, 126 insertions(+), 120 deletions(-)
 create mode 100644 hypha/apply/users/migrations/0025_remove_authsettings_register_extra_text.py

diff --git a/docs/setup/administrators/configuration.md b/docs/setup/administrators/configuration.md
index 37f5dc489a..238c75605a 100644
--- a/docs/setup/administrators/configuration.md
+++ b/docs/setup/administrators/configuration.md
@@ -62,10 +62,15 @@ Seconds to enter password on password page while email change/2FA change (defaul
 
 The age of session cookies, in seconds.
 
-This determines the length of time for which the user will remain logged in. The default value is 2 weeks.
+This determines the length of time for which the user will remain logged in. The default value is 12 hours.
 
-    SESSION_COOKIE_AGE = env.int('SESSION_COOKIE_AGE', 60 * 60 * 24 * 7 * 2)
+    SSESSION_COOKIE_AGE = env.int("SESSION_COOKIE_AGE", 60 * 60 * 12)
 
+The age of session cookies when users check "Remember me" etc., in seconds. The default value is 2 weeks.
+
+    SESSION_COOKIE_AGE_LONG = env.int("SESSION_COOKIE_AGE_LONG", 60 * 60 * 24 * 7 * 2)
+
+If both session value are equal the "Remember me" feature are disabled.
 
 ## Hypha custom settings
 
diff --git a/hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html b/hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html
index fdefb9137c..22946b655f 100644
--- a/hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html
+++ b/hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html
@@ -17,7 +17,7 @@ <h2 class="text-center font-light">{% trans "My tasks" %}</h2>
                         </span>
                     {% endif %}
                 </div>
-                <a class="button button-primary" href="{{ task.url }}">{% trans "View" %}</a>
+                <a class="button button--primary" href="{{ task.url }}">{% trans "View" %}</a>
             </div>
         {% endfor %}
     </div>
diff --git a/hypha/apply/review/templates/review/review_detail.html b/hypha/apply/review/templates/review/review_detail.html
index 0c84fc7e4f..b1bbdccf64 100644
--- a/hypha/apply/review/templates/review/review_detail.html
+++ b/hypha/apply/review/templates/review/review_detail.html
@@ -60,7 +60,7 @@ <h5>{% trans "Score" %}</h5>
                 <p class="text-xs">
                     * {% trans "Review was not against the latest version" %}<br>
                 </p>
-                <a class="button button-primary" href="{{ review.get_compare_url }}">{% trans "Compare" %}</a>
+                <a class="button button--primary" href="{{ review.get_compare_url }}">{% trans "Compare" %}</a>
             </div>
         {% comment %} {% endif %} {% endcomment %}
         </div>
diff --git a/hypha/apply/templates/forms/includes/multi_input_field.html b/hypha/apply/templates/forms/includes/multi_input_field.html
index 75e4657cba..ccf068a53e 100644
--- a/hypha/apply/templates/forms/includes/multi_input_field.html
+++ b/hypha/apply/templates/forms/includes/multi_input_field.html
@@ -11,7 +11,7 @@
 
 {% if field.field.multi_input_add_button %}
     <button
-        class="link link--button link--button--narrow multi-input-add-btn mt-2{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}"
+        class="button button--primary button--narrow multi-input-add-btn my-2{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}"
         type="button" data-multi-field-id="{{ field.field.multi_input_id }}"
         data-multi-visibility-index="{{ field.field.visibility_index }}"
         data-multi-max-index="{{ field.field.max_index }}"
diff --git a/hypha/apply/users/forms.py b/hypha/apply/users/forms.py
index bbe5356a45..6c8cc14b9c 100644
--- a/hypha/apply/users/forms.py
+++ b/hypha/apply/users/forms.py
@@ -1,4 +1,5 @@
 from django import forms
+from django.conf import settings
 from django.contrib.auth import get_user_model
 from django.contrib.auth.forms import AuthenticationForm
 from django.template.defaultfilters import mark_safe
@@ -12,6 +13,24 @@
 
 
 class CustomAuthenticationForm(AuthenticationForm):
+    """Form to collect the email and password for login.
+
+    Add "Remember me" checkbox that extends session time.
+
+    Adds login extra text and user content to the form, if configured in the
+    wagtail auth settings.
+    """
+
+    if settings.SESSION_COOKIE_AGE <= settings.SESSION_COOKIE_AGE_LONG:
+        remember_me = forms.BooleanField(
+            label=_("Remember me"),
+            help_text=_(
+                "On trusted devices only, keeps you logged in for a longer period."
+            ),
+            required=False,
+            widget=forms.CheckboxInput(),
+        )
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.user_settings = AuthSettings.load(request_or_site=self.request)
@@ -25,7 +44,7 @@ def __init__(self, *args, **kwargs):
 
 
 class PasswordlessAuthForm(forms.Form):
-    """Form to collect the email for passwordless login or signup (if enabled)
+    """Form to collect the email for passwordless login or signup (if enabled).
 
     Adds login extra text and user content to the form, if configured in the
     wagtail auth settings.
diff --git a/hypha/apply/users/migrations/0025_remove_authsettings_register_extra_text.py b/hypha/apply/users/migrations/0025_remove_authsettings_register_extra_text.py
new file mode 100644
index 0000000000..0c7874063f
--- /dev/null
+++ b/hypha/apply/users/migrations/0025_remove_authsettings_register_extra_text.py
@@ -0,0 +1,16 @@
+# Generated by Django 4.2.11 on 2024-05-14 12:51
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("users", "0024_update_is_staff"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="authsettings",
+            name="register_extra_text",
+        ),
+    ]
diff --git a/hypha/apply/users/models.py b/hypha/apply/users/models.py
index 43783f5442..2470e68aff 100644
--- a/hypha/apply/users/models.py
+++ b/hypha/apply/users/models.py
@@ -349,9 +349,6 @@ class Meta:
         blank=True,
         help_text=_("Displayed along side login form"),
     )
-    register_extra_text = RichTextField(
-        blank=True, help_text=_("Extra text to be displayed on register form")
-    )
 
     panels = [
         MultiFieldPanel(
@@ -368,12 +365,6 @@ class Meta:
             ],
             _("Login form customizations"),
         ),
-        MultiFieldPanel(
-            [
-                FieldPanel("register_extra_text"),
-            ],
-            _("Register form customizations"),
-        ),
     ]
 
 
diff --git a/hypha/apply/users/templates/users/login.html b/hypha/apply/users/templates/users/login.html
index 66e4736384..6cfdcfe099 100644
--- a/hypha/apply/users/templates/users/login.html
+++ b/hypha/apply/users/templates/users/login.html
@@ -61,7 +61,7 @@ <h2 class="text-2xl">{% blocktrans %}Log in to {{ ORG_SHORT_NAME }}{% endblocktr
                         {% endif %}
 
                         <div class="form__group max-w-sm flex items-center justify-between gap-4">
-                            <button class="link link--button link--button--login" type="submit">{% trans "Log in" %}</button>
+                            <button class="button button--primary button--login" type="submit">{% trans "Log in" %}</button>
                         </div>
 
                         <div class="flex items-center justify-center min-[465px]:justify-start relative mb-4">
diff --git a/hypha/apply/users/templates/users/partials/confirmation_code_sent.html b/hypha/apply/users/templates/users/partials/confirmation_code_sent.html
index 8b998aad34..e8f1c43420 100644
--- a/hypha/apply/users/templates/users/partials/confirmation_code_sent.html
+++ b/hypha/apply/users/templates/users/partials/confirmation_code_sent.html
@@ -33,7 +33,7 @@
 
     <div>
         <button
-            class="button button-primary block mb-4"
+            class="button button--primary block mb-4"
             type="submit"
             hx-post="{% url 'users:elevate_check_code' %}{% if redirect_url %}?next={{ redirect_url }}{% endif %}"
             hx-validate="true"
diff --git a/hypha/apply/users/templates/users/password_reset/form.html b/hypha/apply/users/templates/users/password_reset/form.html
index 82ef552a61..db13698f84 100644
--- a/hypha/apply/users/templates/users/password_reset/form.html
+++ b/hypha/apply/users/templates/users/password_reset/form.html
@@ -28,7 +28,7 @@ <h2 class="text-2xl">{% trans "Forgot password?" %}</h2>
                 <p>{{ form.email.label_tag }}</p>
                 <p>{{ form.email }}</p>
 
-                <button class="link link--button link--button--login" type="submit">{% trans "Send reset email" %}</button>
+                <button class="button button--primary button--login" type="submit">{% trans "Send reset email" %}</button>
             </form>
         </div>
     </section>
diff --git a/hypha/apply/users/templates/users/passwordless_login_signup.html b/hypha/apply/users/templates/users/passwordless_login_signup.html
index 40c99a60a5..1d0774c893 100644
--- a/hypha/apply/users/templates/users/passwordless_login_signup.html
+++ b/hypha/apply/users/templates/users/passwordless_login_signup.html
@@ -44,7 +44,7 @@ <h2 class="text-2xl">
                 {% endif %}
 
                 <div class="form__group">
-                    <button class="link link--button link--button--login" type="submit">{% trans "Next" %}</button>
+                    <button class="button button--primary button--login" type="submit">{% trans "Next" %}</button>
                 </div>
 
                 <div class="flex items-center justify-center min-[465px]:justify-start relative mb-4">
diff --git a/hypha/apply/users/views.py b/hypha/apply/users/views.py
index 430643ced2..4a93f986d6 100644
--- a/hypha/apply/users/views.py
+++ b/hypha/apply/users/views.py
@@ -50,7 +50,6 @@
 from wagtail.users.views.users import change_user_perm
 
 from hypha.core.mail import MarkdownMail
-from hypha.home.models import ApplyHomePage
 
 from .decorators import require_oauth_whitelist
 from .forms import (
@@ -94,17 +93,17 @@ class LoginView(TwoFactorLoginView):
 
     def get_context_data(self, form, **kwargs):
         context_data = super(LoginView, self).get_context_data(form, **kwargs)
-        context_data["is_public_site"] = True
         context_data["redirect_url"] = get_redirect_url(
             self.request, self.redirect_field_name
         )
-        if (
-            Site.find_for_request(self.request)
-            == ApplyHomePage.objects.first().get_site()
-        ):
-            context_data["is_public_site"] = False
         return context_data
 
+    def post(self, *args, **kwargs):
+        # Set longer session time if Remember me is checked.
+        if bool(self.request.POST.get("auth-remember_me", None) == "on"):
+            self.request.session.set_expiry(settings.SESSION_COOKIE_AGE_LONG)
+        return super().post(*args, **kwargs)
+
 
 @method_decorator(login_required, name="dispatch")
 class AccountView(UpdateView):
diff --git a/hypha/public/news/templates/news/news_index.html b/hypha/public/news/templates/news/news_index.html
index 1cdeb62207..81dc40ff76 100644
--- a/hypha/public/news/templates/news/news_index.html
+++ b/hypha/public/news/templates/news/news_index.html
@@ -19,7 +19,7 @@ <h4 class="heading heading--listings-introduction">{{ page.introduction|markdown
                     {% endfor %}
                 </select>
             </div>
-            <button class="link link--button link--button__stretch" type="submit">Filter</button>
+            <button class="button" type="submit">Filter</button>
         </form>
 
         {% if news %}
diff --git a/hypha/settings/base.py b/hypha/settings/base.py
index a74a745d79..044aee86cf 100644
--- a/hypha/settings/base.py
+++ b/hypha/settings/base.py
@@ -494,8 +494,13 @@
 # Sessions
 # https://docs.djangoproject.com/en/stable/ref/settings/#sessions
 
-# The age of session cookies, in seconds.
-SESSION_COOKIE_AGE = env.int("SESSION_COOKIE_AGE", 60 * 60 * 24 * 7 * 2)  # 2 weeks
+# The default age of session cookies, in seconds.
+SESSION_COOKIE_AGE = env.int("SESSION_COOKIE_AGE", 60 * 60 * 12)  # 12 hours
+
+# The age of session cookies when users check "Remember me" etc., in seconds.
+SESSION_COOKIE_AGE_LONG = env.int(
+    "SESSION_COOKIE_AGE_LONG", 60 * 60 * 24 * 7 * 2
+)  # 2 weeks
 
 # This is used by Wagtail's email notifications for constructing absolute URLs.
 PRIMARY_HOST = env.str("PRIMARY_HOST", None)
diff --git a/hypha/static_src/javascript/submission-form-copy.js b/hypha/static_src/javascript/submission-form-copy.js
index 739a2d4d55..5a7f89beea 100644
--- a/hypha/static_src/javascript/submission-form-copy.js
+++ b/hypha/static_src/javascript/submission-form-copy.js
@@ -95,7 +95,7 @@
         var $button = $("<button/>")
             .text("Copy questions to clipboard")
             .addClass(
-                "link link--button link--button--narrow js-clipboard-button"
+                "button button--primary button--narrow my-2 js-clipboard-button"
             )
             .attr(
                 "title",
@@ -106,9 +106,7 @@
             .clone()
             .css({ display: "block", "margin-left": "auto" })
             .insertBefore($application_form);
-        $button
-            .css({ "margin-left": "20px" })
-            .insertAfter($application_form.find("button").last());
+        $button.insertAfter($application_form.find("button").last());
 
         $(".js-clipboard-button").on("click", function (e) {
             e.preventDefault();
diff --git a/hypha/static_src/javascript/toggle-related.js b/hypha/static_src/javascript/toggle-related.js
index 0743f53c7e..d9e3d1c0e1 100644
--- a/hypha/static_src/javascript/toggle-related.js
+++ b/hypha/static_src/javascript/toggle-related.js
@@ -7,7 +7,7 @@
         .getBoundingClientRect().height;
 
     let button_show = document.createElement("button");
-    button_show.classList.add("link", "link--button", "link--button--narrow");
+    button_show.classList.add("button", "button--primary", "button--narrow");
     button_show.textContent = "Show";
 
     let button_wrapper = document.createElement("p");
diff --git a/hypha/static_src/sass/abstracts/_mixins.scss b/hypha/static_src/sass/abstracts/_mixins.scss
index eada294fed..f323fd4281 100644
--- a/hypha/static_src/sass/abstracts/_mixins.scss
+++ b/hypha/static_src/sass/abstracts/_mixins.scss
@@ -40,17 +40,12 @@
 // Hide text
 @mixin hidden {
     position: absolute;
-    width: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
     height: 1px;
+    width: 1px;
     overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-}
-
-// iOS Native vertical scroll
-@mixin native-vertical-scroll {
-    overflow-x: hidden;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
 }
 
 // Output a rem value for the given property
@@ -97,6 +92,7 @@
     justify-content: center;
 
     &:hover,
+    &:focus,
     &:active {
         cursor: pointer;
         background: $hover-bg;
@@ -181,12 +177,6 @@
     }
 }
 
-// used for the submission list items in the react app
-@mixin submission-list-item {
-    border-block-end: 2px solid $color--light-mid-grey;
-    border-inline-end: 2px solid $color--light-mid-grey;
-}
-
 @mixin table-ordering-styles {
     thead {
         th {
diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss
index ff40c10666..02c319c07b 100644
--- a/hypha/static_src/sass/abstracts/_variables.scss
+++ b/hypha/static_src/sass/abstracts/_variables.scss
@@ -99,6 +99,9 @@ $wrapper--small: 790px;
 // Text line length
 $max-text-line-length: 50em;
 
+// The custom width of 465px allow the buttons to scale with the input field
+$input-box-max-width: 465px;
+
 // Breakpoints
 $breakpoints: (
     "mob-portrait" "(min-width: 320px)",
@@ -131,3 +134,10 @@ $table-breakpoint: "tablet-landscape";
 
 // Dropdown height
 $dropdown-height: 45px;
+
+// Border radius
+$rounded-sm: 0.125rem;
+$rounded: 0.25rem;
+$rounded-md: 0.375rem;
+$rounded-lg: 0.5rem;
+$rounded-full: 9999px;
diff --git a/hypha/static_src/sass/components/_button.scss b/hypha/static_src/sass/components/_button.scss
index b78d275b35..33ce572b01 100644
--- a/hypha/static_src/sass/components/_button.scss
+++ b/hypha/static_src/sass/components/_button.scss
@@ -5,6 +5,7 @@
     background-image: none;
     border: 0;
     box-shadow: none;
+    border-radius: $rounded-sm;
 
     &:hover {
         cursor: pointer;
@@ -16,8 +17,6 @@
         opacity: 0.5;
     }
 
-    &-default,
-    &-primary,
     &--primary {
         @include button($color--light-blue, $color--dark-blue);
         display: inline-block;
@@ -52,25 +51,36 @@
         }
     }
 
-    &--left-space {
-        margin-inline-start: 20px;
+    &--login {
+        /* stylelint-disable-next-line media-query-no-invalid */
+        @media (min-width: $input-box-max-width) {
+            width: 20rem;
+        }
     }
 
     &--transparent {
         @include button(transparent, $color--black);
-        @include button--narrow;
         color: $color--black;
         border: 1px solid $color--black;
 
-        &:focus {
-            color: $color--black;
-        }
-
+        &:active,
+        &:focus,
         &:hover {
             color: $color--white;
         }
     }
 
+    &--mobile-standout {
+        color: $color--white;
+        border-color: $color--white;
+        max-width: 250px;
+        margin: 1rem auto 0;
+
+        @include media-query(tablet-portrait) {
+            display: none;
+        }
+    }
+
     &--cookieconsent {
         @include button(transparent, $color--white);
         display: inline;
@@ -156,6 +166,18 @@
         }
     }
 
+    &--left-space {
+        margin-inline-start: 20px;
+    }
+
+    &--narrow {
+        @include button--narrow;
+    }
+
+    &--wide {
+        @include button--wide;
+    }
+
     &--full-width {
         width: 100%;
         text-align: center;
@@ -295,7 +317,7 @@
                 text-align: left;
                 line-height: 1rem;
                 border: 1px solid $color--white;
-                border-radius: 3px;
+                border-radius: $rounded-sm;
             }
 
             &::after {
diff --git a/hypha/static_src/sass/components/_link.scss b/hypha/static_src/sass/components/_link.scss
index 591eb11242..274ce6744a 100644
--- a/hypha/static_src/sass/components/_link.scss
+++ b/hypha/static_src/sass/components/_link.scss
@@ -5,30 +5,6 @@
         opacity: 0.5;
     }
 
-    &--button {
-        @include button($color--light-blue, $color--dark-blue);
-        display: inline-block;
-
-        // The custom width of 465px allow the buttons to scale with the input field
-        $input-box-max-width: 465px;
-
-        &--narrow {
-            @include button--narrow;
-        }
-
-        &--login {
-            /* stylelint-disable-next-line media-query-no-invalid */
-            @media (min-width: $input-box-max-width) {
-                width: 20rem;
-            }
-        }
-
-        /* stylelint-disable-next-line media-query-no-invalid */
-        @media (max-width: $input-box-max-width) {
-            width: 100%;
-        }
-    }
-
     &--underlined {
         text-decoration: underline;
     }
@@ -99,32 +75,6 @@
         }
     }
 
-    &--button-transparent {
-        @include button(transparent, $color--darkest-blue);
-        color: $color--white;
-
-        &:focus,
-        &:hover {
-            border: 1px solid transparent;
-        }
-    }
-
-    &--button-long-text {
-        padding: 10px;
-
-        @include media-query(tablet-portrait) {
-            padding: 10px 60px;
-        }
-    }
-
-    &--button-narrow {
-        @include button--narrow;
-    }
-
-    &--button-wide {
-        @include button--wide;
-    }
-
     &--edit-lead {
         display: flex;
         align-items: center;
diff --git a/hypha/static_src/sass/components/_status-bar.scss b/hypha/static_src/sass/components/_status-bar.scss
index 5db1997cc4..6f365bcc9b 100644
--- a/hypha/static_src/sass/components/_status-bar.scss
+++ b/hypha/static_src/sass/components/_status-bar.scss
@@ -135,6 +135,7 @@
             color: $color--white;
             background-color: $color--tomato;
             padding-inline: var(--tooltip-padding);
+            border-radius: $rounded-sm;
         }
 
         &::before {
diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html
index efb63428bb..5408f6d08c 100644
--- a/hypha/templates/base-apply.html
+++ b/hypha/templates/base-apply.html
@@ -90,11 +90,11 @@
                 {% include "core/navigation/primarynav-apply.html" %}
 
                 {% if request.user.is_authenticated %}
-                    <a href="{% url 'users:account' %}" class="link link--button-transparent link--mobile-standout">
+                    <a href="{% url 'users:account' %}" class="button button--transparent button--mobile-standout">
                         {% heroicon_micro "user" class="inline align-middle w-4 h-4 me-1" aria_hidden=true %}
                         {{ request.user }}
                     </a>
-                    <a href="{% url 'users:logout' %}" class="link link--button-transparent link--mobile-standout text-center">
+                    <a href="{% url 'users:logout' %}" class="button button--transparent button--mobile-standout text-center">
                         {% trans "Log out" %}
                     </a>
                 {% endif %}
@@ -159,7 +159,7 @@
                 {% endif %}
 
                 {% if request.user.is_authenticated %}
-                    <a href="{% url 'users:logout' %}" class="button button--transparent">
+                    <a href="{% url 'users:logout' %}" class="button button--transparent button--narrow">
                         {% trans "Log out" %}
                     </a>
                 {% endif %}
diff --git a/hypha/templates/includes/login_button.html b/hypha/templates/includes/login_button.html
index b440bef386..3ea049ea96 100644
--- a/hypha/templates/includes/login_button.html
+++ b/hypha/templates/includes/login_button.html
@@ -3,7 +3,7 @@
 {% if request.user.is_authenticated %}
     {% if request.path == "/" and request.user.can_access_dashboard %}
         <a
-            class="button button--transparent {{ class }}"
+            class="button button--transparent button--narrow {{ class }}"
             href="{{ APPLY_SITE.root_url }}{% url 'dashboard:dashboard' %}"
         >
             {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
@@ -12,7 +12,7 @@
         </a>
     {% else %}
         <a
-            class="button button--transparent {{ class }}"
+            class="button button--transparent button--narrow {{ class }}"
             href="{{ APPLY_SITE.root_url }}{% url 'users:account' %}"
             title="Goto your account"
         >
@@ -22,7 +22,7 @@
     {% endif %}
 {% else %}
     <a
-        class="button button--transparent {{ class }}"
+        class="button button--transparent button--narrow {{ class }}"
         href="{{ APPLY_SITE.root_url }}{% url 'users:passwordless_login_signup' %}{% if redirect_url %}?next={{ redirect_url }}{% endif %}"
     >
         {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
diff --git a/hypha/templates/includes/org_login_button.html b/hypha/templates/includes/org_login_button.html
index e40ff3b36e..826765fd2a 100644
--- a/hypha/templates/includes/org_login_button.html
+++ b/hypha/templates/includes/org_login_button.html
@@ -1,8 +1,8 @@
 {% load i18n heroicons %}
 <a
-    class="link link--button link--button--login"
+    class="button button--secondary button--login"
     href="{% url "social:begin" "google-oauth2" %}{% if next %}?next={{ next }}{% endif %}"
 >
     {% heroicon_mini "building-office" size=18 class="inline align-text-bottom me-1" aria_hidden=true %}
     {% blocktrans %}Log in with your {{ ORG_SHORT_NAME }} email{% endblocktrans %}
-</a>
\ No newline at end of file
+</a>
diff --git a/hypha/templates/includes/password_login_button.html b/hypha/templates/includes/password_login_button.html
index 2767669213..8c6199ca96 100644
--- a/hypha/templates/includes/password_login_button.html
+++ b/hypha/templates/includes/password_login_button.html
@@ -1,8 +1,8 @@
 {% load i18n heroicons %}
 <a
-    class="link link--button link--button--login"
+    class="button button--secondary button--login"
     href="{% url 'users:login' %}{% if next %}?next={{next}}{% endif %}"
 >
     {% heroicon_mini "key" size=18 class="inline align-text-bottom me-1" aria_hidden=true %}
     {% trans "Log in with password" %}
-</a>
\ No newline at end of file
+</a>
diff --git a/hypha/templates/includes/passwordless_login_button.html b/hypha/templates/includes/passwordless_login_button.html
index d5d2ba78c4..d3988e707d 100644
--- a/hypha/templates/includes/passwordless_login_button.html
+++ b/hypha/templates/includes/passwordless_login_button.html
@@ -1,6 +1,6 @@
 {% load i18n heroicons %}
 <a
-    class="link link--button link--button--login"
+    class="button button--secondary button--login"
     href="{% url 'users:passwordless_login_signup' %}{% if next %}?next={{next}}{% endif %}"
 >
     {% heroicon_mini "envelope" size=18 class="inline align-text-bottom me-1" aria_hidden=true %}