Merge pull request #22467 from overleaf/mf-clean-up-register-styling-bs5

[web] Clean up register and login bs5 code

GitOrigin-RevId: fcdb32d1e1ad7d0fb2862bb2726688780e42fa7c

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -33,6 +33,7 @@
 @import 'website-redesign';
 @import 'group-settings';
 @import 'templates-v2';
-@import 'login-register';
 @import 'homepage';
+@import 'login-register';
 @import 'login';
+@import 'register';

services/web/frontend/stylesheets/bootstrap-5/pages/login-register.scss

@@ -1,254 +1,26 @@
-.registration-logo {
-  width: 130px;
-  padding: var(--spacing-04) 0;
+.login-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-02) 0;
 }
 
-.website-redesign {
-  .register-container {
-    .register-content-container {
-      padding: 0; // override bootstrap padding
-      display: flex;
-      background-color: #f2f4f7;
-      min-height: 100vh;
-    }
-
-    .register-form {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      padding-top: var(--spacing-11);
-      background-color: var(--white);
-
-      @include media-breakpoint-down(lg) {
-        height: 100%;
-      }
-
-      .login-register-card {
-        text-align: center;
-        max-width: 320px;
-        padding-bottom: 120px;
-
-        .notification-content p {
-          text-align: left;
-        }
-
-        .login-register-header-focus {
-          padding-top: unset;
-
-          .login-register-header-heading-focus {
-            font-size: var(--font-size-05);
-            color: var(--neutral-90);
-            margin-bottom: 0;
-          }
-        }
-
-        .registration-message {
-          text-align: center;
-          padding-bottom: var(--spacing-07);
-
-          .registration-message-heading {
-            color: var(--neutral-70);
-            font-size: var(--font-size-05);
-            line-height: var(--line-height-04);
-            margin-top: var(--spacing-08);
-            margin-bottom: var(--spacing-05);
-          }
-
-          .registration-message-details {
-            font-size: var(--font-size-02);
-          }
-        }
-
-        .tos-agreement-notice {
-          text-align: left;
-        }
-      }
-    }
-
-    .register-illustration-container {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      position: relative;
-
-      .register-illustration {
-        position: absolute;
-        left: 80px;
-        top: 100px;
-
-        // for wide screen
-        @media (width >= 1700px) {
-          position: relative;
-          left: unset;
-          top: unset;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100%;
-        }
-
-        .register-main-image {
-          max-width: 850px;
-
-          @media (width <= 1350px) {
-            max-width: 750px;
-          }
-
-          @media (width <= 1150px) {
-            max-width: 670px;
-          }
-        }
-
-        .sticky-tags {
-          position: absolute;
-          height: 210px;
-          bottom: -135px;
-          right: 130px;
-
-          // for wide screen
-          @media (width >= 1700px) {
-            right: calc(50% - 300px);
-          }
-        }
-      }
-    }
-
-    .recaptcha-branding {
-      text-align: left;
-      padding: var(--spacing-05) 0;
-      font-size: var(--font-size-01);
-    }
-  }
-
-  .registration-block-separator {
-    margin-bottom: 0;
-  }
-
-  .login-register-form-focus {
-    padding: var(--spacing-08) 0 0 0;
-    border-bottom: solid 1px var(--neutral-20);
-
-    &:last-child {
-      border-bottom-width: 0;
-    }
-  }
-
-  .login-register-alternatives {
-    .form-group:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .login-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-02) 0;
-  }
-
-  .login-btn-icon {
-    position: relative;
-    top: unset;
-    left: unset;
-    background: unset;
-    border-radius: unset;
-    width: 20px;
-    height: 20px;
-    margin-right: var(--spacing-02);
-  }
-
-  .login-register-hr-text-container {
-    padding: var(--spacing-08) 0 var(--spacing-05) 0;
-
-    &::before {
-      top: calc(var(--spacing-08) + var(--spacing-08) / 4);
-    }
-  }
-
-  .login-register-error-container {
-    padding-bottom: var(--spacing-05);
-    text-align: left;
-  }
-
-  .form-group {
-    text-align: left;
-
-    label {
-      font-size: var(--font-size-02);
-    }
-  }
-
-  .form-group-password {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-
-    .form-group-password-input {
-      input.form-control {
-        padding-right: 35px;
-      }
-    }
-
-    .visibility-toggle {
-      position: absolute;
-      right: 0;
-      top: 0;
-      width: 35px; // TODO: Should this be calculated ?
-      height: 35px; // TODO: Should this be calculated ?
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: unset;
-      background-color: unset;
-
-      #visibility-icon-off {
-        margin-top: 2px; // workaround for the icon not having the same center as the non-slashed one
-      }
-    }
-  }
-
-  .login-register-text {
-    padding-bottom: var(--spacing-08);
-    margin-bottom: 0;
-
-    @include body-sm;
-  }
-
-  .login-register-other-links {
-    padding: var(--spacing-08) 0;
-    text-align: left;
-
-    .login-register-text {
-      padding-bottom: 0;
-    }
-
-    a {
-      color: var(--green-50);
-      text-decoration: underline;
-
-      // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
-      // this will force underline to not skip the descender
-      text-decoration-skip-ink: none;
-
-      &:hover {
-        color: var(--green-60);
-      }
-
-      // for accessibility with keyboard navigation
-      &:focus {
-        outline: 2px solid var(--green-50);
-        outline-offset: 1px;
-      }
-    }
-  }
+.login-btn-icon {
+  position: relative;
+  top: unset;
+  left: unset;
+  background: unset;
+  border-radius: unset;
+  width: 20px;
+  height: 20px;
+  margin-right: var(--spacing-02);
 }
 
-.login-register-hr-text-container {
+.login-register-or-text-container {
+  padding: var(--spacing-08) 0 var(--spacing-05) 0;
   margin: 0;
   line-height: 1;
   position: relative;
-  padding: var(--spacing-08) 0;
   font-size: var(--font-size-02);
 
   &::before {
@@ -256,14 +28,48 @@
     position: absolute;
     height: 1px;
     background-color: var(--neutral-20);
-    top: 50%;
     left: 0;
     right: 0;
+    top: calc(var(--spacing-08) + var(--spacing-08) / 4);
+  }
+
+  .login-register-or-text {
+    position: relative;
+    background-color: #fff;
+    padding: 0 var(--spacing-05);
   }
 }
 
-.login-register-hr-text {
+.login-register-error-container {
+  padding-bottom: var(--spacing-05);
+  text-align: left;
+}
+
+.form-group-password {
+  display: flex;
   position: relative;
-  background-color: #fff;
-  padding: 0 var(--spacing-05);
+  flex-direction: column;
+
+  .form-group-password-input {
+    input.form-control {
+      padding-right: 35px;
+    }
+  }
+
+  .visibility-toggle {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 35px; // TODO: Should this be calculated ?
+    height: 35px; // TODO: Should this be calculated ?
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: unset;
+    background-color: unset;
+
+    #visibility-icon-off {
+      margin-top: 2px; // workaround for the icon not having the same center as the non-slashed one
+    }
+  }
 }

services/web/frontend/stylesheets/bootstrap-5/pages/login.scss

@@ -37,30 +37,6 @@
     @include body-sm;
   }
 
-  .login-or-text-container {
-    margin: 0;
-    line-height: 1;
-    position: relative;
-    font-size: var(--font-size-02);
-    padding: var(--spacing-08) 0 var(--spacing-05) 0;
-
-    &::before {
-      content: '';
-      position: absolute;
-      height: 1px;
-      background-color: var(--neutral-20);
-      left: 0;
-      right: 0;
-      top: calc(var(--spacing-08) + var(--spacing-08) / 4);
-    }
-  }
-
-  .login-or-text {
-    position: relative;
-    background-color: #fff;
-    padding: 0 var(--spacing-05);
-  }
-
   .recaptcha-branding {
     @include body-xs;
   }

services/web/frontend/stylesheets/bootstrap-5/pages/register.scss

@@ -0,0 +1,112 @@
+.register-container {
+  h1 {
+    @include heading-sm;
+
+    color: var(--neutral-90);
+    margin-bottom: 0;
+  }
+
+  .register-content-container {
+    padding: 0; // override bootstrap padding
+    display: flex;
+    background-color: #f2f4f7;
+    min-height: 100vh;
+  }
+
+  .register-form-container {
+    display: flex;
+    justify-content: center;
+    padding-top: var(--spacing-11);
+    background-color: var(--white);
+
+    @include media-breakpoint-down(lg) {
+      height: 100%;
+    }
+
+    .register-form {
+      text-align: center;
+      max-width: 320px;
+      padding-bottom: 120px;
+
+      .notification-content p {
+        text-align: left;
+      }
+
+      .registration-message {
+        text-align: center;
+        padding-bottom: var(--spacing-07);
+
+        .registration-message-heading {
+          color: var(--neutral-70);
+          font-size: var(--font-size-05);
+          line-height: var(--line-height-04);
+          margin-top: var(--spacing-08);
+          margin-bottom: var(--spacing-05);
+        }
+
+        .registration-message-details {
+          font-size: var(--font-size-02);
+        }
+      }
+
+      .tos-agreement-notice {
+        text-align: left;
+      }
+    }
+  }
+
+  .register-illustration-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .register-illustration {
+      position: absolute;
+      left: 80px;
+      top: 100px;
+
+      // for wide screen
+      @media (width >= 1700px) {
+        position: relative;
+        left: unset;
+        top: unset;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+      }
+
+      .register-main-image {
+        max-width: 850px;
+
+        @media (width <= 1350px) {
+          max-width: 750px;
+        }
+
+        @media (width <= 1150px) {
+          max-width: 670px;
+        }
+      }
+
+      .sticky-tags {
+        position: absolute;
+        height: 210px;
+        bottom: -135px;
+        right: 130px;
+
+        // for wide screen
+        @media (width >= 1700px) {
+          right: calc(50% - 300px);
+        }
+      }
+    }
+  }
+
+  .recaptcha-branding {
+    @include body-xs;
+
+    text-align: left;
+    padding: var(--spacing-05) 0;
+  }
+}