From 3ed9c132fc0e52fc256dd6e2fcabe2191373d055 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Mon, 25 Nov 2024 19:41:40 +0100
Subject: [PATCH 1/7] feat(explorer): add theme switcher (#4041)

* feat(explorer): add theme switcher

* fix: add missing style to the icon

* fix: lint

* refactor: remove theme context from explorer

* feat(explorer): add background to search suggestions (#4162)

* feat(explorer): add backgrounds to the search suggestions

* refactor: add styles to search ui kit

* revert changes

* fix: remove unnecessary backdrop-blur

* fix: remove map

* feat(explorer): add darkmode support to epoch page (#4160)

* feat: polish darkmode

* fix format

* feat: update imports

* feat(explorer): improve darkmode colors for transaction page (#4158)

* feat(explorer): improve darkmode colors for transaction page

* feat: add button to the split panes

---------

Co-authored-by: evavirseda <evirseda@boxfish.studio>
---
 .../src/components/ThemedIotaLogo.tsx         |  8 +++
 .../explorer/src/components/footer/Footer.tsx | 12 ++---
 .../components/gas-breakdown/GasBreakdown.tsx | 10 ++--
 .../explorer/src/components/header/Header.tsx | 12 +++--
 .../src/components/header/ThemeSwitcher.tsx   | 53 +++++++++++++++++++
 apps/explorer/src/components/header/index.ts  |  1 +
 apps/explorer/src/components/index.ts         |  1 +
 .../explorer/src/components/layout/Layout.tsx | 10 ++--
 .../src/components/layout/PageLayout.tsx      |  2 +-
 .../components/module/PkgModulesWrapper.tsx   |  2 +-
 .../components/object/ObjectFieldsCard.tsx    |  2 +-
 .../explorer/src/components/search/Search.tsx |  2 +-
 .../transactions/ProgTxnBlockCard.tsx         |  2 +-
 .../src/components/ui/ProgressBar.tsx         |  4 +-
 apps/explorer/src/components/ui/RingChart.tsx |  6 ++-
 .../explorer/src/components/ui/SplitPanes.tsx | 34 +++++-------
 .../ui/collapsible/CollapsibleCard.tsx        |  4 +-
 apps/explorer/src/index.css                   |  8 +++
 .../explorer/src/pages/epochs/EpochDetail.tsx |  8 +--
 .../pages/epochs/stats/ValidatorStatus.tsx    | 19 +++++--
 .../Transaction.tsx                           |  2 +-
 .../transaction-summary/BalanceChanges.tsx    |  3 +-
 apps/explorer/tailwind.config.ts              |  1 +
 .../components/molecules/search/Search.tsx    |  2 +-
 24 files changed, 147 insertions(+), 61 deletions(-)
 create mode 100644 apps/explorer/src/components/ThemedIotaLogo.tsx
 create mode 100644 apps/explorer/src/components/header/ThemeSwitcher.tsx

diff --git a/apps/explorer/src/components/ThemedIotaLogo.tsx b/apps/explorer/src/components/ThemedIotaLogo.tsx
new file mode 100644
index 00000000000..71a42a49a8d
--- /dev/null
+++ b/apps/explorer/src/components/ThemedIotaLogo.tsx
@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { IotaLogoWeb } from '@iota/ui-icons';
+
+export function ThemedIotaLogo(): React.JSX.Element {
+    return <IotaLogoWeb className="text-neutral-10 dark:text-neutral-92" width={137} height={36} />;
+}
diff --git a/apps/explorer/src/components/footer/Footer.tsx b/apps/explorer/src/components/footer/Footer.tsx
index e5f17ca794f..b9ec00af211 100644
--- a/apps/explorer/src/components/footer/Footer.tsx
+++ b/apps/explorer/src/components/footer/Footer.tsx
@@ -4,9 +4,9 @@
 
 import { Divider } from '@iota/apps-ui-kit';
 import { LegalLinks, LegalText } from './Legal';
-import { IotaLogoWeb } from '@iota/ui-icons';
 import { Link } from '~/components/ui';
 import { FOOTER_LINKS } from '~/lib/constants';
+import { ThemedIotaLogo } from '../ThemedIotaLogo';
 
 function FooterLinks(): JSX.Element {
     return (
@@ -26,11 +26,11 @@ function FooterLinks(): JSX.Element {
 
 function Footer(): JSX.Element {
     return (
-        <footer className="sticky top-[100%] bg-neutral-96 px-5 py-10 md:px-10 md:py-14">
+        <footer className="sticky top-[100%] px-5 py-10 md:px-10 md:py-14">
             <nav className="container flex flex-col justify-center gap-md md:gap-lg">
                 <div className="flex flex-col-reverse items-center gap-7.5 md:flex-row md:justify-between ">
-                    <div className="hidden self-center text-neutral-10 md:flex md:self-start">
-                        <IotaLogoWeb width={137} height={36} />
+                    <div className="hidden self-center md:flex md:self-start">
+                        <ThemedIotaLogo />
                     </div>
                     <div>
                         <FooterLinks />
@@ -42,8 +42,8 @@ function Footer(): JSX.Element {
                     <LegalLinks />
                 </div>
             </nav>
-            <div className="mt-4 flex justify-center pt-5 text-neutral-10 md:hidden md:self-start">
-                <IotaLogoWeb width={137} height={36} />
+            <div className="mt-4 flex justify-center pt-5 md:hidden md:self-start">
+                <ThemedIotaLogo />
             </div>
             <p className="mt-8 w-full text-center text-body-sm text-neutral-40">{EXPLORER_REV}</p>
         </footer>
diff --git a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
index c10f8ddb00b..ae04b54ddf8 100644
--- a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
+++ b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
@@ -57,13 +57,13 @@ function GasPaymentLinks({ objectIds }: { objectIds: string[] }): JSX.Element {
 function GasInfo({ label, info }: { label: string; info?: React.ReactNode }) {
     return (
         <div className="flex flex-col gap-2 md:flex-row md:gap-10">
-            <span className="w-full flex-shrink-0 text-label-lg text-neutral-40 dark:text-neutral-60 md:w-40">
+            <span className="w-full flex-shrink-0 text-label-lg text-neutral-40 md:w-40 dark:text-neutral-60">
                 {label}
             </span>
             {info ? (
                 info
             ) : (
-                <span className="text-label-lg text-neutral-40 dark:text-neutral-60 md:w-40">
+                <span className="text-label-lg text-neutral-40 md:w-40 dark:text-neutral-60">
                     --
                 </span>
             )}
@@ -91,7 +91,11 @@ export function GasBreakdown({ summary }: GasBreakdownProps): JSX.Element | null
     const isSponsored = gasData.isSponsored;
 
     return (
-        <CollapsibleCard collapsible render={({ isOpen }) => <Title title="Gas & Storage Fee" />}>
+        <CollapsibleCard
+            collapsible
+            render={({ isOpen }) => <Title title="Gas & Storage Fee" />}
+            hideBorder
+        >
             <div className="px-md--rs pb-lg pt-xs">
                 <Accordion hideBorder>
                     <AccordionContent isExpanded>
diff --git a/apps/explorer/src/components/header/Header.tsx b/apps/explorer/src/components/header/Header.tsx
index b37dd80bbbd..a3b0cbcb00b 100644
--- a/apps/explorer/src/components/header/Header.tsx
+++ b/apps/explorer/src/components/header/Header.tsx
@@ -2,27 +2,29 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { IotaLogoWeb } from '@iota/ui-icons';
-
 import { NetworkSelector } from '../network';
 import Search from '../search/Search';
 import { LinkWithQuery } from '~/components/ui';
+import { ThemeSwitcher, ThemedIotaLogo } from '~/components';
 
 function Header(): JSX.Element {
     return (
-        <header className="flex h-header justify-center overflow-visible bg-neutral-98">
+        <header className="flex h-header justify-center overflow-visible backdrop-blur-lg">
             <div className="container flex h-full flex-1 items-center justify-between gap-5">
                 <LinkWithQuery
                     data-testid="nav-logo-button"
                     to="/"
                     className="flex flex-nowrap items-center gap-1 text-neutral-10"
                 >
-                    <IotaLogoWeb width={137} height={36} />
+                    <ThemedIotaLogo />
                 </LinkWithQuery>
                 <div className="flex w-[360px] justify-center">
                     <Search />
                 </div>
-                <NetworkSelector />
+                <div className="flex flex-row gap-xs">
+                    <ThemeSwitcher />
+                    <NetworkSelector />
+                </div>
             </div>
         </header>
     );
diff --git a/apps/explorer/src/components/header/ThemeSwitcher.tsx b/apps/explorer/src/components/header/ThemeSwitcher.tsx
new file mode 100644
index 00000000000..d8dc4c2fb24
--- /dev/null
+++ b/apps/explorer/src/components/header/ThemeSwitcher.tsx
@@ -0,0 +1,53 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button, ButtonType } from '@iota/apps-ui-kit';
+import { DarkMode, LightMode } from '@iota/ui-icons';
+import { useEffect, useLayoutEffect } from 'react';
+import { useTheme, Theme } from '@iota/core';
+
+export function ThemeSwitcher(): React.JSX.Element {
+    const { theme, setTheme } = useTheme();
+
+    const ThemeIcon = theme === Theme.Dark ? DarkMode : LightMode;
+
+    function handleOnClick(): void {
+        const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+        setTheme(newTheme);
+        saveThemeToLocalStorage(newTheme);
+    }
+
+    function saveThemeToLocalStorage(newTheme: Theme): void {
+        localStorage.setItem('theme', newTheme);
+    }
+
+    function updateDocumentClass(theme: Theme): void {
+        document.documentElement.classList.toggle('dark', theme === Theme.Dark);
+    }
+
+    useLayoutEffect(() => {
+        const storedTheme = localStorage.getItem('theme') as Theme | null;
+        if (storedTheme) {
+            setTheme(storedTheme);
+            updateDocumentClass(storedTheme);
+        } else {
+            const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const preferredTheme = prefersDarkTheme ? Theme.Dark : Theme.Light;
+
+            setTheme(preferredTheme);
+            updateDocumentClass(preferredTheme);
+        }
+    }, []);
+
+    useEffect(() => {
+        updateDocumentClass(theme);
+    }, [theme]);
+
+    return (
+        <Button
+            type={ButtonType.Ghost}
+            onClick={handleOnClick}
+            icon={<ThemeIcon className="h-5 w-5" />}
+        />
+    );
+}
diff --git a/apps/explorer/src/components/header/index.ts b/apps/explorer/src/components/header/index.ts
index 8a717a10a0b..b23c1fae65a 100644
--- a/apps/explorer/src/components/header/index.ts
+++ b/apps/explorer/src/components/header/index.ts
@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './Header';
+export * from './ThemeSwitcher';
diff --git a/apps/explorer/src/components/index.ts b/apps/explorer/src/components/index.ts
index 2aaba9c112f..772dce10e38 100644
--- a/apps/explorer/src/components/index.ts
+++ b/apps/explorer/src/components/index.ts
@@ -29,3 +29,4 @@ export * from './AreaGraph';
 export * from './GraphTooltipContent';
 export * from './IotaTokenCard';
 export * from './TransactionsCardGraph';
+export * from './ThemedIotaLogo';
diff --git a/apps/explorer/src/components/layout/Layout.tsx b/apps/explorer/src/components/layout/Layout.tsx
index 3148f469ab8..e812b62240d 100644
--- a/apps/explorer/src/components/layout/Layout.tsx
+++ b/apps/explorer/src/components/layout/Layout.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { KioskClientProvider, useCookieConsentBanner } from '@iota/core';
+import { KioskClientProvider, useCookieConsentBanner, ThemeProvider } from '@iota/core';
 import { IotaClientProvider, WalletProvider } from '@iota/dapp-kit';
 import type { Network } from '@iota/iota-sdk/client';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -39,9 +39,11 @@ export function Layout(): JSX.Element {
                 <WalletProvider autoConnect enableUnsafeBurner={import.meta.env.DEV}>
                     <KioskClientProvider>
                         <NetworkContext.Provider value={[network, setNetwork]}>
-                            <Outlet />
-                            <Toaster />
-                            <ReactQueryDevtools />
+                            <ThemeProvider appId="iota-explorer">
+                                <Outlet />
+                                <Toaster />
+                                <ReactQueryDevtools />
+                            </ThemeProvider>
                         </NetworkContext.Provider>
                     </KioskClientProvider>
                 </WalletProvider>
diff --git a/apps/explorer/src/components/layout/PageLayout.tsx b/apps/explorer/src/components/layout/PageLayout.tsx
index 9602bad3c85..8b8192d799e 100644
--- a/apps/explorer/src/components/layout/PageLayout.tsx
+++ b/apps/explorer/src/components/layout/PageLayout.tsx
@@ -44,7 +44,7 @@ export function PageLayout({ content, loading }: PageLayoutProps): JSX.Element {
             : "The explorer is running slower than usual. We're working to fix the issue and appreciate your patience.";
 
     return (
-        <div className="relative min-h-screen w-full bg-neutral-98">
+        <div className="relative min-h-screen w-full">
             <section ref={headerRef} className="fixed top-0 z-20 flex w-full flex-col">
                 {renderNetworkDegradeBanner && (
                     <InfoBox
diff --git a/apps/explorer/src/components/module/PkgModulesWrapper.tsx b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
index 7ab2bf326f9..f395ed43a16 100644
--- a/apps/explorer/src/components/module/PkgModulesWrapper.tsx
+++ b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
@@ -115,7 +115,7 @@ export function PkgModulesWrapper({
                         isLoading={false}
                         suggestions={searchSuggestions}
                         renderSuggestion={(suggestion) => (
-                            <div className="z-10 flex cursor-pointer justify-between bg-neutral-98">
+                            <div className="z-10 flex cursor-pointer justify-between">
                                 <ListItem
                                     hideBottomBorder
                                     onClick={() => onChangeModule(suggestion.label)}
diff --git a/apps/explorer/src/components/object/ObjectFieldsCard.tsx b/apps/explorer/src/components/object/ObjectFieldsCard.tsx
index c6e2e8213bf..1f84395a840 100644
--- a/apps/explorer/src/components/object/ObjectFieldsCard.tsx
+++ b/apps/explorer/src/components/object/ObjectFieldsCard.tsx
@@ -151,7 +151,7 @@ export function ObjectFieldsCard({
                                     }}
                                     isLoading={false}
                                     renderSuggestion={(suggestion) => (
-                                        <div className="flex cursor-pointer justify-between bg-neutral-98">
+                                        <div className="flex cursor-pointer justify-between">
                                             <ListItem hideBottomBorder>
                                                 <div className="overflow-hidden text-ellipsis">
                                                     {suggestion.label}
diff --git a/apps/explorer/src/components/search/Search.tsx b/apps/explorer/src/components/search/Search.tsx
index 36a9bedadaf..989f602b49f 100644
--- a/apps/explorer/src/components/search/Search.tsx
+++ b/apps/explorer/src/components/search/Search.tsx
@@ -46,7 +46,7 @@ function Search(): JSX.Element {
             isLoading={isPending || debouncedQuery !== query}
             suggestions={results}
             renderSuggestion={(suggestion) => (
-                <div className="flex cursor-pointer justify-between bg-neutral-98">
+                <div className="flex cursor-pointer justify-between">
                     <ListItem hideBottomBorder>
                         <div className="overflow-hidden text-ellipsis">{suggestion.label}</div>
                         <div className="break-words pl-xs text-caption font-medium uppercase text-steel">
diff --git a/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx b/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx
index 6d52b6e1212..a2610bf9471 100644
--- a/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx
+++ b/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx
@@ -35,7 +35,7 @@ export function ProgrammableTxnBlockCard({
     const itemsToShow = defaultItemsToShow || items.length;
 
     return (
-        <CollapsibleCard collapsible initialClose={initialClose} title={cardTitle}>
+        <CollapsibleCard collapsible initialClose={initialClose} title={cardTitle} hideBorder>
             <ExpandableList items={items} defaultItemsToShow={itemsToShow} itemsLabel={itemsLabel}>
                 <div className="flex flex-col gap-xs overflow-y-auto p-md--rs pt-xs--rs">
                     {noExpandableList ? <>{items}</> : <ExpandableListItems />}
diff --git a/apps/explorer/src/components/ui/ProgressBar.tsx b/apps/explorer/src/components/ui/ProgressBar.tsx
index c6e2e8ae7e3..ef0d8b9e99a 100644
--- a/apps/explorer/src/components/ui/ProgressBar.tsx
+++ b/apps/explorer/src/components/ui/ProgressBar.tsx
@@ -26,10 +26,10 @@ export interface ProgressBarProps {
 
 export function ProgressBar({ progress }: ProgressBarProps): JSX.Element {
     return (
-        <div className="relative w-full rounded-full bg-primary-90">
+        <div className="relative w-full rounded-full bg-primary-90 dark:bg-primary-10">
             <motion.div
                 variants={getProgressBarVariant(progress)}
-                className="h-1 rounded-full bg-primary-30"
+                className="h-1 rounded-full bg-primary-30 dark:bg-primary-80"
                 initial="initial"
                 animate="animate"
             />
diff --git a/apps/explorer/src/components/ui/RingChart.tsx b/apps/explorer/src/components/ui/RingChart.tsx
index 7f320e307b6..5ead57032ec 100644
--- a/apps/explorer/src/components/ui/RingChart.tsx
+++ b/apps/explorer/src/components/ui/RingChart.tsx
@@ -50,7 +50,7 @@ export function RingChartLegend({ data }: RingChartLegendProps): JSX.Element {
                             style={{ background: colorDisplay }}
                             className="h-1.5 w-1.5 rounded-full"
                         />
-                        <div className="text-label-md text-neutral-10">
+                        <div className="text-label-md text-neutral-10 dark:text-neutral-92">
                             {value} {label}
                         </div>
                     </div>
@@ -123,7 +123,9 @@ export function RingChart({
             </svg>
             <div className="absolute inset-0 mx-auto flex items-center justify-center">
                 <div className="flex flex-col items-center gap-1.5">
-                    <span className="text-title-md text-neutral-10">{total}</span>
+                    <span className="text-title-md text-neutral-10 dark:text-neutral-92">
+                        {total}
+                    </span>
                 </div>
             </div>
         </div>
diff --git a/apps/explorer/src/components/ui/SplitPanes.tsx b/apps/explorer/src/components/ui/SplitPanes.tsx
index 9b146b6f399..be26b5d04f8 100644
--- a/apps/explorer/src/components/ui/SplitPanes.tsx
+++ b/apps/explorer/src/components/ui/SplitPanes.tsx
@@ -2,6 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { Button, ButtonSize, ButtonType } from '@iota/apps-ui-kit';
 import { ArrowRight, ArrowUp } from '@iota/ui-icons';
 import { cva, type VariantProps } from 'class-variance-authority';
 import clsx from 'clsx';
@@ -93,35 +94,26 @@ function ResizeHandle({
             onDragging={setIsDragging}
         >
             <div
+                data-is-dragging={isDragging}
                 className={clsx(
-                    'relative bg-shader-neutral-light-8 group-hover/container:bg-primary-30 dark:bg-shader-neutral-dark-8',
+                    'relative bg-shader-neutral-light-8 group-hover/container:bg-neutral-70 dark:bg-shader-neutral-dark-8 dark:group-hover/container:bg-primary-80/40',
                     isHorizontal ? 'h-full w-px' : 'h-px',
-                    noHoverHidden && !isCollapsed && 'bg-transparent',
                 )}
             >
                 {collapsibleButton && (
-                    <button
-                        type="button"
-                        onClick={togglePanelCollapse}
-                        data-is-dragging={isDragging}
-                        className={clsx([
-                            'group/button',
-                            'flex h-6 w-6 cursor-pointer items-center justify-center rounded-full',
-                            'border border-neutral-70 bg-white text-neutral-60 group-hover/container:border-primary-30',
-                            'hover:bg-primary-30 hover:text-white',
-                            isHorizontal
-                                ? 'absolute left-1/2 top-10 -translate-x-2/4'
-                                : 'absolute left-10 top-1/2 -translate-y-2/4',
+                    <div
+                        className={clsx(
+                            'absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 transform [&_button]:p-xxs',
                             noHoverHidden && !isCollapsed && 'hidden group-hover/container:flex',
-                        ])}
+                        )}
                     >
-                        <ChevronButton
-                            className={clsx(
-                                'h-4 w-4 text-neutral-70 group-hover/button:!text-white group-hover/container:text-primary-30',
-                                isCollapsed && 'rotate-180',
-                            )}
+                        <Button
+                            size={ButtonSize.Small}
+                            onClick={togglePanelCollapse}
+                            type={ButtonType.Secondary}
+                            icon={<ChevronButton className={clsx(!isCollapsed && 'rotate-180')} />}
                         />
-                    </button>
+                    </div>
                 )}
             </div>
         </PanelResizeHandle>
diff --git a/apps/explorer/src/components/ui/collapsible/CollapsibleCard.tsx b/apps/explorer/src/components/ui/collapsible/CollapsibleCard.tsx
index 9a3c27c6be8..9c2fe974472 100644
--- a/apps/explorer/src/components/ui/collapsible/CollapsibleCard.tsx
+++ b/apps/explorer/src/components/ui/collapsible/CollapsibleCard.tsx
@@ -25,6 +25,7 @@ export interface CollapsibleCardProps {
     hideBorder?: boolean;
     render?: ({ isOpen }: { isOpen: boolean }) => ReactNode;
     supportingTitleElement?: ReactNode;
+    isTransparentPanel?: boolean;
 }
 
 export function CollapsibleCard({
@@ -38,6 +39,7 @@ export function CollapsibleCard({
     hideBorder,
     render,
     supportingTitleElement,
+    isTransparentPanel,
 }: CollapsibleCardProps) {
     const [open, setOpen] = useState(!initialClose);
     return collapsible ? (
@@ -69,7 +71,7 @@ export function CollapsibleCard({
             </Accordion>
         </div>
     ) : (
-        <Panel hasBorder={!hideBorder}>
+        <Panel hasBorder={!hideBorder} bgColor={isTransparentPanel ? 'bg-transparent' : undefined}>
             <Title size={titleSize} title={title ?? ''} />
             <div>{children}</div>
             {footer && (
diff --git a/apps/explorer/src/index.css b/apps/explorer/src/index.css
index 0bb5ab54af4..ddc5cdaa069 100644
--- a/apps/explorer/src/index.css
+++ b/apps/explorer/src/index.css
@@ -24,6 +24,14 @@ body,
     --steel-dark: theme('colors.steel.dark');
 }
 
+:root {
+    @apply bg-neutral-98;
+}
+
+:root.dark {
+    @apply bg-neutral-4;
+}
+
 @layer base {
     body {
         @apply antialiased;
diff --git a/apps/explorer/src/pages/epochs/EpochDetail.tsx b/apps/explorer/src/pages/epochs/EpochDetail.tsx
index be17ede1df1..cf6b074838d 100644
--- a/apps/explorer/src/pages/epochs/EpochDetail.tsx
+++ b/apps/explorer/src/pages/epochs/EpochDetail.tsx
@@ -13,6 +13,7 @@ import {
     InfoBoxStyle,
     InfoBoxType,
     LoadingIndicator,
+    Panel,
     SegmentedButton,
     SegmentedButtonType,
 } from '@iota/apps-ui-kit';
@@ -165,9 +166,8 @@ export default function EpochDetail() {
                         {isCurrentEpoch && <ValidatorStatus />}
                     </div>
 
-                    <div className="rounded-xl bg-white">
+                    <Panel>
                         <div className="relative">
-                            <div className="border-shader-inverte-dark-8 absolute bottom-0 left-0 z-0 h-[1px] w-full border-b" />
                             <SegmentedButton
                                 type={SegmentedButtonType.Transparent}
                                 shape={ButtonSegmentType.Underlined}
@@ -186,7 +186,7 @@ export default function EpochDetail() {
                                 />
                             </SegmentedButton>
                         </div>
-                        <div className="px-lg py-md">
+                        <div className="p-md">
                             {activeTabId === EpochTabs.Checkpoints ? (
                                 <CheckpointsTable
                                     initialCursor={initialCursorPlusOne}
@@ -198,7 +198,7 @@ export default function EpochDetail() {
                                 <TableCard data={tableData} columns={tableColumns} />
                             ) : null}
                         </div>
-                    </div>
+                    </Panel>
                 </div>
             }
         />
diff --git a/apps/explorer/src/pages/epochs/stats/ValidatorStatus.tsx b/apps/explorer/src/pages/epochs/stats/ValidatorStatus.tsx
index 449029b3217..0fdf6b62d48 100644
--- a/apps/explorer/src/pages/epochs/stats/ValidatorStatus.tsx
+++ b/apps/explorer/src/pages/epochs/stats/ValidatorStatus.tsx
@@ -3,14 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { DisplayStats, IOTA_PRIMITIVES_COLOR_PALETTE, Panel, Title } from '@iota/apps-ui-kit';
-import { getRefGasPrice } from '@iota/core';
+import { getRefGasPrice, useTheme, Theme } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { useMemo } from 'react';
-
 import { RingChart, RingChartLegend } from '~/components/ui';
 
 export function ValidatorStatus(): JSX.Element | null {
     const { data } = useIotaClientQuery('getLatestIotaSystemState');
+    const { theme } = useTheme();
 
     const nextRefGasPrice = useMemo(
         () => getRefGasPrice(data?.activeValidators),
@@ -31,8 +31,14 @@ export function ValidatorStatus(): JSX.Element | null {
             gradient: {
                 deg: 315,
                 values: [
-                    { percent: 0, color: IOTA_PRIMITIVES_COLOR_PALETTE.primary[30] },
-                    { percent: 100, color: IOTA_PRIMITIVES_COLOR_PALETTE.primary[30] },
+                    {
+                        percent: 0,
+                        color: IOTA_PRIMITIVES_COLOR_PALETTE.primary[30],
+                    },
+                    {
+                        percent: 100,
+                        color: IOTA_PRIMITIVES_COLOR_PALETTE.primary[30],
+                    },
                 ],
             },
         },
@@ -44,7 +50,10 @@ export function ValidatorStatus(): JSX.Element | null {
         {
             value: data.atRiskValidators.length,
             label: 'At Risk',
-            color: IOTA_PRIMITIVES_COLOR_PALETTE.neutral[90],
+            color:
+                theme === Theme.Dark
+                    ? IOTA_PRIMITIVES_COLOR_PALETTE.neutral[20]
+                    : IOTA_PRIMITIVES_COLOR_PALETTE.neutral[90],
         },
     ];
 
diff --git a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx
index c6525f746c9..dc2156467fd 100644
--- a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx
+++ b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx
@@ -43,7 +43,7 @@ function MoveCall({ data }: TransactionProps<MoveCallIotaTransaction>): JSX.Elem
         <span className="text-body-md text-neutral-40 dark:text-neutral-60">
             package: <ObjectLink objectId={movePackage} />, module:{' '}
             <ObjectLink objectId={`${movePackage}?module=${module}`} label={`'${module}'`} />,
-            function: <span className="break-all text-primary-30">{func}</span>
+            function: <span className="break-all text-primary-30 dark:text-primary-80">{func}</span>
             {args && (
                 <span className="break-all">, arguments: [{flattenIotaArguments(args!)}]</span>
             )}
diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
index f532c0bcecc..3aae316b78e 100644
--- a/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
+++ b/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
@@ -66,7 +66,7 @@ function BalanceChangeEntry({ change }: { change: BalanceChange }): JSX.Element
             </Card>
             {recipient && (
                 <div className="flex flex-wrap items-center justify-between px-sm py-xs">
-                    <span className="w-full flex-shrink-0 text-label-lg text-neutral-40 dark:text-neutral-60 md:w-40">
+                    <span className="w-full flex-shrink-0 text-label-lg text-neutral-40 md:w-40 dark:text-neutral-60">
                         Recipient
                     </span>
                     <AddressLink address={recipient} />
@@ -85,6 +85,7 @@ function BalanceChangeCard({ changes, owner }: { changes: BalanceChange[]; owner
     return (
         <CollapsibleCard
             title="Balance Changes"
+            isTransparentPanel
             footer={
                 owner ? (
                     <div className="flex flex-wrap justify-between px-md--rs py-sm--rs">
diff --git a/apps/explorer/tailwind.config.ts b/apps/explorer/tailwind.config.ts
index 5532fa8c156..44372a0e8fe 100644
--- a/apps/explorer/tailwind.config.ts
+++ b/apps/explorer/tailwind.config.ts
@@ -11,6 +11,7 @@ import uiKitResponsivePreset from '../../apps/ui-kit/src/lib/tailwind/responsive
 export default {
     presets: [preset, uiKitResponsivePreset],
     content: ['./src/**/*.{js,jsx,ts,tsx}', './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}'],
+    darkMode: 'selector',
     theme: {
         // This COLOR are duplicated from @iota/core tailwind.config.ts!!!
         // They are repeated here cause uiKitResponsivePreset overwrites the colors, and they are still used throughout Explorer
diff --git a/apps/ui-kit/src/lib/components/molecules/search/Search.tsx b/apps/ui-kit/src/lib/components/molecules/search/Search.tsx
index 467d89c6581..35565d8f6af 100644
--- a/apps/ui-kit/src/lib/components/molecules/search/Search.tsx
+++ b/apps/ui-kit/src/lib/components/molecules/search/Search.tsx
@@ -162,7 +162,7 @@ export function Search({
                 <div
                     ref={suggestionsListRef}
                     className={cx(
-                        'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden',
+                        'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden bg-neutral-100 dark:bg-neutral-10',
                         suggestionsStyle,
                     )}
                 >

From 26c2cbfbc464ec97c1f075a4faf6a97984ed8ad1 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Tue, 26 Nov 2024 10:25:41 +0100
Subject: [PATCH 2/7] feat(explorer): add missing darkmode colors to the
 homepage (#4152)

* feat(explorer): add theme switcher

* fix: add missing style to the icon

* fix: lint

* feat(explorer): add missing darkmode colors to the homepage

* revert: imageicon

* revert: props unused

* refactor: remove theme context from explorer

* feat(explorer): add background to search suggestions (#4162)

* feat(explorer): add backgrounds to the search suggestions

* refactor: add styles to search ui kit

* revert changes

* fix: remove unnecessary backdrop-blur

* fix: remove map

---------

Co-authored-by: evavirseda <evirseda@boxfish.studio>
---
 .../src/components/AddressesCardGraph.tsx     | 11 +++++++--
 apps/explorer/src/components/AreaGraph.tsx    | 24 ++++++++++++++-----
 .../src/components/GraphTooltipContent.tsx    | 24 +++++++++++++------
 .../src/components/StatisticsPanel.tsx        | 15 ------------
 .../src/components/TransactionsCardGraph.tsx  |  9 +++++--
 .../top-packages/TopPackagesCard.tsx          | 17 +++++++------
 .../explorer/src/components/ui/FilterList.tsx |  8 +++++--
 7 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/apps/explorer/src/components/AddressesCardGraph.tsx b/apps/explorer/src/components/AddressesCardGraph.tsx
index 3258b556573..0c5ba23db08 100644
--- a/apps/explorer/src/components/AddressesCardGraph.tsx
+++ b/apps/explorer/src/components/AddressesCardGraph.tsx
@@ -8,7 +8,8 @@ import { useMemo } from 'react';
 import { useGetAddressMetrics } from '~/hooks/useGetAddressMetrics';
 import { useGetAllEpochAddressMetrics } from '~/hooks/useGetAllEpochAddressMetrics';
 import { LabelTextSize, TooltipPosition } from '@iota/apps-ui-kit';
-import { StatisticsPanel, GraphTooltip } from './StatisticsPanel';
+import { StatisticsPanel } from './StatisticsPanel';
+import { GraphTooltipContent } from './GraphTooltipContent';
 
 const GRAPH_DATA_FIELD = 'cumulativeAddresses';
 const GRAPH_DATA_TEXT = 'Total addresses';
@@ -18,7 +19,13 @@ function TooltipContent({ data }: { data: AllEpochsAddressMetrics[number] }): JS
     const totalFormatted = formatAmount(data[GRAPH_DATA_FIELD]);
 
     const overline = `${dateFormatted}, Epoch ${data.epoch}`;
-    return <GraphTooltip overline={overline} title={totalFormatted} subtitle={GRAPH_DATA_TEXT} />;
+    return (
+        <GraphTooltipContent
+            overline={overline}
+            title={totalFormatted}
+            subtitle={GRAPH_DATA_TEXT}
+        />
+    );
 }
 
 const FALLBACK = '--';
diff --git a/apps/explorer/src/components/AreaGraph.tsx b/apps/explorer/src/components/AreaGraph.tsx
index ebfc5f690f5..dd3723c03d0 100644
--- a/apps/explorer/src/components/AreaGraph.tsx
+++ b/apps/explorer/src/components/AreaGraph.tsx
@@ -13,7 +13,7 @@ import { bisector, extent } from 'd3-array';
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { throttle } from 'throttle-debounce';
 
-import { GraphTooltipContent } from './GraphTooltipContent';
+import { GraphTooltipContainer } from './GraphTooltipContent';
 
 let idCounter = 0;
 
@@ -129,21 +129,33 @@ export function AreaGraph<D>({
                     offsetTop={0}
                     left={tooltipLeft}
                     top={tooltipTopAdj}
-                    className="pointer-events-none absolute z-10 h-0 w-max overflow-visible"
+                    className="pointer-events-none absolute z-10 h-0 w-max overflow-visible bg-black"
                     unstyled
                     detectBounds
                 >
-                    <GraphTooltipContent>{tooltipContent(tooltipContentProps)}</GraphTooltipContent>
+                    <GraphTooltipContainer>
+                        {tooltipContent(tooltipContentProps)}
+                    </GraphTooltipContainer>
                 </TooltipInPortal>
             ) : null}
             <svg width={width} height={height}>
                 <defs>
                     <linearGradient id={fillGradientID} gradientTransform="rotate(90)">
-                        <stop stopColor="#0067EE" stopOpacity="0.16" />
-                        <stop offset="1" stopColor="#0067EE" stopOpacity="0" />
+                        <stop
+                            stopColor="currentColor"
+                            className="text-shader-primary-light-16 dark:text-shader-primary-dark-16"
+                        />
+                        <stop
+                            offset="1"
+                            stopColor="currentColor"
+                            className="text-shader-primary-light-0 dark:text-shader-primary-dark-0"
+                        />
                     </linearGradient>
                     <linearGradient id={lineGradientID}>
-                        <stop stopColor="currentColor" className="text-primary-30" />
+                        <stop
+                            stopColor="currentColor"
+                            className="text-primary-30 dark:text-primary-80"
+                        />
                     </linearGradient>
                 </defs>
                 <AreaClosed<D>
diff --git a/apps/explorer/src/components/GraphTooltipContent.tsx b/apps/explorer/src/components/GraphTooltipContent.tsx
index ddceab1776c..515c04990b7 100644
--- a/apps/explorer/src/components/GraphTooltipContent.tsx
+++ b/apps/explorer/src/components/GraphTooltipContent.tsx
@@ -4,18 +4,13 @@
 
 import { useTooltipPosition } from '@visx/tooltip';
 import clsx from 'clsx';
-import { type ReactNode } from 'react';
 
-type GraphTooltipContentProps = {
-    children: ReactNode;
-};
-
-export function GraphTooltipContent({ children }: GraphTooltipContentProps): JSX.Element {
+export function GraphTooltipContainer({ children }: React.PropsWithChildren): JSX.Element {
     const { isFlippedHorizontally } = useTooltipPosition();
     return (
         <div
             className={clsx(
-                'w-fit -translate-y-[calc(100%-10px)] rounded-md border border-solid border-neutral-70 bg-neutral-100/90 p-xs shadow-xl',
+                'w-fit -translate-y-[calc(100%-10px)] rounded-md border border-solid border-neutral-70 bg-neutral-100/90 p-xs shadow-xl dark:border-neutral-30 dark:bg-neutral-10/90 dark:shadow-neutral-0/20',
                 isFlippedHorizontally
                     ? '-translate-x-[1px] rounded-bl-none'
                     : 'translate-x-[1px] rounded-br-none',
@@ -25,3 +20,18 @@ export function GraphTooltipContent({ children }: GraphTooltipContentProps): JSX
         </div>
     );
 }
+
+interface GraphTooltipContentProps {
+    title: string;
+    overline: string;
+    subtitle: string;
+}
+export function GraphTooltipContent({ title, overline, subtitle }: GraphTooltipContentProps) {
+    return (
+        <div className="flex flex-col gap-xxxs">
+            <span className="text-body-sm text-neutral-40 dark:text-neutral-60">{overline}</span>
+            <span className="text-label-lg text-neutral-12 dark:text-neutral-98">{title}</span>
+            <span className="text-body-sm text-neutral-40 dark:text-neutral-60">{subtitle}</span>
+        </div>
+    );
+}
diff --git a/apps/explorer/src/components/StatisticsPanel.tsx b/apps/explorer/src/components/StatisticsPanel.tsx
index b2701d4b6d6..b30be733170 100644
--- a/apps/explorer/src/components/StatisticsPanel.tsx
+++ b/apps/explorer/src/components/StatisticsPanel.tsx
@@ -69,18 +69,3 @@ export function StatisticsPanel<T>({
         </Panel>
     );
 }
-
-interface GraphTooltipProps {
-    title: string;
-    overline: string;
-    subtitle: string;
-}
-export function GraphTooltip({ title, overline, subtitle }: GraphTooltipProps) {
-    return (
-        <div className="flex flex-col gap-xxxs">
-            <span className="text-body-sm text-neutral-40">{overline}</span>
-            <span className="text-label-lg text-neutral-12">{title}</span>
-            <span className="text-body-sm text-neutral-40">{subtitle}</span>
-        </div>
-    );
-}
diff --git a/apps/explorer/src/components/TransactionsCardGraph.tsx b/apps/explorer/src/components/TransactionsCardGraph.tsx
index 510f5785b7c..ee9f1a8679a 100644
--- a/apps/explorer/src/components/TransactionsCardGraph.tsx
+++ b/apps/explorer/src/components/TransactionsCardGraph.tsx
@@ -5,7 +5,8 @@
 import { CoinFormat, formatAmount, formatBalance, formatDate } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { LabelTextSize, TooltipPosition } from '@iota/apps-ui-kit';
-import { GraphTooltip, StatisticsPanel } from './StatisticsPanel';
+import { StatisticsPanel } from './StatisticsPanel';
+import { GraphTooltipContent } from './GraphTooltipContent';
 
 interface TooltipContentProps {
     data: {
@@ -24,7 +25,11 @@ function TooltipContent({
     const overline = `${dateFormatted}, Epoch ${epoch}`;
 
     return (
-        <GraphTooltip overline={overline} title={totalFormatted} subtitle="Transaction Blocks" />
+        <GraphTooltipContent
+            overline={overline}
+            title={totalFormatted}
+            subtitle="Transaction Blocks"
+        />
     );
 }
 
diff --git a/apps/explorer/src/components/top-packages/TopPackagesCard.tsx b/apps/explorer/src/components/top-packages/TopPackagesCard.tsx
index 9a172b38586..0ead5efec72 100644
--- a/apps/explorer/src/components/top-packages/TopPackagesCard.tsx
+++ b/apps/explorer/src/components/top-packages/TopPackagesCard.tsx
@@ -11,17 +11,17 @@ import { ErrorBoundary } from '../error-boundary/ErrorBoundary';
 import { TopPackagesTable } from './TopPackagesTable';
 import { Panel, Title } from '@iota/apps-ui-kit';
 
-type DateFilter = '3D' | '7D' | '30D';
+type DateFilter = '3d' | '1w' | '1m';
 type ApiDateFilter = 'rank3Days' | 'rank7Days' | 'rank30Days';
 export const FILTER_TO_API_FILTER: Record<DateFilter, ApiDateFilter> = {
-    '3D': 'rank3Days',
-    '7D': 'rank7Days',
-    '30D': 'rank30Days',
+    '3d': 'rank3Days',
+    '1w': 'rank7Days',
+    '1m': 'rank30Days',
 };
 
 export function TopPackagesCard(): JSX.Element {
     const rpc = useEnhancedRpcClient();
-    const [selectedFilter, setSelectedFilter] = useState<DateFilter>('3D');
+    const [selectedFilter, setSelectedFilter] = useState<DateFilter>('3d');
 
     const { data, isPending } = useQuery({
         queryKey: ['top-packages', selectedFilter],
@@ -35,9 +35,10 @@ export function TopPackagesCard(): JSX.Element {
             <div className="relative">
                 <div className="absolute right-0 mr-2 mt-2">
                     <FilterList
-                        options={['3D', '7D', '30D']}
+                        options={Object.keys(FILTER_TO_API_FILTER) as DateFilter[]}
                         selected={selectedFilter}
                         onSelected={(val) => setSelectedFilter(val)}
+                        filtersAsChip
                     />
                 </div>
                 <Title
@@ -45,7 +46,9 @@ export function TopPackagesCard(): JSX.Element {
                     tooltipText="Popular packages is recomputed on epoch changes."
                 />
                 <ErrorBoundary>
-                    <TopPackagesTable data={filteredData} isLoading={isPending} />
+                    <div className="p-md--rs">
+                        <TopPackagesTable data={filteredData} isLoading={isPending} />
+                    </div>
                 </ErrorBoundary>
             </div>
         </Panel>
diff --git a/apps/explorer/src/components/ui/FilterList.tsx b/apps/explorer/src/components/ui/FilterList.tsx
index bb4771910b2..1f0fd48bc90 100644
--- a/apps/explorer/src/components/ui/FilterList.tsx
+++ b/apps/explorer/src/components/ui/FilterList.tsx
@@ -5,23 +5,27 @@
 // TODO: This component really shouldn't use the `Tabs` component, it should just use radix,
 // and should define it's own styles since the concerns here are pretty different.
 
-import { ButtonSegment, SegmentedButton } from '@iota/apps-ui-kit';
+import { ButtonSegment, SegmentedButton, Chip } from '@iota/apps-ui-kit';
 
 export interface FilterListProps<T extends string = string> {
     selected: T;
     options: readonly T[];
     onSelected(value: T): void;
+    filtersAsChip?: boolean;
 }
 
 export function FilterList<T extends string>({
     options,
     selected,
     onSelected,
+    filtersAsChip,
 }: FilterListProps<T>): JSX.Element {
+    const FilterComponent = filtersAsChip ? Chip : ButtonSegment;
+
     return (
         <SegmentedButton>
             {options.map((option) => (
-                <ButtonSegment
+                <FilterComponent
                     key={option}
                     label={option}
                     selected={option == selected}

From 7df5a90f9182bf56bed48c7a5e8d17730be14997 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 26 Nov 2024 10:27:22 +0100
Subject: [PATCH 3/7] feat(explorer): add darkmode support to footer (#4148)

* feat(explorer): add theme switcher

* fix: add missing style to the icon

* fix: lint

* fix: add darkmode to footer

* refactor: remove theme context from explorer

* fix: remove debris and fix format

* feat(explorer): add background to search suggestions (#4162)

* feat(explorer): add backgrounds to the search suggestions

* refactor: add styles to search ui kit

* revert changes

* fix: remove unnecessary backdrop-blur

* fix: remove map

---------

Co-authored-by: JCNoguera <88061365+VmMad@users.noreply.github.com>
---
 apps/explorer/src/components/footer/Footer.tsx | 12 +++++++++---
 apps/explorer/src/components/footer/Legal.tsx  | 10 +++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/explorer/src/components/footer/Footer.tsx b/apps/explorer/src/components/footer/Footer.tsx
index b9ec00af211..d4f43153c63 100644
--- a/apps/explorer/src/components/footer/Footer.tsx
+++ b/apps/explorer/src/components/footer/Footer.tsx
@@ -14,7 +14,11 @@ function FooterLinks(): JSX.Element {
             <ul className="flex flex-wrap gap-4 md:flex-row md:gap-6">
                 {FOOTER_LINKS.map(({ title, href }) => (
                     <li key={href}>
-                        <Link variant="text" href={href} className="text-body-md text-neutral-40">
+                        <Link
+                            variant="text"
+                            href={href}
+                            className="text-body-md text-neutral-40 dark:text-neutral-60"
+                        >
                             {title}
                         </Link>
                     </li>
@@ -26,7 +30,7 @@ function FooterLinks(): JSX.Element {
 
 function Footer(): JSX.Element {
     return (
-        <footer className="sticky top-[100%] px-5 py-10 md:px-10 md:py-14">
+        <footer className="sticky top-[100%] bg-neutral-96 px-5 py-10 md:px-10 md:py-14 dark:bg-neutral-10">
             <nav className="container flex flex-col justify-center gap-md md:gap-lg">
                 <div className="flex flex-col-reverse items-center gap-7.5 md:flex-row md:justify-between ">
                     <div className="hidden self-center md:flex md:self-start">
@@ -45,7 +49,9 @@ function Footer(): JSX.Element {
             <div className="mt-4 flex justify-center pt-5 md:hidden md:self-start">
                 <ThemedIotaLogo />
             </div>
-            <p className="mt-8 w-full text-center text-body-sm text-neutral-40">{EXPLORER_REV}</p>
+            <p className="mt-8 w-full text-center text-body-sm text-neutral-40 dark:text-neutral-60">
+                {EXPLORER_REV}
+            </p>
         </footer>
     );
 }
diff --git a/apps/explorer/src/components/footer/Legal.tsx b/apps/explorer/src/components/footer/Legal.tsx
index 94cd6b3f7af..d4d46f84e25 100644
--- a/apps/explorer/src/components/footer/Legal.tsx
+++ b/apps/explorer/src/components/footer/Legal.tsx
@@ -9,7 +9,7 @@ import { Link } from '~/components/ui';
 export function LegalText(): JSX.Element {
     return (
         <div className="flex justify-center md:justify-start">
-            <span className="text-body-md text-neutral-40">
+            <span className="text-body-md text-neutral-40 dark:text-neutral-60">
                 &copy;
                 {`${new Date().getFullYear()} IOTA Stiftung. All rights reserved.`}
             </span>
@@ -24,7 +24,11 @@ export function LegalLinks(): JSX.Element {
         <ul className="flex flex-col gap-3 md:flex-row md:gap-8">
             {LEGAL_LINKS.map(({ title, href }) => (
                 <li className="flex items-center justify-center" key={href}>
-                    <Link variant="text" href={href} className="text-body-md text-neutral-40">
+                    <Link
+                        variant="text"
+                        href={href}
+                        className="text-body-md text-neutral-40 dark:text-neutral-60"
+                    >
                         {title}
                     </Link>
                 </li>
@@ -34,7 +38,7 @@ export function LegalLinks(): JSX.Element {
                     <Link
                         variant="text"
                         data-cc="c-settings"
-                        className="text-body-md text-neutral-40"
+                        className="text-body-md text-neutral-40 dark:text-neutral-60"
                     >
                         Manage Cookies
                     </Link>

From 2826800a508840c21a02f12e1106c5d555e6644e Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 26 Nov 2024 10:47:00 +0100
Subject: [PATCH 4/7] feat(ui-kit): improve UI Kit components darkmode (#4140)

* feat(explorer): add theme switcher

* fix: add missing style to the icon

* fix: lint

* fix: autofilled input darkmode

* feat: add darkmode to loading indicator

* fix: add darkmode

* fix panel darkmode

* refactor: remove theme context from explorer

* feat: undo styles

* feat(explorer): add background to search suggestions (#4162)

* feat(explorer): add backgrounds to the search suggestions

* refactor: add styles to search ui kit

* revert changes

* fix: remove unnecessary backdrop-blur

* fix: remove map

* feat: update input colors

* fix use tailwind

* fix format

* minor fix

---------

Co-authored-by: JCNoguera <88061365+VmMad@users.noreply.github.com>
Co-authored-by: Bran <52735957+brancoder@users.noreply.github.com>
---
 .../loading-indicator/LoadingIndicator.tsx    |  2 +-
 .../src/lib/components/atoms/panel/Panel.tsx  |  2 +-
 .../components/molecules/account/Account.tsx  |  2 +-
 .../molecules/input/input.classes.ts          |  4 ++--
 apps/ui-kit/src/lib/styles/index.css          | 19 +++++++++++++++++++
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/apps/ui-kit/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx b/apps/ui-kit/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx
index 0cff4462ba5..6a0c8d5df45 100644
--- a/apps/ui-kit/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx
+++ b/apps/ui-kit/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx
@@ -21,7 +21,7 @@ export interface LoadingIndicatorProps {
 }
 
 export function LoadingIndicator({
-    color = 'text-primary-30',
+    color = 'text-primary-30 dark:text-primary-80',
     size = 'w-5 h-5',
     text,
 }: LoadingIndicatorProps): React.JSX.Element {
diff --git a/apps/ui-kit/src/lib/components/atoms/panel/Panel.tsx b/apps/ui-kit/src/lib/components/atoms/panel/Panel.tsx
index f50a601fed0..d5eae32a334 100644
--- a/apps/ui-kit/src/lib/components/atoms/panel/Panel.tsx
+++ b/apps/ui-kit/src/lib/components/atoms/panel/Panel.tsx
@@ -18,7 +18,7 @@ interface PanelProps {
 export function Panel({
     children,
     hasBorder,
-    bgColor = 'bg-neutral-100 dark:bg-neutral-10',
+    bgColor = 'bg-neutral-100 dark:bg-neutral-6',
 }: React.PropsWithChildren<PanelProps>): React.JSX.Element {
     const borderClass = hasBorder
         ? 'border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8'
diff --git a/apps/ui-kit/src/lib/components/molecules/account/Account.tsx b/apps/ui-kit/src/lib/components/molecules/account/Account.tsx
index 614bfd214b3..e62f598ad1b 100644
--- a/apps/ui-kit/src/lib/components/molecules/account/Account.tsx
+++ b/apps/ui-kit/src/lib/components/molecules/account/Account.tsx
@@ -157,7 +157,7 @@ export function Account({
                 {showSelected && (
                     <ButtonUnstyled>
                         {isSelected ? (
-                            <CheckmarkFilled className="h-5 w-5 text-primary-30" />
+                            <CheckmarkFilled className="h-5 w-5 text-primary-30 dark:text-primary-80" />
                         ) : (
                             <RadioOff className="h-5 w-5 text-neutral-40 dark:text-neutral-60" />
                         )}
diff --git a/apps/ui-kit/src/lib/components/molecules/input/input.classes.ts b/apps/ui-kit/src/lib/components/molecules/input/input.classes.ts
index 64f5ca49743..5f398da7dc2 100644
--- a/apps/ui-kit/src/lib/components/molecules/input/input.classes.ts
+++ b/apps/ui-kit/src/lib/components/molecules/input/input.classes.ts
@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export const INPUT_CLASSES =
-    'w-full bg-transparent text-body-lg caret-primary-30 focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed';
+    'w-full bg-transparent text-body-lg caret-primary-30 dark:caret-primary-80 focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed';
 export const INPUT_TEXT_CLASSES = 'text-neutral-10 dark:text-neutral-92';
 export const INPUT_PLACEHOLDER_CLASSES =
     ' enabled:placeholder:text-neutral-40/40  dark:placeholder:text-neutral-60/40 enabled:dark:placeholder:text-neutral-60/40';
 export const BORDER_CLASSES =
-    'px-md py-sm rounded-lg border border-neutral-80 group-[.enabled]:cursor-text group-[.errored]:border-error-30 hover:group-[.enabled]:border-neutral-50  dark:border-neutral-60 dark:hover:border-neutral-60 dark:group-[.errored]:border-error-80 [&:has(input:focus)]:border-primary-30';
+    'px-md py-sm rounded-lg border border-neutral-80 group-[.enabled]:cursor-text group-[.errored]:border-error-30 hover:group-[.enabled]:border-neutral-50  dark:border-neutral-60 dark:hover:border-neutral-60 dark:group-[.errored]:border-error-80 [&:has(input:focus)]:border-primary-30 [&:has(input:focus)]:dark:border-primary-80';
 export const INPUT_NUMBER_CLASSES =
     '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:cursor-not-allowed';
 export const LABEL_CLASSES =
diff --git a/apps/ui-kit/src/lib/styles/index.css b/apps/ui-kit/src/lib/styles/index.css
index ef470db58fc..8d748913f32 100644
--- a/apps/ui-kit/src/lib/styles/index.css
+++ b/apps/ui-kit/src/lib/styles/index.css
@@ -45,6 +45,25 @@
     .text-label-md {
         font-variant-alternates: 'ss01';
     }
+
+    input:-webkit-autofill,
+    input:-webkit-autofill:enabled,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus {
+        @apply appearance-none !bg-transparent !bg-none;
+        @apply !text-neutral-92 dark:!text-neutral-10;
+        transition: background-color 5000s ease-in-out 0s;
+        -webkit-text-fill-color: theme('colors.neutral.92') !important;
+    }
+
+    :root:not(.dark) {
+        input:-webkit-autofill,
+        input:-webkit-autofill:enabled,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:focus {
+            -webkit-text-fill-color: theme('colors.neutral.10') !important;
+        }
+    }
 }
 
 @layer utilities {

From e68220d3151d342f30df5bb6a467c81aa38f0654 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:05:42 +0100
Subject: [PATCH 5/7] feat(explorer): add darkmode theme to `SyntaxHighlighter`
 (#4127)

* feat(explorer): add theme switcher

* fix: add missing style to the icon

* fix: lint

* fix: add darkmode theme to SyntaxHighlighter

* fix: remove test class

* refactor: remove theme context from explorer

* fix: update theme import
---
 .../components/module/PkgModulesWrapper.tsx    | 18 ++++++++++--------
 .../syntax-highlighter/SyntaxHighlighter.tsx   | 12 +++++++++---
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/explorer/src/components/module/PkgModulesWrapper.tsx b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
index f395ed43a16..b66decbf884 100644
--- a/apps/explorer/src/components/module/PkgModulesWrapper.tsx
+++ b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
@@ -131,7 +131,7 @@ export function PkgModulesWrapper({
                         )}
                     />
                 </div>
-                <div className="flex-1 overflow-auto pt-sm">
+                <div className="max-h-[560px] flex-1 overflow-auto pt-sm">
                     <VerticalList>
                         <div className="flex flex-col gap-sm">
                             {moduleNames.map((name) => (
@@ -189,13 +189,15 @@ function ExecutePanelContent({
                     ))}
                 </SegmentedButton>
 
-                <ListTabContent id={EXECUTE_TAB.id}>
-                    <ModuleFunctionsInteraction
-                        key={`${packageId}-${moduleName}`}
-                        packageId={packageId}
-                        moduleName={moduleName}
-                    />
-                </ListTabContent>
+                <div className="pr-md--rs">
+                    <ListTabContent id={EXECUTE_TAB.id}>
+                        <ModuleFunctionsInteraction
+                            key={`${packageId}-${moduleName}`}
+                            packageId={packageId}
+                            moduleName={moduleName}
+                        />
+                    </ListTabContent>
+                </div>
             </TabsProvider>
         </TabbedContentWrapper>
     );
diff --git a/apps/explorer/src/components/syntax-highlighter/SyntaxHighlighter.tsx b/apps/explorer/src/components/syntax-highlighter/SyntaxHighlighter.tsx
index 966d3a57688..d88c2c48993 100644
--- a/apps/explorer/src/components/syntax-highlighter/SyntaxHighlighter.tsx
+++ b/apps/explorer/src/components/syntax-highlighter/SyntaxHighlighter.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useOnScreen } from '@iota/core';
+import { Theme, useOnScreen, useTheme } from '@iota/core';
 import { useRef, useEffect, useState } from 'react';
 import { Highlight, themes } from 'prism-react-renderer';
 import type { Language } from 'prism-react-renderer';
@@ -35,19 +35,25 @@ export function SyntaxHighlighter({
     const observerElem = useRef<HTMLDivElement | null>(null);
     const { isIntersecting } = useOnScreen(observerElem);
     const [loadedLines, setLoadedLines] = useState(MAX_LINES);
+    const { theme } = useTheme();
+
     useEffect(() => {
         if (isIntersecting) {
             setLoadedLines((prev) => prev + MAX_LINES);
         }
     }, [isIntersecting]);
+
+    const isDark = theme === Theme.Dark;
+    const codeTheme = isDark ? themes.oneDark : themes.github;
+
     return (
         <div className="overflow-auto whitespace-pre font-mono text-sm">
-            <Highlight code={code} language={language} theme={themes.github}>
+            <Highlight code={code} language={language} theme={codeTheme}>
                 {({ style, tokens, getLineProps, getTokenProps }) => (
                     <pre className="overflow-auto bg-transparent p-xs font-medium" style={style}>
                         {tokens.slice(0, loadedLines).map((line, i) => (
                             <div {...getLineProps({ line, key: i })} key={i} className="table-row">
-                                <div className="table-cell select-none pr-4 text-left text-primary-30 opacity-50">
+                                <div className="table-cell select-none pr-4 text-left text-primary-30 opacity-50 dark:text-primary-80">
                                     {i + 1}
                                 </div>
 

From 2aa311dfbd92657404b3ee150da9818640537f02 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:56:31 +0100
Subject: [PATCH 6/7] feat: add styles for small thumbnail view

---
 .../owned-objects/SmallThumbnailsView.tsx     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/explorer/src/components/owned-objects/SmallThumbnailsView.tsx b/apps/explorer/src/components/owned-objects/SmallThumbnailsView.tsx
index a75da63960c..c9095bc12c1 100644
--- a/apps/explorer/src/components/owned-objects/SmallThumbnailsView.tsx
+++ b/apps/explorer/src/components/owned-objects/SmallThumbnailsView.tsx
@@ -24,10 +24,8 @@ interface OwnObjectContainerProps {
 
 function OwnObjectContainer({ id, children }: OwnObjectContainerProps): JSX.Element {
     return (
-        <div className="w-full min-w-[150px] basis-1/2 md:min-w-[210px] md:basis-1/3">
-            <div className="rounded-xl p-xs hover:bg-neutral-92">
-                <ObjectLink display="block" objectId={id} label={children} />
-            </div>
+        <div className="rounded-xl p-xs hover:bg-neutral-92 dark:hover:bg-neutral-12">
+            <ObjectLink display="block" objectId={id} label={children} />
         </div>
     );
 }
@@ -84,17 +82,19 @@ export function SmallThumbnailsView({
     limit,
 }: SmallThumbnailsViewProps): JSX.Element {
     return (
-        <div className="flex h-full flex-row flex-wrap overflow-auto">
-            {loading && <SmallThumbnailsViewLoading limit={limit} />}
-            {data?.map((obj, index) => {
-                const id = obj.data?.objectId;
+        <div className="h-full overflow-auto">
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-y-xxs">
+                {loading && <SmallThumbnailsViewLoading limit={limit} />}
+                {data?.map((obj) => {
+                    const id = obj.data?.objectId;
 
-                return (
-                    <OwnObjectContainer key={id} id={id!}>
-                        <SmallThumbnail obj={obj} />
-                    </OwnObjectContainer>
-                );
-            })}
+                    return (
+                        <OwnObjectContainer key={id} id={id!}>
+                            <SmallThumbnail obj={obj} />
+                        </OwnObjectContainer>
+                    );
+                })}
+            </div>
         </div>
     );
 }

From 37ada2d5425d0adbfd04c82f7f2899847bb09fe2 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:34:46 +0100
Subject: [PATCH 7/7] fix: validators page title

---
 apps/explorer/src/pages/validators/Validators.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/explorer/src/pages/validators/Validators.tsx b/apps/explorer/src/pages/validators/Validators.tsx
index 7445f188f59..78e333cbf90 100644
--- a/apps/explorer/src/pages/validators/Validators.tsx
+++ b/apps/explorer/src/pages/validators/Validators.tsx
@@ -141,7 +141,9 @@ function ValidatorPageResult(): JSX.Element {
                     />
                 ) : (
                     <div className="flex w-full flex-col gap-xl">
-                        <div className="py-md--rs text-display-sm">Validators</div>
+                        <div className="py-md--rs text-display-sm text-neutral-10 dark:text-neutral-92">
+                            Validators
+                        </div>
                         <div className="flex w-full flex-col gap-md--rs md:h-40 md:flex-row">
                             {validatorStats.map((stat) => (
                                 <DisplayStats