From e2d63a778b7d0e44323cf3f707647e134ed01aa1 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Fri, 1 Nov 2024 14:36:02 +0100
Subject: [PATCH] Merge pull request #21135 from overleaf/rd-dev-toolbar

Migrate the Dev Toolbar to Bootstrap 5

GitOrigin-RevId: c102883171e5e40c6b9a2f808f305ab1d4fb553f
---
 .../features/ui/components/ol/ol-tooltip.tsx  |   2 +
 .../bootstrap-5/components/all.scss           |   1 +
 .../bootstrap-5/components/dev-toolbar.scss   | 136 ++++++++++++++++++
 .../stylesheets/components/dev-toolbar.less   |  13 ++
 4 files changed, 152 insertions(+)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss

diff --git a/services/web/frontend/js/features/ui/components/ol/ol-tooltip.tsx b/services/web/frontend/js/features/ui/components/ol/ol-tooltip.tsx
index 97458008fa..c3f152e44e 100644
--- a/services/web/frontend/js/features/ui/components/ol/ol-tooltip.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-tooltip.tsx
@@ -18,6 +18,8 @@ function OLTooltip(props: OLTooltipProps) {
     tooltipProps: bs5Props.tooltipProps as BS3TooltipProps,
     overlayProps: {
       placement: bs5Props.overlayProps?.placement,
+      rootClose: bs5Props.overlayProps?.rootClose,
+      trigger: bs5Props.overlayProps?.trigger,
     },
     ...bs3Props,
   }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index 40a1a57bbe..b4e8c8ae0e 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -31,3 +31,4 @@
 @import 'gallery-search';
 @import 'error-boundary';
 @import 'close-button';
+@import 'dev-toolbar';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss b/services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss
new file mode 100644
index 0000000000..f6c8f1725b
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss
@@ -0,0 +1,136 @@
+.dev-toolbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 40px;
+  background-color: var(--bg-dark-primary);
+  padding: var(--spacing-02) var(--spacing-05);
+
+  button.widget {
+    color: var(--neutral-10);
+    margin: 0 var(--spacing-02);
+    padding: 0 var(--spacing-02);
+    border: none;
+    text-decoration: none;
+
+    .badge {
+      font-size: var(--font-size-03);
+    }
+  }
+
+  .collapse-button {
+    position: absolute;
+    padding: 0;
+    margin-top: calc(var(--spacing-01) * -1);
+    color: var(--neutral-50);
+    border-color: transparent;
+
+    span {
+      font-size: var(--font-size-07);
+    }
+
+    &:hover {
+      color: var(--border-primary-dark);
+    }
+  }
+}
+
+.dev-tool-bar-open-button {
+  position: fixed;
+  bottom: -2px;
+  left: 6px;
+  color: var(--neutral-70);
+
+  span {
+    font-size: var(--font-size-07);
+  }
+
+  &:hover {
+    color: var(--border-primary-dark);
+  }
+}
+
+.dev-toolbar-tooltip {
+  opacity: 1 !important;
+
+  a {
+    color: var(--blue-20) !important;
+    text-decoration: none;
+
+    &.btn {
+      color: var(--neutral-10);
+    }
+  }
+
+  &.tooltip.top {
+    margin-top: calc(var(--spacing-04) * -1);
+    opacity: 1;
+  }
+
+  .tooltip-inner {
+    padding: var(--spacing-01) var(--spacing-04) var(--spacing-04)
+      var(--spacing-04);
+    text-align: left;
+    min-width: 300px;
+    max-height: 800px;
+    overflow-y: auto;
+  }
+
+  .title {
+    margin-top: var(--spacing-02);
+  }
+
+  .test-card {
+    text-align: left;
+    color: var(--neutral-10);
+    padding: var(--spacing-03);
+    border: var(--spacing-01) solid var(--neutral-70);
+    background-color: var(--bg-dark-secondary);
+    border-radius: var(--border-radius-base);
+    margin-top: var(--spacing-04);
+
+    &.override {
+      border-color: var(--blue-40);
+    }
+
+    .test-name {
+      font-family: monospace;
+      font-size: var(--font-size-01);
+      font-weight: bold;
+    }
+
+    ul {
+      li.variant-row {
+        line-height: var(--line-height-03);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--spacing-01) 0;
+
+        .btn-inline-link {
+          color: var(--content-primary-dark) !important;
+          opacity: 1;
+          font-weight: 400;
+          text-decoration: none;
+
+          .material-symbols {
+            vertical-align: sub;
+            font-weight: 400;
+            font-size: var(--font-size-03);
+          }
+        }
+      }
+    }
+  }
+
+  .actions {
+    margin-top: var(--spacing-04);
+    text-align: right;
+  }
+
+  ul {
+    margin-bottom: 0;
+  }
+}
diff --git a/services/web/frontend/stylesheets/components/dev-toolbar.less b/services/web/frontend/stylesheets/components/dev-toolbar.less
index 5e00528c46..26aa2e4549 100644
--- a/services/web/frontend/stylesheets/components/dev-toolbar.less
+++ b/services/web/frontend/stylesheets/components/dev-toolbar.less
@@ -93,6 +93,19 @@
     ul {
       li.variant-row {
         line-height: 24px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 2px 0;
+
+        .btn {
+          color: @white;
+        }
+
+        .material-symbols {
+          vertical-align: text-top;
+          font-weight: 400;
+        }
       }
     }
   }