From 341aae53a9ae451be18d2561260028a9c95cb85a Mon Sep 17 00:00:00 2001
From: Elias Almqvist <elalmqvist@gmail.com>
Date: Fri, 29 Mar 2024 15:49:05 +0100
Subject: [PATCH] More stuff

---
 src/app/globals.css               | 86 +++++++++++++------------------
 src/app/layout.tsx                |  8 +--
 src/components/binds/binds.tsx    | 33 ------------
 src/components/binds/index.tsx    |  2 +-
 src/components/binds/navbinds.tsx | 16 ++----
 src/components/layout/header.tsx  | 13 ++---
 src/components/layout/index.tsx   |  2 +-
 src/components/layout/nav.tsx     |  6 +--
 8 files changed, 55 insertions(+), 111 deletions(-)
 delete mode 100644 src/components/binds/binds.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index ba2a9a1..59c48af 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -5,64 +5,47 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
+    --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
+    --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
-
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
   }
 }
 
@@ -73,4 +56,5 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
+
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f5235e0..60b66bb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Inter as FontSans } from "next/font/google";
+import { Lato as FontSans } from "next/font/google";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -12,8 +12,8 @@ import { ThemeProvider } from "@/components/theme-provider";
 import Layout from "@/components/layout";
 
 const fontSans = FontSans({
-  subsets: ["latin"],
-  variable: "--font-sans",
+  weight: ["400", "700"],
+  subsets: ["latin", "latin-ext"],
 });
 
 export default function RootLayout({
@@ -25,7 +25,7 @@ export default function RootLayout({
     <html lang="en">
       <body
         className={cn(
-          "min-h-screen bg-background text-foreground font-sans antialiased",
+          "min-h-screen bg-background text-foreground antialiased",
           fontSans.className,
         )}
       >
diff --git a/src/components/binds/binds.tsx b/src/components/binds/binds.tsx
deleted file mode 100644
index 41db0f4..0000000
--- a/src/components/binds/binds.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import Keybinds from "@/components/binds";
-import { useActionCommand } from "@/hooks/useActionCommand";
-import { useTheme } from "next-themes";
-
-const NavBinds = () => {
-  const router = useRouter();
-  const { open: actionOpen, setOpen: setActionOpen } = useActionCommand();
-  const { theme, setTheme } = useTheme();
-
-  return (
-    <Keybinds
-      keybinds={{
-        h: () => {
-          router.push("/");
-        },
-        p: () => {
-          router.push("/posts");
-        },
-        k: () => {
-          setActionOpen(!actionOpen);
-        },
-        l: () => {
-          setTheme(theme === "light" ? "dark" : "light");
-        },
-      }}
-    />
-  );
-};
-
-export default NavBinds;
diff --git a/src/components/binds/index.tsx b/src/components/binds/index.tsx
index 367d40c..731bd90 100644
--- a/src/components/binds/index.tsx
+++ b/src/components/binds/index.tsx
@@ -32,7 +32,7 @@ const Keybinds: React.FC<KeybindsProps> = ({ keybinds }) => {
     return () => document.removeEventListener("keydown", keyDownHandler);
   });
 
-  return <div className="" id="keybinds_handler" />;
+  return <div className="hidden" id="keybinds_handler" />;
 };
 
 export default Keybinds;
diff --git a/src/components/binds/navbinds.tsx b/src/components/binds/navbinds.tsx
index e67b8a0..41db0f4 100644
--- a/src/components/binds/navbinds.tsx
+++ b/src/components/binds/navbinds.tsx
@@ -1,35 +1,27 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import Keybinds from "@/components/inputs/keybinds";
+import Keybinds from "@/components/binds";
 import { useActionCommand } from "@/hooks/useActionCommand";
-import { useSidebar } from "@/hooks/useSidebar";
 import { useTheme } from "next-themes";
 
 const NavBinds = () => {
   const router = useRouter();
   const { open: actionOpen, setOpen: setActionOpen } = useActionCommand();
-  const { open: sidebarOpen, setOpen: setSidebarOpen } = useSidebar();
   const { theme, setTheme } = useTheme();
 
   return (
     <Keybinds
       keybinds={{
-        f: () => {
+        h: () => {
           router.push("/");
         },
-        s: () => {
-          router.push("/settings");
-        },
-        h: () => {
-          router.push("/history");
+        p: () => {
+          router.push("/posts");
         },
         k: () => {
           setActionOpen(!actionOpen);
         },
-        g: () => {
-          setSidebarOpen(!sidebarOpen);
-        },
         l: () => {
           setTheme(theme === "light" ? "dark" : "light");
         },
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 113dab2..6a92f66 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -1,14 +1,15 @@
 import Logo from "@/components/logo";
 import { Separator } from "@/components/ui/separator";
 import Nav from "./nav";
+import Link from "next/link";
 
 const Header = () => (
-  <header className="w-full h-16 flex flex-col justify-center items-center mb-4">
-    <div className="py-4 flex flex-row justify-between w-full max-w-screen-lg">
-      <div className="flex flex-row items-center gap-x-2">
-        <Logo className="h-8 w-8" />
-        <span className="font-mono text-2xl">wych.dev</span>
-      </div>
+  <header className="w-full flex flex-col justify-center items-center">
+    <div className="py-2 px-4 md:px-8 flex flex-row justify-between w-full max-w-screen-2xl">
+      <Link href="/" className="flex flex-row items-center gap-x-2 hover:opacity-80 transition-opacity">
+        <Logo className="h-6 w-6" />
+        <span className="font-mono text-2xl hidden md:inline-block">wych.dev</span>
+      </Link>
       <Nav />
     </div>
     <Separator />
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index 9170b72..7a461eb 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -5,7 +5,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <Header />
-      <div className="max-w-screen-lg md:px-8">{children}</div>
+      <div className="max-w-screen-xl">{children}</div>
       <NavBinds />
     </>
   );
diff --git a/src/components/layout/nav.tsx b/src/components/layout/nav.tsx
index 1c9410b..a5e7cdf 100644
--- a/src/components/layout/nav.tsx
+++ b/src/components/layout/nav.tsx
@@ -55,15 +55,15 @@ const ActionCommand: React.FC<ActionCommandProps> = ({
       <Button
         variant="outline"
         className={cn(
-          "relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64",
+          "relative h-8 justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none pr-12 md:w-40 lg:w-64",
           className,
         )}
         onClick={() => setActionOpen(true)}
         {...props}
       >
-        <span className="hidden lg:inline-flex">Navigation...</span>
+        <span className="hidden lg:inline-flex">Search navigation...</span>
         <span className="inline-flex lg:hidden">Search...</span>
-        <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+        <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 flex">
           <span className="text-xs">⌘</span>K
         </kbd>
       </Button>