feat: use inverse color of "dark" sections

mwskwong · May 26, 2024 · b5993bd · b5993bd
1 parent 2a08461
commit b5993bd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -1,11 +1,11 @@
 import { SiRss } from '@icons-pack/react-simple-icons';
 import {
-  Box,
   Button,
   Chip,
   Container,
   Grid,
   IconButton,
+  Sheet,
   Stack,
   Typography,
 } from '@mui/joy';
@@ -119,10 +119,13 @@ const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
           {blog.content ? <Mdx source={blog.content} /> : null}
         </Container>
         <SectionDivider sx={{ bgcolor: contactMeBgColor }} />
-        <Box
+        <Sheet
+          invertedColors
+          color="primary"
           component="section"
           data-joy-color-scheme="dark"
           sx={{ bgcolor: contactMeBgColor }}
+          variant="solid"
         >
           <Container>
             <Stack
@@ -195,7 +198,7 @@ const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
               </Stack>
             </Stack>
           </Container>
-        </Box>
+        </Sheet>
       </main>
       <SectionDivider
         sx={{ color: contactMeBgColor, bgcolor: 'var(--Footer-bg)' }}

diff --git a/src/components/home/interesting-fact.tsx b/src/components/home/interesting-fact.tsx
@@ -1,9 +1,9 @@
 import {
-  Box,
-  type BoxProps,
   Button,
   Container,
   Link,
+  Sheet,
+  type SheetProps,
   Stack,
   Tooltip,
   Typography,
@@ -14,12 +14,18 @@ import { getTechStack } from '@/lib/queries';
 
 import { Image } from '../image';
 
-export type InterestingFactProps = Omit<BoxProps<'section'>, 'children'>;
+export type InterestingFactProps = Omit<SheetProps<'section'>, 'children'>;
 export const InterestingFact: FC<InterestingFactProps> = async (props) => {
   const techStack = await getTechStack();
 
   return (
-    <Box component="section" {...props}>
+    <Sheet
+      invertedColors
+      color="primary"
+      component="section"
+      variant="solid"
+      {...props}
+    >
       <Container>
         <Stack
           spacing={8}
@@ -63,6 +69,6 @@ export const InterestingFact: FC<InterestingFactProps> = async (props) => {
           </Button>
         </Stack>
       </Container>
-    </Box>
+    </Sheet>
   );
 };