- Refactor.

- FB compatible.

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

@@ -85,13 +85,13 @@ const PersonalDropdown = (props) => {
   /* eslint-disable react/prop-types */
   const DrawerIcon = props => (
     <>
-      <div id={props.id} className="px-2"><SidebarDrawerIcon /></div>
+      <div id={props.id} className="px-2 personal-dropdown svg"><SidebarDrawerIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Drawer</UncontrolledTooltip>
     </>
   );
   const DockIcon = props => (
     <>
-      <div id={props.id} className="px-2"><SidebarDockIcon /></div>
+      <div id={props.id} className="px-2 personal-dropdown svg"><SidebarDockIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Dock</UncontrolledTooltip>
     </>
   );

src/client/js/components/SidebarDockIcon.jsx

@@ -8,8 +8,8 @@ const SidebarDockIcon = () => (
     viewBox="0 0 23 23"
     className="sidebar-mode-icon"
   >
-    <rect className="icon-collision" width="23" height="23" />
-    <g className="personal-dropdown-icons">
+    <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,

src/client/js/components/SidebarDrawerIcon.jsx

@@ -7,8 +7,8 @@ const SidebarDrawerIcon = () => (
     height="18"
     viewBox="0 0 23 23"
   >
-    <rect className="icon-collision" width="23" height="23" />
-    <g className="personal-dropdown-icons">
+    <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"

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

@@ -88,6 +88,10 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
+.svg.personal-dropdown {
+  fill: $color-global;
+}
+
 // Form
 .form-control {
   @include form-control-focus();
@@ -424,11 +428,3 @@ mark.rbt-highlight-text {
 .bg-box {
   background-color: $bgcolor-global;
 }
-
-.icon-collision {
-  fill: transparent;
-}
-
-.personal-dropdown-icons {
-  fill: $color-global;
-}