Refactoring login component style

client/src/app/+login/login.component.html

@@ -13,7 +13,7 @@
       </h5>
 
       <p *ngIf="signupAllowed" i18n>
-        This instance allows registration. However, be careful to check the <a class="link-orange terms-anchor" (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a><a class="terms-link" target="_blank" routerLink="/about/instance" fragment="terms">Terms</a> before creating an account.
+        This instance allows registration. However, be careful to check the <a class="link-orange terms-anchor d-inline" (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a><a class="terms-link" target="_blank" routerLink="/about/instance" fragment="terms">Terms</a> before creating an account.
         You may also search for another instance to match your exact needs at: <a class="link-orange" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
       </p>
 
@@ -38,7 +38,7 @@
     <div class="wrapper">
       <div class="login-form-and-externals">
 
-        <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
+        <form class="w-100 m-0" myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
           <ng-container *ngIf="!otpStep">
             <div class="form-group">
               <div>
@@ -78,20 +78,20 @@
             ></my-input-text>
           </div>
 
-          <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
+          <input type="submit" class="peertube-button orange-button w-100" i18n-value value="Login" [disabled]="!form.valid">
 
-          <div *ngIf="!otpStep" class="additional-links">
+          <div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5">
-            <a i18n role="button" class="link-orange" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
+            <a i18n role="button" class="link-orange mx-3" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
 
             <ng-container *ngIf="signupAllowed">
               <span>·</span>
-              <a i18n routerLink="/signup" class="link-orange">Create an account</a>
+              <a i18n routerLink="/signup" class="link-orange mx-3">Create an account</a>
             </ng-container>
           </div>
         </form>
 
         <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
-          <div class="block-title" i18n>Or sign in with</div>
+          <div class="fw-semibold" i18n>Or sign in with</div>
 
           <div>
             <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
@@ -119,13 +119,13 @@
     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
   </div>
 
-  <div class="modal-body">
+  <div class="modal-body text-start">
 
     <div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n>
       We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
     </div>
 
-    <div *ngIf="!isEmailDisabled()" class="forgot-password-instructions" i18n>
+    <div *ngIf="!isEmailDisabled()" class="mb-4" i18n>
       Enter your email address and we will send you a link to reset your password.
     </div>
 
@@ -140,7 +140,7 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button d-none d-sm-block"
       (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
     >
 

client/src/app/+login/login.component.scss

@@ -1,12 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
 label {
+  @include font-size(1.125rem);
+
   display: block;
-  font-size: 18px;
   margin-bottom: 5px;
 }
 
@@ -15,39 +13,16 @@ input[type=email] {
   @include peertube-input-text(100%);
 }
 
-.modal-body {
+//garder ça ou deux flex-grow-1 flex-shrink-1 lignes 39 et 104
-  text-align: start;
-
-  .forgot-password-instructions {
-    margin-bottom: 20px;
-  }
-}
-
-@media screen and (max-width: $small-view) {
-  .modal-body {
-    #forgot-password-email {
-      width: 100%;
-    }
-  }
-
-  .modal-footer .grey-button {
-    display: none;
-  }
-}
-
 .wrapper {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin: auto;
 
-  > div {
+  >div {
     flex: 1 1;
   }
-
-  form {
-    width: 100%;
-  }
 }
 
 .wrapper,
@@ -56,46 +31,24 @@ input[type=email] {
 }
 
 .alert {
-  margin: 0 auto 30px;
+  @include rfs(0 auto 2rem, margin);
 }
 
 .login-form-and-externals {
   @include margin-left(10px);
   @include margin-right(10px);
+  @include margin-bottom(2.5rem);
 
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   max-width: 450px;
-  margin-bottom: 40px;
-
-  form {
-    margin: 0;
-
-    input[type=submit] {
-      width: 100%;
-    }
-
-    .additional-links {
-      display: flex;
-      justify-content: center;
-      margin: 20px 0 30px;
-
-      .link-orange {
-        margin: 0 15px;
-      }
-    }
-  }
 }
 
 .external-login-blocks {
   min-width: 200px;
   text-align: center;
 
-  .block-title {
-    font-weight: $font-semibold;
-  }
-
   .external-login-block {
     @include disable-default-a-behaviour;
 
@@ -119,10 +72,10 @@ input[type=email] {
 .instance-information {
   @include margin-left(10px);
   @include margin-right(10px);
+  @include margin-bottom(2.5rem);
+  @include rfs (22rem, min-width);
 
   max-width: 600px;
-  min-width: 350px;
-  margin-bottom: 40px;
 }
 
 .terms-anchor {
@@ -133,45 +86,33 @@ input[type=email] {
   display: none;
 }
 
-@mixin column-reverse-display {
+@include on-small-main-col {
-  flex-direction: column-reverse;
+  .wrapper {
+    flex-direction: column-reverse;
 
-  .login-form-and-externals,
+    .login-form-and-externals,
-  .instance-information {
+    .instance-information {
-    @include margin-left(0);
+      @include margin-left(0);
-    @include margin-right(0);
+      @include margin-right(0);
 
-    width: 100%;
+      width: 100%;
-    max-width: 450px;
+      max-width: 450px;
-    min-width: unset;
+      min-width: unset;
-    align-self: center;
+      align-self: center;
-  }
+    }
 
-  .instance-information {
+    .instance-information {
-    ::ng-deep .accordion {
+      ::ng-deep .accordion {
+        display: none;
+      }
+    }
+
+    .terms-anchor {
       display: none;
     }
-  }
 
-  .terms-anchor {
+    .terms-link {
-    display: none;
+      display: inline;
-  }
-
-  .terms-link {
-    display: inline;
-  }
-}
-
-@media screen and (max-width: breakpoint(md)) {
-  .wrapper {
-    @include column-reverse-display();
-  }
-}
-
-@media screen and (max-width: breakpoint(md) + $menu-width) {
-  :host-context(.main-col:not(.expanded)) {
-    .wrapper {
-      @include column-reverse-display();
     }
   }
-}
+}