From 78659b18200342214c95e46f268261d64332df64 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 26 Sep 2024 15:24:57 +0200
Subject: [PATCH] Underline using text-decoration

---
 client/src/app/+login/login.component.html |  2 +-
 client/src/app/+login/login.component.scss |  3 ++-
 client/src/sass/class-helpers/_text.scss   | 16 ++++++++++++----
 client/src/sass/include/_mixins.scss       |  4 ++--
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 254b2b790..e1cb40341 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -89,7 +89,7 @@
 
           <input type="submit" class="peertube-button orange-button w-100" i18n-value value="Login" [disabled]="!form.valid">
 
-          <div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5">
+          <div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5 text-center">
             <button type="button" i18n class="button-unstyle link-orange mx-3" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">
               I forgot my password
             </button>
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 286bbe498..bf9beee66 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -26,11 +26,12 @@ input[type=email] {
 
 .wrapper,
 my-alert {
-  display: block;
   max-width: 1200px;
 }
 
 my-alert {
+  display: block;
+
   @include margin(0, auto, 2rem);
 }
 
diff --git a/client/src/sass/class-helpers/_text.scss b/client/src/sass/class-helpers/_text.scss
index 636869c54..25e6454c6 100644
--- a/client/src/sass/class-helpers/_text.scss
+++ b/client/src/sass/class-helpers/_text.scss
@@ -12,22 +12,30 @@
   color: pvar(--green);
 }
 
+@mixin underline-orange {
+  text-decoration: underline !important;
+  text-decoration-color: pvar(--mainColor) !important;
+  text-underline-offset: 0.25em !important;
+  text-decoration-thickness: 0.15em !important;
+}
+
 .link-orange {
   color: pvar(--mainForegroundColor);
   font-weight: $font-semibold;
-  border-bottom: 0.18em solid pvar(--mainColor);
-  display: inline-block;
   line-height: 1.1;
 
+  @include underline-orange;
+
   &:hover {
     color: pvar(--mainForegroundColor);
     opacity: 0.8;
+
+    @include underline-orange;
   }
 }
 
 .underline-orange {
-  display: inline-block;
-  border-bottom: 0.19em solid pvar(--mainColor);
+  @include underline-orange;
 }
 
 // ---------------------------------------------------------------------------
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d58bca61d..d124625ca 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -7,11 +7,11 @@
   &:hover,
   &:focus,
   &:active {
-    text-decoration: none !important;
+    text-decoration: none;
   }
 
   &:focus:not(:focus-visible) {
-    outline: none !important;
+    outline: none;
   }
 }