Merge pull request #22934 from overleaf/rd-admin-split-test-edit-id

Migrate the split test edit admin page to Bootstrap 5

GitOrigin-RevId: 34c690e00f74a68fb4018f7546d77aefd3e84a51

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

@@ -2,6 +2,7 @@
   flex: 1;
   margin-bottom: var(--spacing-06);
   background-color: var(--white);
+  padding: var(--spacing-04);
 
   .table {
     margin-bottom: initial;
@@ -9,20 +10,23 @@
 }
 
 .table {
-  tr {
-    &:last-child {
-      td {
-        border-bottom-width: 0;
-      }
-    }
-  }
-
   th,
   td {
     a {
       text-decoration: none;
     }
   }
+
+  tbody {
+    tr {
+      &:last-child {
+        td,
+        th {
+          border-bottom-width: 0;
+        }
+      }
+    }
+  }
 }
 
 .table-container-bordered {
@@ -43,7 +47,8 @@
 
 .table-striped {
   tr,
-  td {
+  td,
+  th {
     border-top-width: 0;
     border-bottom-width: 0;
   }

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

@@ -1,74 +0,0 @@
-.material-switch {
-  input[type='checkbox'] {
-    display: none;
-
-    &:checked + label::before {
-      background: inherit;
-      opacity: 0.5;
-    }
-
-    &:checked + label::after {
-      background: inherit;
-      left: 20px;
-    }
-
-    &:disabled + label {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  label {
-    cursor: pointer;
-    height: 0;
-    position: relative;
-    width: 40px;
-    background-color: var(--bg-accent-01);
-
-    &::before {
-      background: rgb(0 0 0);
-      box-shadow: inset 0 0 10px rgb(0 0 0 / 50%);
-      border-radius: var(--border-radius-medium);
-      content: '';
-      height: 16px;
-      margin-top: calc(var(--spacing-01) * -1);
-      position: absolute;
-      opacity: 0.3;
-      transition: all 0.2s ease-in-out;
-      width: 40px;
-    }
-
-    &::after {
-      background: rgb(255 255 255);
-      border-radius: var(--border-radius-large);
-      box-shadow: 0 0 5px rgb(0 0 0 / 30%);
-      content: '';
-      height: 24px;
-      left: -4px;
-      margin-top: calc(var(--spacing-01) * -1);
-      position: absolute;
-      top: -4px;
-      transition: all 0.2s ease-in-out;
-      width: 24px;
-    }
-  }
-}
-
-.hr-sect {
-  display: flex;
-  flex-basis: 100%;
-  align-items: center;
-  color: rgb(0 0 0 / 35%);
-  margin: var(--spacing-04) 0;
-}
-
-.hr-sect::before,
-.hr-sect::after {
-  content: '';
-  flex-grow: 1;
-  background: rgb(0 0 0 / 35%);
-  height: 1px;
-  font-size: 0;
-  line-height: 0;
-  margin: 0 var(--spacing-04);
-}

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

@@ -0,0 +1,78 @@
+#survey-form,
+#split-test-edit,
+#split-test-create {
+  .material-switch {
+    input[type='checkbox'] {
+      display: none;
+
+      &:checked + label::before {
+        background: inherit;
+        opacity: 0.5;
+      }
+
+      &:checked + label::after {
+        background: inherit;
+        left: 20px;
+      }
+
+      &:disabled + label {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    label {
+      cursor: pointer;
+      height: 0;
+      position: relative;
+      width: 40px;
+      background-color: var(--bg-accent-01);
+
+      &::before {
+        background: rgb(0 0 0);
+        box-shadow: inset 0 0 10px rgb(0 0 0 / 50%);
+        border-radius: var(--border-radius-medium);
+        content: '';
+        height: 16px;
+        margin-top: calc(var(--spacing-01) * -1);
+        position: absolute;
+        opacity: 0.3;
+        transition: all 0.2s ease-in-out;
+        width: 40px;
+      }
+
+      &::after {
+        background: rgb(255 255 255);
+        border-radius: var(--border-radius-large);
+        box-shadow: 0 0 5px rgb(0 0 0 / 30%);
+        content: '';
+        height: 24px;
+        left: -4px;
+        margin-top: calc(var(--spacing-01) * -1);
+        position: absolute;
+        top: -4px;
+        transition: all 0.2s ease-in-out;
+        width: 24px;
+      }
+    }
+  }
+
+  .hr-sect {
+    display: flex;
+    flex-basis: 100%;
+    align-items: center;
+    color: rgb(0 0 0 / 35%);
+    margin: var(--spacing-04) 0;
+  }
+
+  .hr-sect::before,
+  .hr-sect::after {
+    content: '';
+    flex-grow: 1;
+    background: rgb(0 0 0 / 35%);
+    height: 1px;
+    font-size: 0;
+    line-height: 0;
+    margin: 0 var(--spacing-04);
+  }
+}

services/web/frontend/stylesheets/bootstrap-5/pages/admin/project-url-lookup.scss

@@ -1,22 +1,22 @@
 .project-url-lookup {
   margin-top: var(--spacing-08);
-}
 
-.project-url-lookup-results {
-  margin-top: var(--spacing-08);
-}
+  .project-url-lookup-results {
+    margin-top: var(--spacing-08);
+  }
 
-.project-url-lookup-link-box {
-  background-color: var(--bg-light-secondary);
-  border: 1px solid var(--border-primary-dark);
-  padding: var(--spacing-03) var(--spacing-05);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
+  .project-url-lookup-link-box {
+    background-color: var(--bg-light-secondary);
+    border: 1px solid var(--border-primary-dark);
+    padding: var(--spacing-03) var(--spacing-05);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 
-.project-url-lookup-hint {
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-03);
+  .project-url-lookup-hint {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-03);
+  }
 }

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

@@ -40,4 +40,5 @@
 @import 'login-register';
 @import 'login';
 @import 'register';
-@import 'admin';
+@import 'admin/admin';
+@import 'admin/project-url-lookup';