fix new chat button and theme

UmstadAI · Mar 29, 2024 · ae66a0d · ae66a0d
1 parent c12f092
commit ae66a0d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 15 deletions.
diff --git a/components/delete-api-key-button.tsx b/components/delete-api-key-button.tsx
@@ -1,34 +1,70 @@
 'use client'
 
-import * as React from 'react'
-
-import { Button, type ButtonProps } from '@/components/ui/button'
-import { IconSpinner } from '@/components/ui/icons'
-import { cn } from '@/lib/utils'
-import Swal from 'sweetalert2'
+import * as React from 'react';
+import { Button, type ButtonProps } from '@/components/ui/button';
+import { IconSpinner } from '@/components/ui/icons';
+import { cn } from '@/lib/utils';
+import Swal from 'sweetalert2';
 
 interface DeleteApiKeyButtonProps extends ButtonProps {
-  text?: string
+  text?: string;
 }
 
 export function DeleteApiKeyButton({
   text = 'DELETE KEY',
   className,
   ...props
 }: DeleteApiKeyButtonProps) {
-  const [isLoading, setIsLoading] = React.useState(false)
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    const css = `
+      :root {
+        --swal-bg-color: #fff; /* Light mode background */
+        --swal-text-color: #000; /* Light mode text */
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --swal-bg-color: #333; /* Dark mode background */
+          --swal-text-color: #fff; /* Dark mode text */
+        }
+      }
+      .swal2-popup {
+        background-color: var(--swal-bg-color) !important;
+        color: var(--swal-text-color) !important;
+      }
+      .swal2-title {
+        color: var(--swal-text-color) !important;
+      }
+      .swal2-content {
+        color: var(--swal-text-color) !important;
+      }
+    `;
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+
+    style.type = 'text/css';
+    style.appendChild(document.createTextNode(css));
+    head.appendChild(style);
+
+    return () => {
+      head.removeChild(style);
+    };
+  }, []);
+
   function deleteApiKey(key: string) {
-    localStorage.removeItem('ai-token')
-    Swal.fire('Done!', 'You deleted your API Key from local storage', 'success')
+    localStorage.removeItem('ai-token');
+    Swal.fire('Done!', 'You deleted your API Key from local storage', 'success');
   }
+
   return (
     <>
       <Button
         variant="secondary"
         onClick={() => {
-          setIsLoading(true)
-          deleteApiKey('')
-          setIsLoading(false)
+          setIsLoading(true);
+          deleteApiKey('');
+          setIsLoading(false);
         }}
         disabled={isLoading}
         className={cn('flex', className)}
@@ -38,5 +74,5 @@ export function DeleteApiKeyButton({
         {text}
       </Button>
     </>
-  )
+  );
 }
diff --git a/components/header.tsx b/components/header.tsx
@@ -62,7 +62,7 @@ export async function Header() {
       <div>
         {session?.user ? (
           <div className="hidden items-center justify-center space-x-2 sm:flex">
-            <Link href="/" target="_blank" rel="nofollow" className="flex">
+            <Link href="/" rel="nofollow" className="flex">
               <Image src={Logo} alt="zkApp Umstad" className="h-16 w-16" />
               <div className={zen_tokyo_zoo.className}>
                 <h5 className="mt-5 hidden text-xl text-[#655bf7] dark:text-[#ffffff] md:flex">

diff --git a/components/sidebar.tsx b/components/sidebar.tsx
@@ -31,6 +31,7 @@ export function Sidebar({ children }: SidebarProps) {
             onClick={e => {
               e.preventDefault()
               router.push('/')
+              window.location.reload();
             }}
             className={cn(
               buttonVariants({ size: 'sm', variant: 'outline' }),