imprv: Sidebar content header style (#4526)

* fix min-width

* fix button location and style

packages/app/src/components/Sidebar/CustomSidebar.jsx

@@ -57,11 +57,11 @@ const CustomSidebar = (props) => {
   return (
     <>
       <div className="grw-sidebar-content-header p-3 d-flex">
-        <h3 className="mb-0">
+        <h3 className="mb-0 text-nowrap">
           Custom Sidebar
           <a className="h6 ml-2" href="/Sidebar"><i className="icon-pencil"></i></a>
         </h3>
-        <button type="button" className="btn btn-sm ml-auto grw-btn-reload-cs" onClick={fetchDataAndRenderHtml}>
+        <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={fetchDataAndRenderHtml}>
           <i className="icon icon-reload"></i>
         </button>
       </div>

packages/app/src/components/Sidebar/RecentChanges.jsx

@@ -176,21 +176,22 @@ class RecentChanges extends React.Component {
     return (
       <>
         <div className="grw-sidebar-content-header p-3 d-flex">
-          <h3 className="mb-0">{t('Recent Changes')}</h3>
-          {/* <h3 className="mb-0">{t('Recent Created')}</h3> */} {/* TODO: impl switching */}
-          <button type="button" className="btn btn-sm ml-auto grw-btn-reload-rc" onClick={this.reloadData}>
+          <h3 className="mb-0  text-nowrap">{t('Recent Changes')}</h3>
+          <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={this.reloadData}>
             <i className="icon icon-reload"></i>
           </button>
-          <div className="grw-recent-changes-resize-button custom-control custom-switch ml-2">
-            <input
-              id="recentChangesResize"
-              className="custom-control-input"
-              type="checkbox"
-              checked={this.state.isRecentChangesSidebarSmall}
-              onChange={this.changeSizeHandler}
-            />
-            <label className="custom-control-label" htmlFor="recentChangesResize">
-            </label>
+          <div className="d-flex align-items-center">
+            <div className="grw-recent-changes-resize-button custom-control custom-switch ml-1">
+              <input
+                id="recentChangesResize"
+                className="custom-control-input"
+                type="checkbox"
+                checked={this.state.isRecentChangesSidebarSmall}
+                onChange={this.changeSizeHandler}
+              />
+              <label className="custom-control-label" htmlFor="recentChangesResize">
+              </label>
+            </div>
           </div>
         </div>
         <div className="grw-sidebar-content-body grw-recent-changes p-3">

packages/app/src/styles/_recent-changes.scss

@@ -1,12 +1,8 @@
 .grw-sidebar-content-header {
-  .grw-btn-reload-rc {
-    font-size: 18px;
-  }
-
   .grw-recent-changes-resize-button {
     font-size: 12px;
     line-height: normal;
-    transform: translateY(6px);
+    transform: translateY(-2px);
 
     .custom-control-label::before {
       padding-left: 16px;

packages/app/src/styles/_sidebar.scss

@@ -135,7 +135,9 @@
   }
 
   .grw-sidebar-content-header {
-    min-width: $grw-sidebar-content-min-width + 20px;
+    .grw-btn-reload {
+      font-size: 18px;
+    }
   }
 }
 

packages/app/src/styles/_variables.scss

@@ -25,7 +25,6 @@ $grw-navbar-bottom-height: 48px;
 $grw-editor-navbar-bottom-height: 48px;
 
 $grw-sidebar-nav-width: 64px; // !!DO NOT CHANGE!! 'margin-left' for '.css-teprsg' is hardcoded
-$grw-sidebar-content-min-width: 240px;
 
 $grw-logo-width: $grw-sidebar-nav-width;
 $grw-logomark-width: 36px;

packages/app/src/styles/theme/_apply-colors.scss

@@ -15,8 +15,7 @@ $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
 $color-nav-tabs-link-active: $gray-600 !default;
 $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
 $color-seen-user: #549c79 !default;
-$reload-btn-rc-color: $gray-500;
-$reload-btn-cs-color: $gray-500;
+$color-btn-reload-in-sidebar: $gray-500;
 $bgcolor-keyword-highlighted: $grw-marker-yellow !default;
 
 // override bootstrap variables
@@ -268,11 +267,8 @@ ul.pagination {
   }
 
   .grw-sidebar-content-header {
-    .grw-btn-reload-rc {
-      color: $reload-btn-rc-color;
-    }
-    .grw-btn-reload-cs {
-      color: $reload-btn-cs-color;
+    .grw-btn-reload {
+      color: $color-btn-reload-in-sidebar;
     }
 
     .grw-recent-changes-resize-button {