From fe4fc9f3fe731ba7ddde7a0fdbb01a0ddf8d11f9 Mon Sep 17 00:00:00 2001
From: Stephen <143712578+stephensu66@users.noreply.github.com>
Date: Fri, 6 Sep 2024 16:37:12 +0800
Subject: [PATCH] Style: update the header-toolbar UI (#6699)

---
 .../markdown-editor/css/header-toolbar.css    | 39 ++++++++++++++++++-
 .../header-toolbar/more-menu.js               |  2 +-
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/markdown-editor/css/header-toolbar.css b/frontend/src/pages/markdown-editor/css/header-toolbar.css
index b01fad8ae2..857411d1a5 100644
--- a/frontend/src/pages/markdown-editor/css/header-toolbar.css
+++ b/frontend/src/pages/markdown-editor/css/header-toolbar.css
@@ -5,11 +5,13 @@
 
 .seafile-btn-view-review .tag:hover {
   cursor: pointer;
+  background-color: #EFEFEF;
 }
 
 .topbar-btn-container {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .seafile-btn-add-review {
@@ -21,13 +23,46 @@
 }
 
 .sf-md-viewer-topbar .btn {
-  color: #666;
+  color: #212529;
+  border: none !important;
+  font-size: .9375rem;
+  height: 28px;
+  width: 28px;
+  min-width: 0;
+  padding-left: 7px;
+  padding-top: 0;
+  border-radius: 3px !important;
+  margin-right: 10px;
 }
 
 .collab-users-dropdown.dropdown {
   margin-right: 6px;
 }
 
-.btn-active[data-active=true] {
+.btn-active[data-active=true]#saveButton {
   color: #eb8205;
 }
+
+.sf-md-viewer-topbar .btn:focus, 
+.sf-md-viewer-topbar .btn:active {
+  box-shadow: none !important;
+  background-color: #EFEFEF;
+}
+
+.sf-md-viewer-topbar .btn:hover {
+  background-color: #EFEFEF;
+}
+
+.btn-secondary:focus,
+.btn-secondary:active,
+.btn-secondary:not(:disabled):not(.disabled):active {
+  background-color: #EFEFEF;
+}
+
+.btn-active[data-active=false]#saveButton:hover {
+  background-color: #fff;
+  cursor: default;
+}
+
+
+
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js b/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
index 4d9c1f57b8..173735304d 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
@@ -50,7 +50,7 @@ class MoreMenu extends React.PureComponent {
     const editorMode = this.props.editorMode;
     const isSmall = this.props.isSmallScreen;
     return (
-      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1">
+      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down">
         <DropdownToggle id="moreButton" aria-label={gettext('More operations')}>
           <Icon symbol="more-vertical" />
           <Tooltip toggle={this.tooltipToggle} delay={{ show: 0, hide: 0 }} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}