Merge pull request #4172 from weseek/imprv/GW-7077-reload-icon

Imprv/gw 7077 reload icon

src/client/js/components/Sidebar/CustomSidebar.jsx

@@ -61,7 +61,7 @@ const CustomSidebar = (props) => {
           Custom Sidebar
           <a className="h6 ml-2" href="/Sidebar"><i className="icon-pencil"></i></a>
         </h3>
-        <button type="button" className="btn btn-sm btn-outline-secondary ml-auto" onClick={fetchDataAndRenderHtml}>
+        <button type="button" className="btn btn-sm ml-auto grw-btn-reload-cs" onClick={fetchDataAndRenderHtml}>
           <i className="icon icon-reload"></i>
         </button>
       </div>

src/client/js/components/Sidebar/RecentChanges.jsx

@@ -99,7 +99,6 @@ class RecentChanges extends React.Component {
       );
     });
 
-
     return (
       <li className="list-group-item py-3 px-0">
         <div className="d-flex w-100">
@@ -140,7 +139,7 @@ class RecentChanges extends React.Component {
         <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 btn-outline-secondary ml-auto" onClick={this.reloadData}>
+          <button type="button" className="btn btn-sm ml-auto grw-btn-reload-rc" onClick={this.reloadData}>
             <i className="icon icon-reload"></i>
           </button>
         </div>

src/client/styles/scss/_recent-changes.scss

@@ -1,3 +1,9 @@
+.grw-sidebar-content-header {
+  .grw-btn-reload-rc {
+    font-size: 18px;
+  }
+}
+
 .list-group {
   .list-group-item {
     .grw-recent-changes-item-lower {

src/client/styles/scss/theme/_apply-colors.scss

@@ -15,6 +15,8 @@ $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;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -264,6 +266,15 @@ 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-recent-changes {
     .list-group {
       .list-group-item {