Merge pull request #2590 from weseek/imprv/add-icons-sidebar-mode

Imprv/add icons sidebar mode

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

@@ -20,6 +20,10 @@ import {
 
 import UserPicture from '../User/UserPicture';
 
+import SidebarDrawerIcon from '../SidebarDrawerIcon';
+import SidebarDockIcon from '../SidebarDockIcon';
+
+
 const PersonalDropdown = (props) => {
 
   const { t, appContainer, navigationContainer } = props;
@@ -81,13 +85,13 @@ const PersonalDropdown = (props) => {
   /* eslint-disable react/prop-types */
   const DrawerIcon = props => (
     <>
-      <i id={props.id} className="icon-drawer px-2"></i>
+      <div id={props.id} className="px-2 sidebar-drawer-icon"><SidebarDrawerIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Drawer</UncontrolledTooltip>
     </>
   );
   const DockIcon = props => (
     <>
-      <i id={props.id} className="ti-layout-sidebar-left px-2"></i>
+      <div id={props.id} className="px-2 sidebar-dock-icon"><SidebarDockIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Dock</UncontrolledTooltip>
     </>
   );

src/client/js/components/SidebarDockIcon.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const SidebarDockIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 23 23"
+    className="sidebar-mode-icon"
+  >
+    <rect className="icon-collision" 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,
+        1-.64-.63V4.55a.64.64,0,0,1,.64-.63H20.86m0-1.5H2.14A2.13,2.13,0,0,0,0,4.55v13.9a2.13,
+        2.13,0,0,0,2.14,2.13H20.86A2.13,2.13,0,0,0,23,18.45V4.55a2.13,2.13,0,0,0-2.14-2.13Z"
+      />
+      <rect x="7.49" y="3.05" width="1.2" height="16.91" />
+    </g>
+  </svg>
+
+);
+
+
+export default SidebarDockIcon;

src/client/js/components/SidebarDrawerIcon.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+const SidebarDrawerIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 23 23"
+  >
+    <rect className="icon-collision" 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
+        C23,3.4,22,2.4,20.9,2.4C20.9,2.4,20.9,2.4,20.9,2.4z"
+      />
+      <rect x="7.5" y="3.9" width="1.2" height="0.8" />
+      <rect x="7.5" y="15.3" width="1.2" height="1.5" />
+      <rect x="7.5" y="12.3" width="1.2" height="1.5" />
+      <rect x="7.5" y="9.2" width="1.2" height="1.6" />
+      <rect x="7.5" y="6.1" width="1.2" height="1.6" />
+      <rect x="7.5" y="18.4" width="1.2" height="0.8" />
+      <path d="M15.1,14.9c-0.2,0-0.3-0.1-0.4-0.2l-2.8-2.8c-0.2-0.2-0.2-0.6,0-0.8l2.8-2.8c0.2-0.2,0.6-0.2,0.9,0s0.2,0.6,0,0.9l-2.4,2.4
+        l2.4,2.4c0.2,0.2,0.2,0.6,0,0.9C15.4,14.8,15.3,14.9,15.1,14.9z"
+      />
+    </g>
+  </svg>
+);
+
+export default SidebarDrawerIcon;

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

@@ -79,6 +79,13 @@ pre:not(.hljs):not(.CodeMirror-line) {
   color: $color-global;
 }
 
+.grw-personal-dropdown {
+  .sidebar-dock-icon,
+  .sidebar-drawer-icon {
+    fill: $color-global;
+  }
+}
+
 .dropdown-item {
   color: $color-global;
   &.active,