feat: fixing the theme contrast issue

hirosystems · Jan 14, 2025 · 7023dc2 · 7023dc2
1 parent 8c22b2a
commit 7023dc2
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 9 deletions.
diff --git a/src/app/_components/BlockList/Grouped/skeleton.tsx b/src/app/_components/BlockList/Grouped/skeleton.tsx
@@ -180,8 +180,8 @@ export function BlocksPageBlockListSkeleton() {
   return (
     // TODO: fix this loading state
     <BlocksPageBlockListLayout>
-      <BlocksPageControlsSkeleton horizontal />
-      <UpdateBarSkeleton />
+      {/* <BlocksPageControlsSkeleton horizontal /> */}
+      {/* <UpdateBarSkeleton /> */}
       <BlocksPageBlockListGroupedSkeleton />
     </BlocksPageBlockListLayout>
   );

diff --git a/src/app/_components/BlockList/Ungrouped/skeleton.tsx b/src/app/_components/BlockList/Ungrouped/skeleton.tsx
@@ -7,6 +7,7 @@ import { Caption } from '../../../../ui/typography';
 import { BlockListGridHeaderRowSkeleton } from '../Grouped/skeleton';
 import { LineAndNode } from '../LineAndNode';
 import { BtcBlockRowLayout, StxBlocksGridLayout } from './BlockListUngrouped';
+import StxIcon from '@/ui/icons/StxIcon';
 
 export function BlockListRowSkeleton({
   minimized,
@@ -18,8 +19,8 @@ export function BlockListRowSkeleton({
   isFirst?: boolean;
 }) {
   const icon = isFirst ? (
-    <Icon h={2.5} w={2.5} fill="borderPrimary">
-      <Circle />
+    <Icon h={2.5} w={2.5} fill="white">
+      <StxIcon />
     </Icon>
   ) : null;
   return minimized ? (

diff --git a/src/app/blocks/PageClient.tsx b/src/app/blocks/PageClient.tsx
@@ -5,7 +5,6 @@ import dynamic from 'next/dynamic';
 
 import { BlocksPageBlockListSkeleton } from '../_components/BlockList/Grouped/skeleton';
 import { PageTitle } from '../_components/PageTitle';
-import BlocksPageSkeleton from './skeleton';
 
 const BlocksPageBlockListDynamic = dynamic(
   () =>

diff --git a/src/app/blocks/skeleton.tsx b/src/app/blocks/skeleton.tsx
@@ -7,8 +7,9 @@ import { BlocksPageLayout } from './PageClient';
 export default function BlocksPageSkeleton() {
   return (
     <BlocksPageLayout
-      title={<PageTitle>Recent Blocks</PageTitle>}
+      title={<PageTitle>Recent Blocks</PageTitle>} // TODO:  fix this loading state
       blocksList={<BlocksPageBlockListSkeleton />}
+      // blocksList={null}
     />
   );
 }
diff --git a/src/components/ui/color-mode.tsx b/src/components/ui/color-mode.tsx
@@ -34,14 +34,19 @@ export function useColorMode() {
   const { resolvedTheme, setTheme } = useTheme();
   const setThemeCookie = useUpdateThemeCookie();
 
-  const toggleColorMode = () => {
+  const toggleColorMode = useCallback(() => {
     setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
     setThemeCookie(resolvedTheme === 'light' ? 'dark' : 'light');
-  };
+  }, [setTheme, setThemeCookie, resolvedTheme]);
+
+  const setColorMode = useCallback((theme: 'light' | 'dark') => {
+    setTheme(theme);
+    setThemeCookie(theme);
+  }, [setTheme, setThemeCookie]);
 
   return {
     colorMode: resolvedTheme || 'light',
-    setColorMode: setTheme,
+    setColorMode,
     toggleColorMode,
   };
 }

diff --git a/src/ui/theme/sizes.ts b/src/ui/theme/sizes.ts
@@ -20,6 +20,7 @@ import { SPACE } from './space';
 
 export const CURRENT_SIZES = {
   4.5: { value: '1.125rem' },
+  60: { value: '3.75rem' },
   150: { value: '9.375rem' },
 };