Merge pull request #32237 from overleaf/mj-experiment-icon

[web] Align experiment icons to Figma designs

GitOrigin-RevId: e615000ed1684a4cba14569d44601ba03a970039

services/web/frontend/js/features/monthly-texlive/labs-widget.tsx

@@ -39,8 +39,7 @@ const MonthlyTexliveLabsWidget = ({
   const logo = (
     <MaterialIcon
       type="construction"
-      size="2x"
-      className="rounded bg-primary-subtle"
+      className="rounded bg-primary-subtle labs-experiment-icon"
     />
   )
 

services/web/frontend/js/features/overleaf-code/labs-widget.tsx

@@ -34,8 +34,7 @@ const LabsWidget = ({ setErrorMessage, labsProgram }: LabsWidgetProps) => {
       logo={
         <MaterialIcon
           type="code"
-          size="2x"
-          className="rounded bg-primary-subtle"
+          className="rounded bg-primary-subtle labs-experiment-icon"
         />
       }
       optedInDescription={description}

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

@@ -48,6 +48,12 @@
       padding: var(--image-padding);
     }
 
+    .labs-experiment-icon {
+      padding: var(--spacing-03);
+      color: var(--green-70);
+      font-size: 24px;
+    }
+
     img {
       width: calc(var(--image-size) - var(--image-padding) * 2);
       height: calc(var(--image-size) - var(--image-padding) * 2);