Merge pull request #4207 from weseek/imprv/GW-6516-switch-button

Imprv/gw 6516 switch button

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

@@ -142,6 +142,18 @@ class RecentChanges extends React.Component {
           <button type="button" className="btn btn-sm ml-auto grw-btn-reload-rc" 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={}
+              // disabled={}
+              // onChange={e => userPreferenceSwitchModifiedHandler(e.target.checked)}
+            />
+            <label className="custom-control-label" htmlFor="recentChangesResize">
+            </label>
+          </div>
         </div>
         <div className="grw-sidebar-content-body grw-recent-changes p-3">
           <ul className="list-group list-group-flush">

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

@@ -2,6 +2,21 @@
   .grw-btn-reload-rc {
     font-size: 18px;
   }
+
+  .grw-recent-changes-resize-button {
+    font-size: 12px;
+    transform: translateY(4px);
+
+    .custom-control-input:not(:checked) + .custom-control-label::before {
+      padding-left: 16px;
+      content: 'L';
+    }
+
+    .custom-control-input:checked + .custom-control-label::before {
+      padding-left: 5px;
+      content: 'S';
+    }
+  }
 }
 
 .list-group {

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

@@ -273,6 +273,29 @@ ul.pagination {
     .grw-btn-reload-cs {
       color: $reload-btn-cs-color;
     }
+
+    .grw-recent-changes-resize-button {
+      .custom-control-label::before {
+        background-color: $primary;
+      }
+
+      .custom-control-label::after {
+        background-color: $bgcolor-global;
+      }
+
+      .custom-control-input:not(:checked) + .custom-control-label::before {
+        color: $bgcolor-global;
+      }
+
+      .custom-control-input:checked + .custom-control-label::before {
+        color: $bgcolor-global;
+        background-color: $primary;
+        // border-color: $primary !important;
+      }
+      .custom-control-input:checked + .custom-control-label::after {
+        color: $bgcolor-global;
+      }
+    }
   }
 
   .grw-recent-changes {