fixing header icons (once again)

components/comments/comment-actions.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { ReplyIcon, EditIcon, Trash2Icon, EllipsisIcon, Loader2Icon } from "lucide-react";
 import { toast } from "sonner";
+import { ReplyIcon, EditIcon, Trash2Icon, EllipsisIcon, Loader2Icon } from "lucide-react";
 import Button from "@/components/ui/button";
 import {
   DropdownMenu,

components/comments/comment-form.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useTransition } from "react";
 import { getImageProps } from "next/image";
-import { InfoIcon, Loader2Icon } from "lucide-react";
 import { toast } from "sonner";
+import { InfoIcon, Loader2Icon } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import Button from "@/components/ui/button";
 import Textarea from "@/components/ui/textarea";

components/comments/sign-in.tsx

@@ -2,6 +2,7 @@
 
 import { env } from "@/lib/env";
 import { useState } from "react";
+import { toast } from "sonner";
 import { Loader2Icon } from "lucide-react";
 import Button from "@/components/ui/button";
 import { GitHubIcon } from "@/components/icons";
@@ -20,6 +21,7 @@ const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
       });
     } catch (error) {
       console.error("Error signing in:", error);
+      toast.error("There was a problem signing in.");
       setIsLoading(false);
     }
   };

components/layout/menu-item.tsx

@@ -35,7 +35,7 @@ const MenuItem = ({
         href={href}
         aria-label={text}
         data-current={current || undefined}
-        className="text-foreground/85 hover:border-ring/80 data-current:border-primary/60! inline-flex items-center border-b-3 border-b-transparent hover:no-underline"
+        className="text-foreground/85 hover:border-b-ring/80 data-current:border-b-primary/60 inline-flex items-center hover:no-underline"
       >
         {item}
       </Link>

components/layout/menu.tsx

@@ -37,14 +37,20 @@ const Menu = ({ className, ...rest }: React.ComponentProps<"div">) => {
 
   return (
     <div
-      className={cn("flex max-w-2/3 flex-row justify-between md:max-w-none md:justify-end md:gap-4", className)}
+      className={cn(
+        "flex max-w-2/3 flex-row items-center justify-between md:max-w-none md:justify-end md:gap-4",
+        className
+      )}
       {...rest}
     >
       {menuItems.map((item, index) => {
         const isCurrent = item.href?.split("/")[1] === segment;
 
         return (
-          <div className="mt-[3px] inline-block last:-mr-2.5 max-sm:first:hidden **:[a,button]:p-2.5" key={index}>
+          <div
+            className="inline-flex items-center last:-mr-2.5 max-sm:first:hidden **:[a,button]:border-y-3 **:[a,button]:border-y-transparent **:[a,button]:p-2.5"
+            key={index}
+          >
             <MenuItem {...item} current={isCurrent} />
           </div>
         );

components/layout/theme-toggle.tsx

@@ -12,14 +12,11 @@ const ThemeToggle = ({ className, ...rest }: React.ComponentProps<"button">) =>
     <button
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       aria-label="Toggle theme"
-      className={cn(
+      className={cn("hover:[&_svg]:stroke-warning block cursor-pointer bg-transparent", className)}
-        "hover:[&_svg]:stroke-warning block cursor-pointer bg-transparent not-dark:[&_.lucide-moon]:hidden dark:[&_.lucide-sun]:hidden",
-        className
-      )}
       {...rest}
     >
-      <SunIcon />
+      <SunIcon className="dark:hidden" />
-      <MoonIcon />
+      <MoonIcon className="not-dark:hidden" />
       <span className="sr-only">Toggle theme</span>
     </button>
   );

lib/db/import.ts

@@ -1,5 +1,4 @@
 import "dotenv/config";
-import { env } from "@/lib/env";
 import { eq } from "drizzle-orm";
 import { graphql } from "@octokit/graphql";
 import { db } from "@/lib/db";
@@ -8,7 +7,7 @@ import * as schema from "@/lib/db/schema";
 // GitHub GraphQL API authentication
 const graphqlWithAuth = graphql.defaults({
   headers: {
-    authorization: `token ${env.GITHUB_TOKEN}`,
+    authorization: `token ${process.env.GITHUB_TOKEN}`,
   },
 });