Merge pull request #21281 from overleaf/ii-bs5-toolbar-items-border-radius

[web] BS5 toolbar buttons border radius

GitOrigin-RevId: b07a7bb16ab7a933dfa714a128f88f2ee006cf04

services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts

@@ -1,5 +1,6 @@
 import { StateEffect, StateField } from '@codemirror/state'
 import { EditorView, showPanel } from '@codemirror/view'
+import { isBootstrap5 } from '@/features/utils/bootstrap-5'
 
 const toggleToolbarEffect = StateEffect.define<boolean>()
 const toolbarState = StateField.define<boolean>({
@@ -116,7 +117,7 @@ const toolbarTheme = EditorView.theme({
     margin: '0 1px',
     backgroundColor: 'transparent',
     border: 'none',
-    borderRadius: '1px',
+    borderRadius: isBootstrap5() ? 'var(--border-radius-base)' : '1px',
     lineHeight: '1',
     width: '24px',
     height: '24px',
@@ -176,7 +177,7 @@ const toolbarTheme = EditorView.theme({
     border: 'none',
     whiteSpace: 'nowrap',
     color: 'inherit',
-    borderRadius: '0',
+    borderRadius: isBootstrap5() ? 'var(--border-radius-base)' : '0',
     opacity: 0.8,
     width: '120px',
     fontSize: '13px',

services/web/frontend/stylesheets/bootstrap-5/pages/editor/file-tree.scss

@@ -45,6 +45,31 @@
   }
 }
 
+@include theme('default') {
+  .file-tree {
+    .toolbar {
+      .toolbar-right,
+      .toolbar-left {
+        button {
+          opacity: 0.8;
+
+          &:hover,
+          &:focus,
+          &:active,
+          &.active {
+            background-color: rgba(125 125 125 / 20%);
+          }
+
+          &.active,
+          &:active {
+            background-color: rgba(125 125 125 / 40%);
+          }
+        }
+      }
+    }
+  }
+}
+
 .file-tree {
   display: flex !important; // To work around jQuery layout's inline styles
   flex-direction: column;
@@ -73,6 +98,36 @@
     margin: var(--spacing-05);
   }
 
+  .toolbar {
+    .toolbar-right,
+    .toolbar-left {
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        box-shadow: none;
+        border-radius: var(--border-radius-base);
+        border: none;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+          background-color: rgb(125 125 125 / 10%);
+          color: var(--toolbar-btn-color) !important;
+        }
+
+        &.active,
+        &:active {
+          background-color: rgb(125 125 125 / 20%);
+        }
+      }
+    }
+  }
+
   &-history {
     .entity-name {
       padding-left: var(--spacing-03);

services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss

@@ -242,6 +242,10 @@
   gap: var(--spacing-04);
   margin-left: var(--spacing-04);
   margin-right: var(--spacing-04);
+
+  .btn {
+    border-radius: var(--border-radius-base) !important;
+  }
 }
 
 .pdfjs-toolbar-button {