From 6a4ff9c307c74b718824e154a23e127cfecb218c Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Wed, 23 Mar 2022 18:47:21 -0700
Subject: [PATCH] client: theme fixes and adjust visibility badge spacing on
 post view

---
 client/components/app/index.tsx       | 29 +++++++++++++++++++++++----
 client/components/post-page/index.tsx |  5 ++++-
 client/styles/globals.css             |  2 +-
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/client/components/app/index.tsx b/client/components/app/index.tsx
index 77b4f1b1..fbc09f3d 100644
--- a/client/components/app/index.tsx
+++ b/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,14 +12,35 @@ 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} />
         </SkeletonTheme>
-    </GeistProvider>)
+    </GeistProvider >)
 }
 
 export default App
\ No newline at end of file
diff --git a/client/components/post-page/index.tsx b/client/components/post-page/index.tsx
index 8484beb3..a6b04252 100644
--- a/client/components/post-page/index.tsx
+++ b/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
diff --git a/client/styles/globals.css b/client/styles/globals.css
index b68a3cac..4062f31a 100644
--- a/client/styles/globals.css
+++ b/client/styles/globals.css
@@ -32,7 +32,7 @@
 	--highlight: #2e2e2e;
 
 	/* Dark Mode Colors */
-	--bg: #0e0e0e;
+	--bg: #000;
 	--fg: #fafbfc;
 	--gray: #666;
 	--light-gray: #444;