Update styles to match to openai's panel button (#595)

This commit is contained in:
David 2023-07-07 03:25:17 +09:00 committed by GitHub
parent da17649557
commit 684ffd8e66
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 27 deletions

View file

@ -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"

View file

@ -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">

View file

@ -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>
);

View file

@ -9,7 +9,7 @@
}
.nav-close-button {
margin-left: 10px;
margin-left: 8px;
}
.nav {