Underline using text-decoration

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>

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);
 }
 

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;
+  @include underline-orange;
-  border-bottom: 0.19em solid pvar(--mainColor);
 }
 
 // ---------------------------------------------------------------------------

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;
   }
 }