Merge pull request #23545 from overleaf/mj-dp-labs-bs5

[web] Convert labs participation page to BS5

GitOrigin-RevId: 6a471b5162ee8485f2744157f29d1b94b59c8d4c

services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx

@@ -63,7 +63,7 @@ export function LabsExperimentWidget({
     <div
       className={`labs-experiment-widget-container ${disabled ? 'disabled-experiment' : ''}`}
     >
-      <div className="p-2">{logo}</div>
+      <div className="experiment-logo-container">{logo}</div>
       <div className="description-container">
         <div className="title-row">
           <h3 className="h4">{title}</h3>

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

@@ -1,3 +1,4 @@
 @import 'third-party-references';
 @import 'symbol-palette';
 @import 'writefull';
+@import 'labs';

services/web/frontend/stylesheets/bootstrap-5/modules/labs.scss

@@ -0,0 +1,119 @@
+.labs-opt-in-wrapper {
+  color: var(--neutral-60);
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    color: var(--content-primary);
+  }
+
+  #experiments-container {
+    .title-row {
+      display: flex;
+    }
+
+    .labs-experiment-widget-container {
+      border: 1px solid var(--border-divider);
+    }
+  }
+
+  .labs-icon {
+    background-color: var(--green-50);
+    color: var(--white);
+    border-radius: 20%;
+    vertical-align: text-bottom;
+  }
+
+  p {
+    font-size: var(--font-size-02);
+    color: var(--content-secondary);
+  }
+
+  strong {
+    font-size: var(--font-size-02);
+  }
+
+  .labs-experiment-widget-container {
+    --image-size: 40px;
+    --image-padding: var(--spacing-01);
+
+    display: grid;
+    grid-template-columns: var(--image-size) 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: 0;
+      }
+    }
+
+    .experiment-logo-container {
+      padding: var(--image-padding);
+    }
+
+    img {
+      width: calc(var(--image-size) - var(--image-padding) * 2);
+      height: calc(var(--image-size) - var(--image-padding) * 2);
+    }
+
+    .title-row {
+      margin: 0;
+      margin-bottom: var(--spacing-04);
+
+      > h3 {
+        margin: 0;
+        margin-right: var(--spacing-04);
+      }
+
+      .badge {
+        line-height: var(--line-height-02);
+      }
+    }
+
+    p {
+      margin-bottom: var(--spacing-04);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &.disabled-experiment {
+      grid-template-columns: var(--image-size) 3fr 1fr auto;
+
+      .disabled-explanation {
+        color: var(--content-secondary);
+      }
+
+      h3,
+      p {
+        color: var(--content-disabled);
+      }
+    }
+  }
+
+  @media (width < 768px) {
+    .labs-experiment-widget-container {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.disabled-experiment {
+  .ai-error-assistant-avatar {
+    filter: grayscale(0.6);
+  }
+}
+
+.labs-opt-in {
+  .form-group {
+    margin-top: var(--spacing-06);
+  }
+}

services/web/frontend/stylesheets/modules/labs.less

@@ -51,6 +51,10 @@
       height: 36px;
     }
 
+    .experiment-logo-container {
+      padding: 2px;
+    }
+
     .title-row {
       margin: 0;
       margin-bottom: 10px;
@@ -95,3 +99,9 @@
     filter: grayscale(0.6);
   }
 }
+
+.labs-opt-in {
+  .form-group {
+    margin-top: 15px;
+  }
+}