Merge pull request #49 from webdevhome/always-show-settings

Always show settings in header

Author: alinnert

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webdevhome.github.io-vite",
-  "version": "2.0.21",
+  "version": "2.0.22",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

src/components/App/App.tsx

@@ -78,17 +78,41 @@ export const WebdevHome: FC = () => {
                 <>
                   <AppAction
                     icon={mdiArrowLeft}
-                    active
                     label="Back"
+                    highlight
                     action={searchMode.handleSearchAction}
                   />
+                  <AppAction
+                    icon={themeSwitcher.icon}
+                    active={false}
+                    label={themeSwitcher.title}
+                    action={themeSwitcher.switchTheme}
+                  />
+                  <AppAction
+                    icon={mdiStickerTextOutline}
+                    active={toggleDescriptions.showDescriptions}
+                    label="Descriptions"
+                    action={toggleDescriptions.toggle}
+                  />
                 </>
               ) : isCurrentAppMode(AppMode.customize) ? (
                 <>
+                  <AppAction
+                    icon={themeSwitcher.icon}
+                    active={false}
+                    label={themeSwitcher.title}
+                    action={themeSwitcher.switchTheme}
+                  />
+                  <AppAction
+                    icon={mdiStickerTextOutline}
+                    active={toggleDescriptions.showDescriptions}
+                    label="Descriptions"
+                    action={toggleDescriptions.toggle}
+                  />
                   <AppAction
                     icon={mdiCheck}
-                    active
-                    label="Done"
+                    label="Save"
+                    highlight
                     action={customizeMode.handleCustomizeAction}
                   />
                 </>

src/components/Header/AppAction.tsx

@@ -5,13 +5,15 @@ import { MdiIcon } from '../Icon/MdiIcon'
 interface Props {
   icon: string
   active?: boolean
+  highlight?: boolean
   label?: string
   action: () => void
 }
 
 export const AppAction: FC<Props> = ({
   icon,
   active = false,
+  highlight = false,
   label,
   action,
 }) => {
@@ -23,12 +25,19 @@ export const AppAction: FC<Props> = ({
         'rounded-md',
         'select-none',
         {
-          'hover:bg-gray-200 active:bg-gray-300': !active,
-          'bg-brand-500 hover:bg-brand-600 active:bg-brand-700': active,
-          'dark:hover:bg-gray-600 dark:active:bg-gray-500': !active,
-          'dark:hover:bg-brand-600 dark:active:bg-brand-700': active,
-          'text-white': active,
-          'text-gray-800 dark:text-gray-100': !active,
+          'hover:bg-gray-200 active:bg-gray-300': !active && !highlight,
+          'bg-brand-500 hover:bg-brand-600 active:bg-brand-700':
+            active && !highlight,
+          'bg-black/10 hover:bg-black/20 active:bg-black/30': highlight,
+          'dark:hover:bg-gray-600 dark:active:bg-gray-500':
+            !active && !highlight,
+          'dark:hover:bg-brand-600 dark:active:bg-brand-700':
+            active && !highlight,
+          'dark:bg-white/10 dark:hover:bg-white/20 dark:active:bg-white/30':
+            highlight,
+          'text-white': active && !highlight,
+          'text-gray-800 dark:text-gray-100': !active && !highlight,
+          'text-brand-600 dark:text-brand-400': highlight,
         },
       )}
       onClick={action}