Merge pull request #23656 from overleaf/mj-ide-toolbar-buttons

[web] Reduce toolbar and rail size in editor redesign

GitOrigin-RevId: 9e9670c37664355f4bc287a5561b427768bb4436

services/web/frontend/js/features/ide-redesign/components/rail.tsx

@@ -112,10 +112,7 @@ export const RailLayout = () => {
       id="ide-rail-tabs"
     >
       <div className="ide-rail">
-        <Nav
-          activeKey={selectedTab}
-          className="d-flex flex-column ide-rail-tabs-nav"
-        >
+        <Nav activeKey={selectedTab} className="ide-rail-tabs-nav">
           {RAIL_TABS.filter(({ hide }) => !hide).map(
             ({ icon, key, indicator }) => (
               <RailTab

services/web/frontend/js/features/ide-redesign/components/toolbar/project-title.tsx

@@ -16,7 +16,7 @@ export const ToolbarProjectTitle = () => {
     <Dropdown align="start">
       <DropdownToggle
         id="project-title-options"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued"
+        className="ide-redesign-toolbar-dropdown-toggle-subdued fw-bold"
         variant="secondary"
       >
         {name}

services/web/frontend/js/features/ide-redesign/components/toolbar/share-project-button.tsx

@@ -23,6 +23,7 @@ export default function ShareProjectButton() {
     <>
       <div className="ide-redesign-toolbar-button-container">
         <OLButton
+          size="sm"
           variant="primary"
           leadingIcon={<MaterialIcon type="person_add" />}
           onClick={handleOpenShareModal}

services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx

@@ -52,7 +52,8 @@ const ToolbarButtons = () => {
       <OnlineUsers />
       <div className="ide-redesign-toolbar-button-container">
         <OLButton
-          variant="link"
+          size="sm"
+          variant="ghost"
           className="ide-redesign-toolbar-button-subdued"
           leadingIcon={<MaterialIcon type="history" />}
         />

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

@@ -12,10 +12,11 @@
 }
 
 .ide-rail-tab-link {
-  border-radius: 12px;
+  border-radius: var(--border-radius-base);
   display: block;
-  height: 48px;
-  width: 48px;
+  margin: 0 auto;
+  height: 32px;
+  width: 32px;
   text-align: center;
   padding: 0;
   color: var(--ide-rail-color);
@@ -24,7 +25,7 @@
   overflow-y: hidden;
 
   .ide-rail-tab-link-icon {
-    line-height: 48px;
+    line-height: 32px;
     font-size: 20px;
   }
 
@@ -39,9 +40,9 @@
       content: '';
       position: absolute;
       bottom: -$indicator-height;
-      left: 25%;
+      left: 4px;
       box-sizing: border-box;
-      width: 50%;
+      width: 24px;
       height: $indicator-height * 2;
       border: $indicator-height solid
         var(--ide-rail-link-active-indicator-background);
@@ -51,8 +52,8 @@
 
   .badge {
     position: absolute;
-    top: var(--spacing-02);
-    right: var(--spacing-02);
+    top: 0;
+    right: 0;
   }
 }
 
@@ -83,4 +84,8 @@
 
 .ide-rail-tabs-nav {
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-02);
+  width: 40px;
 }

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

@@ -5,8 +5,8 @@
 }
 
 .ide-redesign-toolbar {
-  $toolbar-height: 48px;
-  $home-button-size: 36px;
+  $toolbar-height: 40px;
+  $home-button-size: 32px;
   $ol-icon-height: 24px;
   $home-icon-font-size: 24px;
 
@@ -62,14 +62,14 @@
   }
 
   .ide-redesign-toolbar-dropdown-toggle-subdued {
-    $height: 32px;
+    $height: 28px;
 
     border: none;
     border-radius: var(--border-radius-base);
     padding: var(--spacing-02);
     height: $height;
-    font-size: var(--font-size-03);
-    line-height: var(--line-height-03);
+    font-size: var(--font-size-02);
+    line-height: var(--line-height-02);
     font-weight: 400;
     box-sizing: border-box;
     margin: math.div($toolbar-height - $height, 2) 0;
@@ -93,7 +93,7 @@
 
 .ide-redesign-toolbar-actions {
   display: flex;
-  gap: var(--spacing-06);
+  gap: var(--spacing-04);
   padding: 0 var(--spacing-05);
 }