client: theme fixes and adjust visibility badge spacing on post view

client/components/app/index.tsx

@@ -1,4 +1,4 @@
-import { GeistProvider, CssBaseline } from "@geist-ui/core"
+import { GeistProvider, CssBaseline, Themes } from "@geist-ui/core"
 import type { NextComponentType, NextPageContext } from "next"
 import { SkeletonTheme } from "react-loading-skeleton"
 import { useTheme } from 'next-themes'
@@ -12,9 +12,30 @@ const App = ({
     const skeletonBaseColor = 'var(--light-gray)'
     const skeletonHighlightColor = 'var(--lighter-gray)'
 
-    const { theme } = useTheme();
+    const customTheme = Themes.createFromLight(
+        {
+            type: "custom",
+            palette: {
+                background: 'var(--bg)',
+                foreground: 'var(--fg)',
+                accents_1: 'var(--lightest-gray)',
+                accents_2: 'var(--lighter-gray)',
+                accents_3: 'var(--light-gray)',
+                accents_4: 'var(--gray)',
+                accents_5: 'var(--darker-gray)',
+                accents_6: 'var(--darker-gray)',
+                accents_7: 'var(--darkest-gray)',
+                accents_8: 'var(--darkest-gray)',
+                border: 'var(--gray)',
+            },
+            font: {
+                mono: 'var(--font-mono)',
+                sans: 'var(--font-sans)',
 
-    return (<GeistProvider themeType={theme}>
+            }
+        }
+    )
+    return (<GeistProvider themes={[customTheme]} themeType={"custom"} >
         <SkeletonTheme baseColor={skeletonBaseColor} highlightColor={skeletonHighlightColor}>
             <CssBaseline />
             <Component {...pageProps} />

client/components/post-page/index.tsx

@@ -7,6 +7,7 @@ import homeStyles from '@styles/Home.module.css'
 
 import type { File, Post } from "@lib/types"
 import { Page, Button, Text } from "@geist-ui/core"
+import ShiftBy from "@components/shift-by"
 
 type Props = {
     post: Post
@@ -45,7 +46,9 @@ const PostPage = ({ post }: Props) => {
                 <div className={styles.header}>
                     <div className={styles.titleAndBadge}>
                         <Text h2>{post.title}</Text>
-                        <span><VisibilityBadge visibility={post.visibility} /></span>
+                        <ShiftBy y={-5}>
+                            <VisibilityBadge visibility={post.visibility} />
+                        </ShiftBy>
                     </div>
                     <Button auto onClick={download}>
                         Download as ZIP archive

client/styles/globals.css

@@ -32,7 +32,7 @@
 	--highlight: #2e2e2e;
 
 	/* Dark Mode Colors */
-	--bg: #0e0e0e;
+	--bg: #000;
 	--fg: #fafbfc;
 	--gray: #666;
 	--light-gray: #444;