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 <[email protected]>
iotaledger · Nov 26, 2024 · 26c2cbf · 26c2cbf
1 parent 3ed9c13
commit 26c2cbf
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,17 +35,20 @@ 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
                     title="Popular Packages"
                     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
@@ -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}