From a3c1e5faf27ca7ff65ad1a594487c07df92e817d Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 17 Dec 2024 11:36:24 +0100
Subject: [PATCH] feat(wallet-dashboard): improve dark/light mode switcher
 (#4503)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: improve dark/light mode

* feat: cleanup

* enhancement: swap theme setting buttons positions

---------

Co-authored-by: Begoña Alvarez <balvarez@boxfish.studio>
---
 .../src/components/buttons}/ThemeSwitcher.tsx |  3 ++-
 apps/core/src/components/buttons/index.ts     |  1 +
 .../explorer/src/components/header/Header.tsx |  3 ++-
 apps/explorer/src/components/header/index.ts  |  1 -
 .../(protected)/components/top-nav/TopNav.tsx |  2 ++
 .../app/(protected)/layout.tsx                | 20 -------------------
 apps/wallet-dashboard/app/page.tsx            |  7 +++++--
 7 files changed, 12 insertions(+), 25 deletions(-)
 rename apps/{explorer/src/components/header => core/src/components/buttons}/ThemeSwitcher.tsx (89%)

diff --git a/apps/explorer/src/components/header/ThemeSwitcher.tsx b/apps/core/src/components/buttons/ThemeSwitcher.tsx
similarity index 89%
rename from apps/explorer/src/components/header/ThemeSwitcher.tsx
rename to apps/core/src/components/buttons/ThemeSwitcher.tsx
index b947cafe76c..922deb78957 100644
--- a/apps/explorer/src/components/header/ThemeSwitcher.tsx
+++ b/apps/core/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
index b7638e371ce..95938f61610 100644
--- 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
index a3b0cbcb00b..a2f95b165d5 100644
--- 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
index b23c1fae65a..8a717a10a0b 100644
--- 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
index 8dd5f01ca2b..2fe8eba32f3 100644
--- 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
index a77c8922ab9..72fa80c67cc 100644
--- 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
index 8901eec400a..e3036bf38c2 100644
--- 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">