Revamp header design

sippy-platform · Aug 9, 2023 · 3d7235f · 3d7235f
1 parent 6b04d25
commit 3d7235f
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 53 deletions.
diff --git a/site/pages/_app.js b/site/pages/_app.js
@@ -1,8 +1,9 @@
-import { CssVarsProvider } from "@mui/joy";
+import { CssBaseline, CssVarsProvider } from "@mui/joy";
 
 function MyApp({ Component, pageProps }) {
   return (
     <CssVarsProvider>
+      <CssBaseline />
       <Component {...pageProps} />
     </CssVarsProvider>
   );

diff --git a/site/pages/icons/[slug].js b/site/pages/icons/[slug].js
@@ -35,26 +35,30 @@ function PostTemplate({ data, slug }) {
         <meta name="description" content="The Valkyrie Icon set." />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
-        <NextLink href="/" legacyBehavior>
-          <IconButton href="/">
+      <Stack
+        direction="row"
+        spacing={1}
+        justifyContent="flex-start"
+        alignItems="center"
+        sx={{ py: 2 }}
+      >
+        <NextLink href="/">
+          <IconButton variant="outlined">
             <ValkyrieIcon icon={Icons.viArrowLeft} />
           </IconButton>
         </NextLink>
         <Typography
           level="h1"
-          fontSize="xl4"
-          fontWeight="xl"
           sx={{
-            backgroundImage: "linear-gradient(135deg, #0062ff, #9238ff)",
+            display: "inline",
+            backgroundImage: "linear-gradient(135deg, #0061c9, #c455f7)",
             WebkitBackgroundClip: "text",
             WebkitTextFillColor: "transparent"
           }}
         >
           Valkyrie
         </Typography>
-      </Box>
-      <Divider sx={{ my: 2 }} />
+      </Stack>
       <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
         <Typography level="h1" fontSize="xl3" fontWeight="xl">
           {frontmatter.title}
@@ -63,12 +67,12 @@ function PostTemplate({ data, slug }) {
       {(frontmatter.categories || frontmatter.tags) && (
         <Box sx={{ display: "flex", gap: 0.5, alignItems: "center", mt: 2 }}>
           {frontmatter.categories?.map(cat => (
-            <Chip variant="solid" color="primary" key={cat}>{cat}</Chip>
+            <Chip variant="solid" color="primary" key={cat}>
+              {cat}
+            </Chip>
           ))}
           {frontmatter.tags?.map(tag => (
-            <Chip key={tag}>
-              {tag}
-            </Chip>
+            <Chip key={tag}>{tag}</Chip>
           ))}
         </Box>
       )}

diff --git a/site/pages/index.js b/site/pages/index.js
@@ -1,16 +1,14 @@
 import {
   Box,
-  Button,
-  Card,
-  CardOverflow,
   Container,
   Divider,
   Grid,
   Link,
   Input,
   Typography,
   Stack,
-  Sheet
+  Sheet,
+  IconButton
 } from "@mui/joy";
 import Head from "next/head";
 import fs from "fs";
@@ -67,20 +65,19 @@ export default function Home({ icons }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <Typography
-        level="h1"
-        sx={{
-          display: "inline",
-          lineHeigth: 1.75,
-          backgroundImage: "linear-gradient(135deg, #0062ff, #9238ff)",
-          WebkitBackgroundClip: "text",
-          WebkitTextFillColor: "transparent",
-          fontWeight: 700
-        }}
-      >
-        Valkyrie
-      </Typography>
-      <Divider sx={{ my: 2 }} />
+      <Stack direction="row" spacing={1} justifyContent="flex-start" alignItems="center" sx={{ py: 2 }}>
+        <Typography
+          level="h1"
+          sx={{
+            display: 'inline',
+            backgroundImage: "linear-gradient(135deg, #0061c9, #c455f7)",
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent"
+          }}
+        >
+          Valkyrie
+        </Typography>
+      </Stack>
       <Box
         sx={{
           display: "flex",
@@ -99,7 +96,7 @@ export default function Home({ icons }) {
           value={needle}
           onChange={e => {
             setNeedle(e.target.value);
-            setPage(0)
+            setPage(0);
           }}
         />
       </Box>
@@ -112,7 +109,8 @@ export default function Home({ icons }) {
                 gap: 0,
                 borderRadius: "sm",
                 "&:hover, &:focus-within": {
-                  boxShadow: "md",
+                  backgroundColor:
+                    "rgba(var(--joy-palette-primary-mainChannel) / .0625)",
                   "& > div > a > .MuiTypography-root": {
                     backgroundColor:
                       "rgba(var(--joy-palette-primary-mainChannel) / .125)"
@@ -143,9 +141,9 @@ export default function Home({ icons }) {
                     noWrap
                     level="body-sm"
                     sx={{
-                      px: .5,
-                      py: .25,
-                      borderRadius: 'sm',
+                      px: 0.5,
+                      py: 0.25,
+                      borderRadius: "sm",
                       fontFamily:
                         "SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace"
                     }}
@@ -158,33 +156,33 @@ export default function Home({ icons }) {
           </Grid>
         ))}
         <Grid xs={12}>
-          <Box
-            sx={{
-              mb: 3,
-              display: "flex",
-              gap: 1,
-              justifyContent: "center",
-              alignItems: "center"
-            }}
+          <Stack
+            direction="row"
+            justifyContent="center"
+            alignItems="center"
+            gap={1}
+            sx={{ mb: 3 }}
           >
-            <Button
+            <IconButton
+              variant="solid"
+              color="primary"
               onClick={() => setPage(prev => prev - 1)}
               disabled={page === 0}
-              startDecorator={<ValkyrieIcon icon={Icons.viChevronLeft} />}
             >
-              Previous
-            </Button>
+              <ValkyrieIcon icon={Icons.viChevronLeft} />
+            </IconButton>
             <Typography>
               {page + 1}/{Math.ceil(result.length / 42)}
             </Typography>
-            <Button
+            <IconButton
+              variant="solid"
+              color="primary"
               onClick={() => setPage(prev => prev + 1)}
               disabled={page === Math.ceil(result.length / 42) - 1}
-              endDecorator={<ValkyrieIcon icon={Icons.viChevronRight} />}
             >
-              Next
-            </Button>
-          </Box>
+              <ValkyrieIcon icon={Icons.viChevronRight} />
+            </IconButton>
+          </Stack>
         </Grid>
       </Grid>
     </Container>