From 14f779b817d899445d894336ba005d6c785349ce Mon Sep 17 00:00:00 2001
From: dogukan <dogukanakarc@gmail.com>
Date: Sat, 30 Mar 2024 23:51:59 +0300
Subject: [PATCH] fix reviews

---
 components/delete-api-key-button.tsx  | 30 +++++---------------------
 components/header.tsx                 | 25 ++++++++-------------
 components/ui/icons.tsx               | 31 ++++++++++++++++++++++++++-
 lib/styles/sweetalert2CustomStyles.ts | 22 +++++++++++++++++++
 4 files changed, 66 insertions(+), 42 deletions(-)
 create mode 100644 lib/styles/sweetalert2CustomStyles.ts

diff --git a/components/delete-api-key-button.tsx b/components/delete-api-key-button.tsx
index 85ee146..45e99aa 100644
--- a/components/delete-api-key-button.tsx
+++ b/components/delete-api-key-button.tsx
@@ -5,6 +5,7 @@ import { Button, type ButtonProps } from '@/components/ui/button';
 import { IconSpinner } from '@/components/ui/icons';
 import { cn } from '@/lib/utils';
 import Swal from 'sweetalert2';
+import { swalCustomStyles } from '@/lib/styles/sweetalert2CustomStyles';
 
 interface DeleteApiKeyButtonProps extends ButtonProps {
   text?: string;
@@ -18,39 +19,18 @@ export function DeleteApiKeyButton({
   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));
+    style.appendChild(document.createTextNode(swalCustomStyles));
     head.appendChild(style);
-
+  
     return () => {
       head.removeChild(style);
     };
   }, []);
+  
 
   function deleteApiKey(key: string) {
     localStorage.removeItem('ai-token');
diff --git a/components/header.tsx b/components/header.tsx
index 86a7ce4..5a34888 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -9,13 +9,12 @@ import { auth } from '@/auth'
 import { clearChats } from '@/app/actions'
 import { Button, buttonVariants } from '@/components/ui/button'
 import { Sidebar } from '@/components/sidebar'
-import { IconGitHub, IconSeparator } from '@/components/ui/icons'
+import { IconBug, IconGitHub, IconSeparator } from '@/components/ui/icons'
 import { SidebarFooter } from '@/components/sidebar-footer'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { ClearHistory } from '@/components/clear-history'
 import { UserMenu } from '@/components/user-menu'
 import Logo from '@/assets/logo/logo.svg'
-import Bug from '@/assets/logo/bug.svg'
 import dynamic from 'next/dynamic'
 
 const zen_tokyo_zoo = Nunito({
@@ -62,7 +61,7 @@ export async function Header() {
       <div>
         {session?.user ? (
           <div className="hidden items-center justify-center space-x-2 sm:flex">
-            <Link href="/" rel="nofollow" className="flex">
+            <Link href="/" target="_blank" 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">
@@ -87,19 +86,13 @@ export async function Header() {
           <span className="ml-2 hidden md:flex">GitHub</span>
         </a>
         <a
-          href="https://github.com/UmstadAI/zkAppUmstad/issues"
-          target="_blank"
-          className={cn(buttonVariants())}
-        >
-          <Image 
-          src={Bug} 
-          alt="Report a Bug" 
-          width={20} 
-          height={20} 
-          className="sm:hidden" 
-        />
-          <span className="hidden sm:block">Report a Bug</span>
-        </a>
+        href="https://github.com/UmstadAI/zkAppUmstad/issues"
+        target="_blank"
+        className={cn(buttonVariants())}
+      >
+        <IconBug className="h-5 w-5 sm:hidden" />
+        <span className="hidden sm:block">Report a Bug</span>
+      </a>
       </div>
     </header>
   )
diff --git a/components/ui/icons.tsx b/components/ui/icons.tsx
index 8562b6b..721f866 100644
--- a/components/ui/icons.tsx
+++ b/components/ui/icons.tsx
@@ -451,6 +451,34 @@ function IconChevronUpDown({
   )
 }
 
+function IconBug({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 432.458 432.458"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('sm:hidden', className)} 
+      {...props}
+    >
+      <path d="M322.743,106.629c-2.778-4.518-5.731-8.889-8.873-13.08c-25.777-34.375-60.453-53.307-97.641-53.307
+		s-71.864,18.932-97.641,53.307c-3.143,4.191-6.095,8.562-8.874,13.08c20.061,31.973,60.275,53.85,106.514,53.85
+		C262.469,160.479,302.683,138.602,322.743,106.629z"/>
+      <path d="M417.458,201.755h-65.606c-0.808-12.567-2.625-24.87-5.406-36.742l51.575-51.576
+		c5.858-5.858,5.858-15.355,0-21.213c-5.857-5.858-15.355-5.858-21.213,0l-25.966,25.966c-7.348,12.845-17.202,24.674-29.365,35.028
+		c-24.637,20.972-56.246,33.718-90.248,36.621v202.376c31.443-4.39,60.365-22.55,82.641-52.255
+		c3.907-5.21,7.536-10.687,10.881-16.395l52.058,52.058c2.929,2.929,6.768,4.393,10.607,4.393c3.838,0,7.678-1.465,10.606-4.393
+		c5.858-5.858,5.858-15.355,0-21.213l-59.579-59.58c7.427-19.594,11.986-40.927,13.41-63.076h65.606c8.284,0,15-6.716,15-15
+		C432.458,208.471,425.742,201.755,417.458,201.755z"/>
+      <path d="M201.23,189.84c-34.003-2.903-65.612-15.649-90.249-36.621c-12.163-10.354-22.017-22.183-29.365-35.028
+		L55.65,92.224c-5.858-5.858-15.356-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213l51.575,51.575
+		c-2.78,11.873-4.598,24.175-5.406,36.742H15c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h65.606
+		c1.424,22.149,5.983,43.482,13.41,63.076l-59.579,59.579c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.858,15.355,5.858,21.213,0
+		l52.058-52.058c3.345,5.708,6.974,11.185,10.881,16.395c22.274,29.705,51.197,47.866,82.641,52.255V189.84z"/>
+    </svg>
+  );
+}
+
+
 export {
   IconEdit,
   IconOpenAI,
@@ -480,5 +508,6 @@ export {
   IconUsers,
   IconExternalLink,
   IconLogout,
-  IconChevronUpDown
+  IconChevronUpDown,
+  IconBug,
 }
diff --git a/lib/styles/sweetalert2CustomStyles.ts b/lib/styles/sweetalert2CustomStyles.ts
new file mode 100644
index 0000000..9568247
--- /dev/null
+++ b/lib/styles/sweetalert2CustomStyles.ts
@@ -0,0 +1,22 @@
+export const swalCustomStyles = `
+  :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;
+  }
+`;