Merge pull request #2600 from weseek/imprv/add-icons-light-and-dark

Imprv/add icons light and dark

src/client/js/components/DarkModeIcon.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const DarkModeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 23 23"
+  >
+    <g transform="translate(-923.5 -688.5)">
+      <rect width="23" height="23" fill="none" transform="translate(923.5 688.5)" />
+      {/* <g className="darkmode-icon"> */}
+      <path d="M934.893,710.532a10.646,10.646,0,0,1-10.378-8.416.7.7,0,0,1,1.138-.686,
+       7.621,7.621,0,0,0,10.721-10.744.7.7,0,0,1,.683-1.14,10.6,10.6,0,0,1-2.164,
+        20.986Zm-8.417-6.9A9.2,9.2,0,1,0,938.583,691.5a9.028,9.028,0,0,1-12.107,12.133Z"
+      />
+      {/* </g> */}
+    </g>
+  </svg>
+
+);
+
+
+export default DarkModeIcon;

src/client/js/components/LightModeIcon.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const LightModeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 23 23"
+  >
+    <g transform="translate(-888.497 -688.492)">
+      <rect width="23" height="23" transform="translate(888.503 688.509)" fillOpacity="0" />
+      <path d="M900,695.489a4.5,4.5,0,1,1-4.5,4.5,4.5,4.5,0,0,1,4.5-4.5m0-1.408a5.9,5.9,0,1,0,5.9,5.9,5.91,5.91,0,0,0-5.9-5.9Z" />
+      <path d="M893.968,694.573a.6.6,0,0,1-.426-.176l-1.681-1.681a.6.6,0,0,1,.853-.852l1.681,1.68a.6.6,0,0,1-.427,1.029Z" />
+      <path d="M907.707,708.295a.6.6,0,0,1-.427-.177l-1.681-1.68a.6.6,0,0,1,.854-.853l1.68,1.681a.6.6,0,0,1-.426,1.029Z" />
+
+      <path d="M899.991,692.074a.6.6,0,0,1-.6-.6v-2.377a.6.6,0,0,1,1.206,0v2.377A.6.6,0,0,1,899.991,692.074Z" />
+      <path d="M900,711.491a.6.6,0,0,1-.6-.6v-2.377a.6.6,0,1,1,1.206,0v2.377A.6.6,0,0,1,900,711.491Z" />
+
+      <path d="M906.017,694.564a.6.6,0,0,1-.426-1.029l1.68-1.68a.6.6,0,0,1,.853.854l-1.68,1.68A.6.6,0,0,1,906.017,694.564Z" />
+      <path d="M892.3,708.3a.6.6,0,0,1-.426-1.029l1.68-1.681a.6.6,0,1,1,.853.852l-1.68,1.681A.6.6,0,0,1,892.3,708.3Z" />
+
+      <path d="M910.894,700.587h-2.377a.6.6,0,1,1,0-1.2h2.377a.6.6,0,1,1,0,1.2Z" />
+      <path d="M891.477,700.6H889.1a.6.6,0,1,1,0-1.2h2.377a.6.6,0,1,1,0,1.2Z" />
+    </g>
+  </svg>
+
+);
+
+
+export default LightModeIcon;

src/client/js/components/Navbar/PersonalDropdown.jsx

@@ -22,6 +22,8 @@ import UserPicture from '../User/UserPicture';
 
 import SidebarDrawerIcon from '../SidebarDrawerIcon';
 import SidebarDockIcon from '../SidebarDockIcon';
+import DarkModeIcon from '../DarkModeIcon';
+import LightModeIcon from '../LightModeIcon';
 
 
 const PersonalDropdown = (props) => {
@@ -95,7 +97,20 @@ const PersonalDropdown = (props) => {
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Dock</UncontrolledTooltip>
     </>
   );
-  /* eslint-enable react/prop-types */
+
+  const LightIcon = props => (
+    <>
+      <div id={props.id} className={`px-2 lightmode-icon ${useOsSettings ? 'use-os-settings' : ''}`}><LightModeIcon /></div>
+      <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Light</UncontrolledTooltip>
+    </>
+  );
+  const DarkIcon = props => (
+    <>
+      <div id={props.id} className={`px-2 darkmode-icon ${useOsSettings ? 'use-os-settings' : ''}`}><DarkModeIcon /></div>
+      <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Dark</UncontrolledTooltip>
+    </>
+  );
+
 
   return (
     <>
@@ -192,7 +207,7 @@ const PersonalDropdown = (props) => {
           </div>
           <div className="form-row justify-content-center">
             <div className="form-group col-auto mb-0 d-flex align-items-center">
-              <span className={useOsSettings ? '' : 'text-muted'}>Light</span>
+              <LightIcon id="icon-prefer-light" />
               <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
                 <input
                   id="swUserPreference"
@@ -204,7 +219,7 @@ const PersonalDropdown = (props) => {
                 />
                 <label className="custom-control-label" htmlFor="swUserPreference"></label>
               </div>
-              <span className={useOsSettings ? '' : 'text-muted'}>Dark</span>
+              <DarkIcon id="icon-prefer-dark" />
             </div>
           </div>
         </form>

src/client/js/components/SidebarDockIcon.jsx

@@ -6,9 +6,8 @@ const SidebarDockIcon = () => (
     width="18"
     height="18"
     viewBox="0 0 23 23"
-    className="sidebar-mode-icon"
   >
-    <rect className="icon-collision" width="23" height="23" fillOpacity="0" />
+    <rect width="23" height="23" fillOpacity="0" />
     <g className="sidebar-dock-icon">
       <path
         d="M20.86,3.92a.64.64,0,0,1,.64.63v13.9a.64.64,0,0,1-.64.63H2.14a.64.64,0,0,

src/client/js/components/SidebarDrawerIcon.jsx

@@ -7,7 +7,7 @@ const SidebarDrawerIcon = () => (
     height="18"
     viewBox="0 0 23 23"
   >
-    <rect className="icon-collision" width="23" height="23" fillOpacity="0" />
+    <rect width="23" height="23" fillOpacity="0" />
     <g className="sidebar-drawer-icon">
       <path d="M20.9,3.9c0.3,0,0.6,0.3,0.6,0.6v13.9c0,0.3-0.3,0.6-0.6,0.6H2.1c-0.3,0-0.6-0.3-0.6-0.6V4.5c0-0.3,0.3-0.6,0.6-0.6H20.9
         M20.9,2.4H2.1C1,2.4,0,3.4,0,4.5c0,0,0,0,0,0v13.9c0,1.2,1,2.1,2.1,2.1c0,0,0,0,0,0h18.7c1.2,0,2.1-0.9,2.1-2.1c0,0,0,0,0,0V4.5

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

@@ -80,10 +80,17 @@ pre:not(.hljs):not(.CodeMirror-line) {
 }
 
 .grw-personal-dropdown {
+  .lightmode-icon,
+  .darkmode-icon,
   .sidebar-dock-icon,
   .sidebar-drawer-icon {
     fill: $color-global;
   }
+
+  .lightmode-icon.use-os-settings,
+  .darkmode-icon.use-os-settings {
+    fill: $secondary;
+  }
 }
 
 .dropdown-item {