-Removed the size specification from the icon component used in the personal dropdown.

-Create css class for icons used in personal dropdown.

src/client/js/components/Icons/MoonIcon.jsx

@@ -3,8 +3,6 @@ import React from 'react';
 const MoonIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="18"
-    height="18"
     viewBox="0 0 23 23"
   >
     <g transform="translate(-923.5 -688.5)">

src/client/js/components/Icons/SidebarDockIcon.jsx

@@ -3,8 +3,6 @@ import React from 'react';
 const SidebarDockIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="18"
-    height="18"
     viewBox="0 0 23 23"
   >
     <rect width="23" height="23" fillOpacity="0" />

src/client/js/components/Icons/SidebarDrawerIcon.jsx

@@ -3,8 +3,6 @@ import React from 'react';
 const SidebarDrawerIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="18"
-    height="18"
     viewBox="0 0 23 23"
   >
     <rect width="23" height="23" fillOpacity="0" />

src/client/js/components/Icons/SunIcon.jsx

@@ -3,8 +3,6 @@ import React from 'react';
 const SunIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="18"
-    height="18"
     viewBox="0 0 23 23"
   >
     <g transform="translate(-888.497 -688.492)">

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

@@ -87,26 +87,26 @@ const PersonalDropdown = (props) => {
   /* eslint-disable react/prop-types */
   const DrawerIcon = props => (
     <>
-      <div id={props.id} className="px-2 sidebar-mode-icon"><SidebarDrawerIcon /></div>
+      <div id={props.id} className="px-2"><SidebarDrawerIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Drawer</UncontrolledTooltip>
     </>
   );
   const DockIcon = props => (
     <>
-      <div id={props.id} className="px-2 sidebar-mode-icon"><SidebarDockIcon /></div>
+      <div id={props.id} className="px-2"><SidebarDockIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Dock</UncontrolledTooltip>
     </>
   );
 
   const LightIcon = props => (
     <>
-      <div id={props.id} className={`px-2 lightmode-icon ${useOsSettings ? 'use-os-settings' : ''}`}><SunIcon /></div>
+      <div id={props.id} className={`px-2 ${useOsSettings ? 'use-os-settings' : ''}`}><SunIcon /></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' : ''}`}><MoonIcon /></div>
+      <div id={props.id} className={`px-2 ${useOsSettings ? 'use-os-settings' : ''}`}><MoonIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Dark</UncontrolledTooltip>
     </>
   );
@@ -122,7 +122,7 @@ const PersonalDropdown = (props) => {
       </a>
 
       {/* Menu */}
-      <div className="dropdown-menu dropdown-menu-right">
+      <div className="dropdown-menu dropdown-menu-right personal-dropdown-icons">
 
         <div className="px-4 pt-3 pb-2 text-center">
           <UserPicture user={user} size="lg" noLink noTooltip />

src/client/styles/scss/_layout.scss

@@ -141,3 +141,10 @@ body {
     margin-left: 0.5em;
   }
 }
+
+.personal-dropdown-icons {
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}

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

@@ -80,15 +80,11 @@ pre:not(.hljs):not(.CodeMirror-line) {
 }
 
 .grw-personal-dropdown {
-  .lightmode-icon,
-  .darkmode-icon,
-  .sidebar-mode-icon {
+  .personal-dropdown-icons {
     fill: $color-global;
-  }
-
-  .lightmode-icon.use-os-settings,
-  .darkmode-icon.use-os-settings {
-    fill: $secondary;
+    .use-os-settings {
+      fill: $secondary;
+    }
   }
 }