Merge pull request #15992 from overleaf/ab-group-sso-test-flow-1

[web] Group SSO multi-step modal and test flow GitOrigin-RevId: 343a20ef494276e65b35d1ee070c28d94617ea61
2023-12-07 09:04:31 +00:00
parent 22aa7a17b2
commit 3499ebe939
7 changed files with 238 additions and 41 deletions
@@ -110,8 +110,39 @@ h3.group-settings-title {
 }

 .sso-config-info {
+  padding: 12px 0;
+
+  .sso-config-info-header {
+    display: flex;
+    justify-content: space-between;
+    gap: @margin-xs;
+    padding: 0 @padding-base-horizontal 15px @padding-base-horizontal;
+    border-bottom: 1px solid @neutral-20;
+    margin-bottom: 15px;
+    flex-wrap: wrap;
+
+    .status-label {
+      font-size: @font-size-small;
+      border-radius: 4px;
+      padding: 2px 4px;
+      margin-top: 4px;
+      flex-shrink: 0;
+
+      &.status-label-valid {
+        background-color: @ol-green;
+        color: @neutral-10;
+      }
+
+      &.status-label-draft {
+        background-color: @neutral-20;
+        color: @neutral-90;
+      }
+    }
+  }
+
  .sso-config-info-section {
    margin-bottom: @margin-md;
+    padding: 0 @padding-base-horizontal;
  }

  .sso-config-info-label {
@@ -124,13 +155,105 @@ h3.group-settings-title {
    word-break: break-word;
  }

-  .sso-config-info-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: @margin-xs;
-  }
-
  p {
    margin-bottom: @margin-xs;
  }
 }
+
+.sso-config-modal-content {
+  .sso-config-interstitial-title,
+  .sso-config-test-result-title {
+    font-family: Lato, sans-serif;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .sso-config-modal-icon-wrapper {
+    text-align: center;
+    margin-top: 8px;
+
+    .sso-config-interstitial-icon,
+    .sso-config-test-result-icon,
+    .sso-config-test-error-icon {
+      font-size: 32px;
+      width: 80px;
+      height: 80px;
+      padding: 24px;
+      border-radius: 999px;
+      gap: 8px;
+    }
+
+    .sso-config-interstitial-icon {
+      background-color: @neutral-10;
+    }
+
+    .sso-config-test-result-icon {
+      background-color: @green-10;
+      color: @ol-green;
+    }
+
+    .sso-config-test-error-icon {
+      background-color: @red-10;
+      color: @red-50;
+    }
+  }
+
+  .sso-config-test-result-title {
+    font-family: Lato, sans-serif;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .has-feedback {
+    .form-control {
+      padding-right: 0;
+    }
+  }
+}
+
+.certificate-wrapper {
+  display: flex;
+  &.certificate-full {
+    flex-wrap: wrap;
+  }
+
+  .view-more {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+}
+
+.certificate {
+  font-family: Courier, monospace;
+
+  .certificate-truncated & {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    flex-grow: 4;
+  }
+  .certificate-full & {
+    word-break: break-all;
+
+    .break {
+      flex-basis: 100%;
+      height: 0;
+    }
+  }
+}
+
+.certificate-form-row {
+  display: flex;
+
+  .certificate-input {
+    flex-grow: 11;
+  }
+
+  .certificate-delete {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+}