Merge pull request #18030 from overleaf/rd-bootstrap-settings-css

Migrate account-settings.less file to Bootstrap 5 and Sass

GitOrigin-RevId: 898cd811d6a0576cb0faacdd729461198324d2d5

services/web/frontend/stylesheets/app/account-settings.less

@@ -30,7 +30,7 @@
 .affiliations-table-cell-tabbed {
   margin: @margin-sm 0 0 @margin-md;
   padding-left: @margin-sm;
-  border-left: 2px solid @table-border-color;
+  border-left: 2px solid @table-border-color; // don't migrate this line of style
 }
 .affiliations-table-row--highlighted {
   background-color: tint(@content-alt-bg-color, 6%);
@@ -152,8 +152,9 @@ tbody > tr.affiliations-table-warning-row > td {
 }
 
 .settings-widget-container {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 40px 1fr auto;
+  gap: 20px;
   align-items: center;
   padding: 10px;
 
@@ -177,8 +178,7 @@ tbody > tr.affiliations-table-warning-row > td {
   }
 
   .title-row {
-    display: flex;
-    align-items: center;
+    margin: 0;
     margin-bottom: 10px;
 
     > h4 {
@@ -196,6 +196,12 @@ tbody > tr.affiliations-table-warning-row > td {
   }
 }
 
+@media (max-width: @screen-xs-max) {
+  .settings-widget-container {
+    grid-template-columns: 1fr;
+  }
+}
+
 // Should not be migrated to BS5
 .settings-reconfirm-info {
   display: flex;

services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss

@@ -19,6 +19,7 @@ $btn-padding-y: $spacing-02;
 $btn-border-radius: $border-radius-full;
 $btn-border-radius-lg: $border-radius-full;
 $btn-border-radius-sm: $border-radius-full;
+$btn-white-space: nowrap;
 
 // Colors
 $primary: $bg-accent-01;

services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss

@@ -40,5 +40,11 @@
 // Utilities
 @import 'bootstrap-5/scss/utilities/api';
 
+// Mixins
+@import 'bootstrap-5/scss/mixins/breakpoints';
+
 // Components custom style
 @import '../components/all';
+
+// Pages custom style
+@import '../pages/all';

services/web/frontend/stylesheets/bootstrap-5/base/layout.scss

@@ -29,3 +29,7 @@ $footer-height: 50px;
 hr {
   opacity: unset;
 }
+
+.horizontal-divider {
+  border-top: 1px solid var(--border-divider);
+}

services/web/frontend/stylesheets/bootstrap-5/components/button.scss

@@ -157,6 +157,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-04); // Add gap between text and icons
+  justify-content: center;
 
   .icon-small {
     font-size: 20px;

services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss

@@ -0,0 +1,208 @@
+.affiliations-table {
+  table-layout: fixed;
+}
+
+.affiliations-table-cell {
+  padding: var(--spacing-04);
+  overflow-wrap: break-word;
+}
+
+.affiliations-table-cell-tabbed {
+  margin: var(--spacing-04) 0 0 var(--spacing-07);
+  padding-left: var(--spacing-04);
+}
+
+.affiliations-table-row--highlighted {
+  background-color: var(--bg-light-secondary);
+}
+
+.affiliations-table-inline-action {
+  text-transform: capitalize;
+}
+
+.affiliation-change-container {
+  margin-top: var(--spacing-04);
+}
+
+.affiliations-table-label {
+  padding-top: var(--spacing-02);
+}
+
+.btn-link-accounts {
+  margin-bottom: var(--spacing-03);
+}
+
+.settings-widget-status-icon,
+.dropbox-sync-icon {
+  position: relative;
+  font-size: 1.3em;
+  line-height: 1.3em;
+  vertical-align: top;
+  &.status-error,
+  &.dropbox-sync-icon-error {
+    color: var(--bg-danger-01);
+  }
+  &.status-success,
+  &.dropbox-sync-icon-success {
+    color: var(--content-positive);
+  }
+  &.status-pending,
+  &.dropbox-sync-icon-updating {
+    color: var(--bg-info-01);
+    &::after {
+      content: '\f021';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      margin-left: -20%;
+      font-size: 60%;
+      color: #fff;
+      animation: fa-spin 2s infinite linear;
+    }
+  }
+}
+
+.settings-widgets-container {
+  border: 1px solid var(--border-divider);
+
+  hr {
+    margin: 0 var(--spacing-05);
+  }
+}
+
+.settings-widget-container {
+  display: grid;
+  grid-template-columns: 50px 1fr auto;
+  gap: var(--spacing-07);
+  align-items: center;
+  padding: var(--spacing-05);
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    padding-right: var(--spacing-07);
+
+    &:last-child {
+      padding-right: var(--spacing-00);
+    }
+  }
+
+  img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .description-container {
+    flex-grow: 1;
+  }
+
+  .title-row {
+    margin: var(--spacing-00);
+    margin-bottom: var(--spacing-05);
+
+    > h4 {
+      margin: 0;
+      margin-right: var(--spacing-05);
+    }
+  }
+
+  p {
+    margin-bottom: var(--spacing-05);
+
+    &:last-child {
+      margin-bottom: var(--spacing-00);
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .settings-widget-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Prevents icon from large account linking sections, such as the git bridge,
+// from rendering in the center of the widget, anchoring it to the top
+.linking-icon-fixed-position {
+  align-self: start;
+  padding-top: var(--spacing-05);
+}
+
+// overrides the default `Col` padding, as the inner `affiliations-table-cell` has its own padding, and
+// the content length of the git-bridge token table is pretty much fixed (tokens and dates)
+.linking-git-bridge-table-cell {
+  padding-right: 0;
+}
+
+.linking-git-bridge-revoke-button {
+  padding: var(--spacing-01) var(--spacing-02);
+}
+
+.enrollment-alert {
+  width: 100%;
+  border-radius: var(--border-radius-base);
+  padding: var(--spacing-05);
+  background-color: var(--bg-info-03);
+  border: 1px solid var(--border-divider);
+  display: flex;
+  flex-direction: row;
+
+  .icon {
+    flex: 1 1 auto;
+    padding: 0 var(--spacing-06) 0 var(--spacing-02);
+  }
+
+  a {
+    text-decoration: underline;
+  }
+}
+
+.security-row {
+  .line-header > b {
+    color: var(--content-primary);
+  }
+
+  color: var(--content-secondary);
+  display: flex;
+  flex-direction: row;
+  padding: var(--spacing-03) 0;
+
+  .icon {
+    color: var(--content-primary);
+    display: flex;
+    flex: 1 1 7%;
+    padding: 0 var(--spacing-06);
+    margin-top: var(--spacing-06);
+  }
+
+  .text {
+    flex: 1 1 93%;
+    display: flex;
+    flex-direction: column;
+    margin-right: var(--spacing-06);
+  }
+
+  .button-column {
+    display: flex;
+    align-items: center;
+  }
+
+  .status-label {
+    @include body-sm;
+    border-radius: var(--border-radius-base);
+    padding: var(--spacing-01) var(--spacing-02);
+    margin-top: var(--spacing-02);
+    margin-left: var(--spacing-04);
+    flex-shrink: 0;
+
+    &.status-label-configured {
+      background-color: var(--bg-accent-01);
+      color: var(--content-secondary-dark);
+    }
+
+    &.status-label-ready {
+      background-color: var(--bg-light-tertiary);
+      color: var(--content-primary);
+    }
+  }
+}

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

@@ -0,0 +1 @@
+@import 'account-settings';

services/web/frontend/stylesheets/components/divider.less

@@ -1,3 +1,4 @@
+// migrated to layout.scss
 .horizontal-divider {
   border-top: 1px solid @hr-border;
 }