diff --git a/package.json b/package.json index 85e298f..65d8e95 100644 --- a/package.json +++ b/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", diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 9c59a17..cc5619a 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -78,17 +78,41 @@ export const WebdevHome: FC = () => { <> + + ) : isCurrentAppMode(AppMode.customize) ? ( <> + + diff --git a/src/components/Header/AppAction.tsx b/src/components/Header/AppAction.tsx index ac18dbb..05ceba2 100644 --- a/src/components/Header/AppAction.tsx +++ b/src/components/Header/AppAction.tsx @@ -5,6 +5,7 @@ import { MdiIcon } from '../Icon/MdiIcon' interface Props { icon: string active?: boolean + highlight?: boolean label?: string action: () => void } @@ -12,6 +13,7 @@ interface Props { export const AppAction: FC = ({ icon, active = false, + highlight = false, label, action, }) => { @@ -23,12 +25,19 @@ export const AppAction: FC = ({ '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}