From 684ffd8e66b736d0fa96d86f1e14cf4aff78c68d Mon Sep 17 00:00:00 2001
From: David <42793498+dncc89@users.noreply.github.com>
Date: Fri, 7 Jul 2023 03:25:17 +0900
Subject: [PATCH] Update styles to match to openai's panel button (#595)

---
 client/src/components/Nav/NewChat.jsx |  2 +-
 client/src/components/Nav/index.jsx   |  4 +--
 client/src/components/svg/Panel.jsx   | 42 ++++++++++++---------------
 client/src/mobile.css                 |  2 +-
 4 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Nav/NewChat.jsx b/client/src/components/Nav/NewChat.jsx
index 5effd970a5..8d2300dd8e 100644
--- a/client/src/components/Nav/NewChat.jsx
+++ b/client/src/components/Nav/NewChat.jsx
@@ -13,7 +13,7 @@ export default function NewChat() {
   return (
     <a
       onClick={clickHandler}
-      className="mb-2 flex flex-grow flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
+      className="mb-2 flex flex-grow flex-shrink-0 h-11 cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
     >
       <svg
         stroke="currentColor"
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index 9810197a4a..f64d44bb05 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -179,7 +179,7 @@ export default function Nav({ navVisible, setNavVisible }) {
         <div className="flex h-full min-h-0 flex-col ">
           <div className="scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20">
             <nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
-              <div className='flex flex-row'>
+              <div className='flex flex-row h-11'>
                 <NewChat />
                 <button
                   type='button'
@@ -223,7 +223,7 @@ export default function Nav({ navVisible, setNavVisible }) {
       {!navVisible && (
         <button
           type="button"
-          className="nav-open-button mt-1 fixed left-2 top-0.5 z-10 inline-flex h-10 w-10 items-center justify-center rounded-md border text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-white dark:text-gray-500 dark:hover:text-gray-400"
+          className="nav-open-button mt-1 fixed left-2 top-0.5 z-10 inline-flex h-11 w-11 items-center justify-center rounded-md border border-black/10 dark:border-white/20 bg-white dark:bg-gray-800 text-black hover:text-gray-500 dark:text-white dark:hover:text-gray-400"
           onClick={toggleNavVisible}
         >
           <div className="flex items-center justify-center">
diff --git a/client/src/components/svg/Panel.jsx b/client/src/components/svg/Panel.jsx
index 561ea5ed39..bb62833de9 100644
--- a/client/src/components/svg/Panel.jsx
+++ b/client/src/components/svg/Panel.jsx
@@ -1,41 +1,37 @@
-import { cn } from '~/utils/';
-
-export default function Panel({ open = false, className }) {
+export default function Panel({ open = false }) {
   const openPanel = (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className={cn('lucide lucide-panel-right-close', className)}
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
-      <line x1="15" x2="15" y1="3" y2="21" />
-      <path d="m8 9 3 3-3 3" />
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+      <line x1="9" y1="3" x2="9" y2="21"></line>
     </svg>
   );
 
   const closePanel = (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className={cn('lucide lucide-panel-left-close', className)}
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
-      <path d="M9 3v18" />
-      <path d="m16 15-3-3 3-3" />
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+      <line x1="9" y1="3" x2="9" y2="21"></line>
     </svg>
   );
 
diff --git a/client/src/mobile.css b/client/src/mobile.css
index 5786b1a575..34f5bb5250 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -9,7 +9,7 @@
 }
 
 .nav-close-button {
-  margin-left: 10px;
+  margin-left: 8px;
 }
 
 .nav {