}
onClick={handleOpenShareModal}
diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
index a7043dc688..67d612c18b 100644
--- a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
@@ -52,7 +52,8 @@ const ToolbarButtons = () => {
}
/>
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
index 9af003bfad..aa1b3ab324 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
+++ b/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;
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
index e220bf0667..36191e62e1 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
+++ b/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);
}