optimize code (#7503)

frontend/src/pages/markdown-editor/css/header-toolbar.css

@@ -43,7 +43,7 @@
   color: #eb8205;
 }
 
-.sf-md-viewer-topbar .btn:focus, 
+.sf-md-viewer-topbar .btn:focus,
 .sf-md-viewer-topbar .btn:active {
   box-shadow: none !important;
   background-color: #EFEFEF;
@@ -64,5 +64,11 @@
   cursor: default;
 }
 
-
-
+.sf-md-viewer-topbar .sf-md-header-more-tool {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}

frontend/src/pages/markdown-editor/css/markdown-editor.css

@@ -12,11 +12,11 @@ html, body, #root {
 
 .sf-md-viewer-topbar-first,
 .sf-md-viewer-topbar-first-narrow {
-  padding: 4px 10px;
+  padding: 0 16px;
   background-color: #fff;
   border-bottom: 1px solid #e5e5e5;
-  box-shadow: 0 3px 2px -2px rgba(200,200,200,.15);
-  flex-shrink:0;
+  box-shadow: 0 3px 2px -2px rgba(200, 200, 200, .15);
+  flex-shrink: 0;
   align-items: center;
 }
 
@@ -25,6 +25,7 @@ html, body, #root {
     display: none !important;
   }
 }
+
 @media (min-width: 768px) {
   .sf-md-viewer-topbar-first-narrow {
     display: none !important;
@@ -40,6 +41,7 @@ html, body, #root {
   */
   user-select: text;
 }
+
 .topbar-file-info .file-title {
   font-size: 1.2rem;
   font-weight: bold;

frontend/src/pages/markdown-editor/header-toolbar/more-menu.js

@@ -51,8 +51,8 @@ class MoreMenu extends React.PureComponent {
     const isSmall = this.props.isSmallScreen;
     return (
       <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down">
-        <DropdownToggle tag="span" id="moreButton" aria-label={gettext('More operations')}>
-          <Icon symbol="more-vertical" />
+        <DropdownToggle className='sf-md-header-more-tool' tag="span" id="moreButton" aria-label={gettext('More operations')}>
+          <Icon symbol="more-level" />
           <Tooltip toggle={this.tooltipToggle} delay={{ show: 0, hide: 0 }} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
           </Tooltip>
         </DropdownToggle>