feat(wallet-dashboard): improve dark/light mode switcher (#4503)

* feat: improve dark/light mode * feat: cleanup * enhancement: swap theme setting buttons positions --------- Co-authored-by: Begoña Alvarez <[email protected]>
iotaledger · Dec 17, 2024 · a3c1e5f · a3c1e5f
1 parent c0f4668
commit a3c1e5f
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 25 deletions.
diff --git a/...r/src/components/header/ThemeSwitcher.tsx → .../src/components/buttons/ThemeSwitcher.tsx b/...r/src/components/header/ThemeSwitcher.tsx → .../src/components/buttons/ThemeSwitcher.tsx
@@ -3,7 +3,8 @@
 
 import { Button, ButtonType } from '@iota/apps-ui-kit';
 import { DarkMode, LightMode } from '@iota/ui-icons';
-import { useTheme, Theme, ThemePreference } from '@iota/core';
+import { Theme, ThemePreference } from '../../enums';
+import { useTheme } from '../../hooks';
 
 export function ThemeSwitcher(): React.JSX.Element {
     const { theme, themePreference, setThemePreference } = useTheme();

diff --git a/apps/core/src/components/buttons/index.ts b/apps/core/src/components/buttons/index.ts
@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './ViewTxnOnExplorerButton';
+export * from './ThemeSwitcher';
diff --git a/apps/explorer/src/components/header/Header.tsx b/apps/explorer/src/components/header/Header.tsx
@@ -5,7 +5,8 @@
 import { NetworkSelector } from '../network';
 import Search from '../search/Search';
 import { LinkWithQuery } from '~/components/ui';
-import { ThemeSwitcher, ThemedIotaLogo } from '~/components';
+import { ThemedIotaLogo } from '~/components';
+import { ThemeSwitcher } from '@iota/core';
 
 function Header(): JSX.Element {
     return (

diff --git a/apps/explorer/src/components/header/index.ts b/apps/explorer/src/components/header/index.ts
@@ -2,4 +2,3 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './Header';
-export * from './ThemeSwitcher';
diff --git a/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx b/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Badge, BadgeType, Button, ButtonType } from '@iota/apps-ui-kit';
+import { ThemeSwitcher } from '@iota/core';
 import { ConnectButton } from '@iota/dapp-kit';
 import { Settings } from '@iota/ui-icons';
 
@@ -10,6 +11,7 @@ export function TopNav() {
         <div className="flex w-full flex-row items-center justify-end gap-md py-xs--rs">
             <Badge label="Mainnet" type={BadgeType.PrimarySoft} />
             <ConnectButton size="md" />
+            <ThemeSwitcher />
             <Button icon={<Settings />} type={ButtonType.Ghost} />
         </div>
     );

diff --git a/apps/wallet-dashboard/app/(protected)/layout.tsx b/apps/wallet-dashboard/app/(protected)/layout.tsx
@@ -4,21 +4,9 @@
 
 import { Notifications } from '@/components/index';
 import React, { type PropsWithChildren } from 'react';
-import { Button } from '@iota/apps-ui-kit';
 import { Sidebar, TopNav } from './components';
-import { ThemePreference, useTheme } from '@iota/core';
 
 function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
-    const { theme, themePreference, setThemePreference } = useTheme();
-
-    const toggleTheme = () => {
-        const newTheme =
-            themePreference === ThemePreference.Light
-                ? ThemePreference.Dark
-                : ThemePreference.Light;
-        setThemePreference(newTheme);
-    };
-
     return (
         <div className="min-h-full">
             <div className="fixed left-0 top-0 z-50 h-full">
@@ -34,14 +22,6 @@ function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
                     <div className="flex-1 py-md--rs">{children}</div>
                 </div>
             </div>
-
-            <div className="fixed bottom-5 right-5">
-                <Button
-                    onClick={toggleTheme}
-                    text={`${theme === 'dark' ? 'Light' : 'Dark'} mode`}
-                />
-            </div>
-
             <Notifications />
         </div>
     );

diff --git a/apps/wallet-dashboard/app/page.tsx b/apps/wallet-dashboard/app/page.tsx
@@ -7,7 +7,7 @@ import { ConnectButton, useCurrentWallet, useAutoConnectWallet } from '@iota/dap
 import { redirect } from 'next/navigation';
 import { IotaLogoWeb } from '@iota/ui-icons';
 import { HOMEPAGE_ROUTE } from '@/lib/constants/routes.constants';
-import { Theme, useTheme } from '@iota/core';
+import { Theme, ThemeSwitcher, useTheme } from '@iota/core';
 import { LoadingIndicator } from '@iota/apps-ui-kit';
 
 function HomeDashboardPage(): JSX.Element {
@@ -44,7 +44,10 @@ function HomeDashboardPage(): JSX.Element {
                             disableRemotePlayback
                         ></video>
                     </div>
-                    <div className="flex h-full w-full flex-col items-center justify-between p-md sm:p-2xl">
+                    <div className="relative flex h-full w-full flex-col items-center justify-between p-md sm:p-2xl">
+                        <div className="absolute right-2 top-2 sm:right-8 sm:top-8">
+                            <ThemeSwitcher />
+                        </div>
                         <IotaLogoWeb width={130} height={32} />
                         <div className="flex max-w-sm flex-col items-center gap-8 text-center">
                             <div className="flex flex-col items-center gap-4">
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@
		// SPDX-License-Identifier: Apache-2.0

		export * from './ViewTxnOnExplorerButton';
		export * from './ThemeSwitcher';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,3 @@
		// SPDX-License-Identifier: Apache-2.0

		export * from './Header';
		export * from './ThemeSwitcher';