refactor guest dropdown

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -33,7 +33,7 @@ const NavbarRight: FC<NavbarRightProps> = memo((props: NavbarRightProps) => {
   if (currentUser == null) {
     return (
       <>
-        <li className="nav-item dropdown dropdown-toggle dropdown-toggle-no-caret">
+        <li className="grw-personal-dropdown nav-item dropdown dropdown-toggle dropdown-toggle-no-caret">
           <GuestDropdown />
         </li>
         <li id="login-user" className="nav-item"><a className="nav-link" href="/login">Login</a></li>

packages/app/src/components/Navbar/GuestDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
@@ -13,9 +13,11 @@ const GuestDropdown = (): JSX.Element => {
 
   const { t } = useTranslation();
 
+  const [useOsSettings, setOsSettings] = useState(false);
+
   /* eslint-disable react/prop-types */
   const IconWithTooltip = ({
-    id, label, children, additionalClasses = null,
+    id, label, children, additionalClasses,
   }) => (
     <>
       <div id={id} className={`px-2 grw-icon-container ${additionalClasses != null ? additionalClasses : ''}`}>{children}</div>
@@ -38,7 +40,7 @@ const GuestDropdown = (): JSX.Element => {
         <form className="px-4">
           <div className="form-row justify-content-center">
             <div className="form-group col-auto mb-0 d-flex align-items-center">
-              <IconWithTooltip id="iwt-sidebar-drawer" label="Drawer">
+              <IconWithTooltip id="iwt-sidebar-drawer" label="Drawer" additionalClasses="grw-sidebar-mode-icon">
                 <SidebarDrawerIcon />
               </IconWithTooltip>
               <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
@@ -46,13 +48,11 @@ const GuestDropdown = (): JSX.Element => {
                   id="swSidebarMode"
                   className="custom-control-input"
                   type="checkbox"
-                  // checked={!isPreferDrawerMode}
-                  // onChange={e => preferDrawerModeSwitchModifiedHandler(!e.target.checked)}
                   onChange={() => console.log('changed!')}
                 />
                 <label className="custom-control-label" htmlFor="swSidebarMode"></label>
               </div>
-              <IconWithTooltip id="iwt-sidebar-dock" label="Dock">
+              <IconWithTooltip id="iwt-sidebar-dock" label="Dock" additionalClasses="grw-sidebar-mode-icon">
                 <SidebarDockIcon />
               </IconWithTooltip>
             </div>
@@ -64,25 +64,9 @@ const GuestDropdown = (): JSX.Element => {
         {/* color mode */}
         <h6 className="dropdown-header">{t('personal_dropdown.color_mode')}</h6>
         <form className="px-4">
-          <div className="form-row">
-            <div className="form-group col-auto">
-              <div className="custom-control custom-checkbox">
-                <input
-                  id="cbFollowOs"
-                  className="custom-control-input"
-                  type="checkbox"
-                  // checked={useOsSettings}
-                  // onChange={e => followOsCheckboxModifiedHandler(e.target.checked)}
-                  onChange={() => console.log('changed!')}
-                />
-                <label className="custom-control-label text-nowrap" htmlFor="cbFollowOs">{t('personal_dropdown.use_os_settings')}</label>
-              </div>
-            </div>
-          </div>
           <div className="form-row justify-content-center">
-            <div className="form-group col-auto mb-0 d-flex align-items-center">
-              {/* <IconWithTooltip id="iwt-light" label="Light" additionalClasses={useOsSettings ? 'grw-icon-container-muted' : ''}> */}
-              <IconWithTooltip id="iwt-light" label="Light">
+            <div className="form-group col-auto d-flex align-items-center">
+              <IconWithTooltip id="iwt-light" label="Light" additionalClasses={useOsSettings ? 'grw-color-mode-icon-muted' : 'grw-color-mode-icon'}>
                 <SunIcon />
               </IconWithTooltip>
               <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
@@ -90,19 +74,28 @@ const GuestDropdown = (): JSX.Element => {
                   id="swUserPreference"
                   className="custom-control-input"
                   type="checkbox"
-                  // checked={isDarkMode}
-                  // disabled={useOsSettings}
-                  // onChange={e => userPreferenceSwitchModifiedHandler(e.target.checked)}
                   onChange={() => console.log('changed!')}
                 />
                 <label className="custom-control-label" htmlFor="swUserPreference"></label>
               </div>
-              {/* <IconWithTooltip id="iwt-dark" label="Dark" additionalClasses={useOsSettings ? 'grw-icon-container-muted' : ''}> */}
-              <IconWithTooltip id="iwt-dark" label="Dark">
+              <IconWithTooltip id="iwt-dark" label="Dark" additionalClasses={useOsSettings ? 'grw-color-mode-icon-muted' : 'grw-color-mode-icon'}>
                 <MoonIcon />
               </IconWithTooltip>
             </div>
           </div>
+          <div className="form-row">
+            <div className="form-group col-auto">
+              <div className="custom-control custom-checkbox">
+                <input
+                  id="cbFollowOs"
+                  className="custom-control-input"
+                  type="checkbox"
+                  onChange={() => console.log('changed!')}
+                />
+                <label className="custom-control-label text-nowrap" htmlFor="cbFollowOs">{t('personal_dropdown.use_os_settings')}</label>
+              </div>
+            </div>
+          </div>
         </form>