Skip to content

Commit

Permalink
style: update popover header colors
Browse files Browse the repository at this point in the history
  • Loading branch information
Majorfi committed Nov 29, 2023
1 parent afedf93 commit a688cd5
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 73 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
- Fix: On V3, we only display Polygon for now, as the V3 vaults are polygon only.
- Fix: Add Card for V3 on the index page.
- Nit: Minor CSS fixes on TVL display on Mobile for V3.
- Fix: Add the V3 line in the popover menu & fix some hook issue around the V3 color scheme.
- Fix: Add the V3 line in the popover menu & fix some hook issue around the V3 color scheme. Adapt the color scheme to the Dark, Light and V3.
- Rename path `vault-v3` to simple `v3`.
- Fix: Portals zap slippage too low.

Expand Down
160 changes: 88 additions & 72 deletions apps/common/components/AppHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,96 +47,112 @@ function Logo(): ReactElement {
}

function LogoPopover(): ReactElement {
const [isShowing, set_isShowing] = useState(false);
const [isShowing, set_isShowing] = useState(true);
const router = useRouter();
const {name} = useCurrentApp(router);
const {name: currentAppName} = useCurrentApp(router);

return (
<>
<Popover
onMouseEnter={(): void => set_isShowing(true)}
onMouseLeave={(): void => set_isShowing(false)}
className={'relative'}>
onMouseLeave={(): void => set_isShowing(false)}>
<div
onClick={(): void => set_isShowing(false)}
onMouseEnter={(): void => set_isShowing(false)}
className={cl(
'fixed inset-0 bg-neutral-900 backdrop-blur-sm transition-opacity',
!isShowing ? 'opacity-0 pointer-events-none' : 'opacity-50 pointer-events-auto'
)}
/>
<Popover.Button className={'z-20 flex items-center'}>
<Link href={'/'}>
<span className={'sr-only'}>{'Back to home'}</span>
<Logo />
</Link>
</Popover.Button>
<Transition
as={'div'}
show={isShowing}
enter={'transition ease-out duration-200'}
enterFrom={'opacity-0 translate-y-1'}
enterTo={'opacity-100 translate-y-0'}
leave={'transition ease-in duration-150'}
leaveFrom={'opacity-100 translate-y-0'}
leaveTo={'opacity-0 translate-y-1'}
className={'relative z-[9999999]'}>
<Popover.Panel
className={'absolute left-1/2 z-20 mt-6 w-80 -translate-x-1/2 px-4 pt-4 sm:px-0 md:w-[560px]'}>
<div className={'overflow-hidden rounded-sm shadow-xl'}>
<div
className={
'relative grid grid-cols-2 gap-2 border border-neutral-200/60 bg-neutral-0 p-6 md:grid-cols-5'
}>
<div className={'col-span-3 grid grid-cols-2 gap-2 md:grid-cols-3'}>
{[...Object.values(APPS)]
.filter(({isDisabled}): boolean => !isDisabled)
.filter(({name}): boolean => name !== 'V3')
.map(({name, href, icon}): ReactElement => {
return (
<Link
prefetch={false}
key={name}
href={href}
onClick={(): void => set_isShowing(false)}>
<div
onClick={(): void => set_isShowing(false)}
className={cl(
'flex cursor-pointer flex-col items-center justify-center transition-colors hover:bg-neutral-200',
'p-4 bg-neutral-100/40'
)}>
<div>{cloneElement(icon, {className: 'w-8 h-8'})}</div>
<div className={'pt-2 text-center'}>
<b className={'text-base'}>{name}</b>

<Transition.Root show={isShowing}>
<Transition.Child
as={'div'}
enter={'transition ease-out duration-200'}
enterFrom={'opacity-0 translate-y-1'}
enterTo={'opacity-100 translate-y-0'}
leave={'transition ease-in duration-150'}
leaveFrom={'opacity-100 translate-y-0'}
leaveTo={'opacity-0 translate-y-1'}
className={'relative z-[9999999]'}>
<Popover.Panel
className={'absolute left-1/2 z-20 w-80 -translate-x-1/2 px-4 pt-6 sm:px-0 md:w-[560px]'}>
<div className={'overflow-hidden pt-4 shadow-xl'}>
<div
className={cl(
'relative grid grid-cols-2 gap-2 border p-6 md:grid-cols-5',
currentAppName === 'V3'
? 'bg-[#000520] border-neutral-200/60 rounded-sm'
: 'bg-[#F4F4F4] dark:bg-[#282828] border-transparent'
)}>
<div className={'col-span-3 grid grid-cols-2 gap-2 md:grid-cols-3'}>
{[...Object.values(APPS)]
.filter(({isDisabled}): boolean => !isDisabled)
.filter(({name}): boolean => name !== 'V3')
.map(({name, href, icon}): ReactElement => {
return (
<Link
prefetch={false}
key={name}
href={href}
onClick={(): void => set_isShowing(false)}>
<div
onClick={(): void => set_isShowing(false)}
className={cl(
'flex cursor-pointer border flex-col items-center justify-center transition-colors p-4',
currentAppName !== 'V3'
? 'bg-[#EBEBEB] border-transparent hover:bg-[#c3c3c380] dark:bg-[#0C0C0C] hover:dark:bg-[#3d3d3d80]'
: 'bg-[#000520] hover:bg-[#33374d80] border-[#151C40]'
)}>
<div>{cloneElement(icon, {className: 'w-8 h-8'})}</div>
<div className={'pt-2 text-center'}>
<b className={'text-base'}>{name}</b>
</div>
</div>
</Link>
);
})}
</div>
<div className={'col-span-2 grid grid-cols-2 gap-2 md:grid-cols-3'}>
<Link
prefetch={false}
key={currentAppName}
href={'/v3'}
className={'col-span-3 row-span-2'}
onClick={(): void => set_isShowing(false)}>
<div
className={cl(
'relative flex h-full w-full cursor-pointer flex-col items-center justify-center transition-all rounded-sm p-4',
currentAppName !== 'V3'
? 'bg-[#EBEBEB] hover:bg-[#c3c3c380] dark:bg-[#0C0C0C] hover:dark:bg-[#3d3d3d80]'
: 'bg-[#010A3B] hover:brightness-125'
)}>
<div className={'z-10 flex w-full flex-col items-center'}>
<V3Logo className={'h-20'} />
<div className={'-mb-2 pt-4 text-center'}>
<p
className={cl(
'font-bold text-black dark:text-white text-sm',
'whitespace-break-spaces'
)}>
{`Discover\nBrand New Vaults`}
</p>
</div>
</Link>
);
})}
</div>
<div className={'col-span-2 grid grid-cols-2 gap-2 md:grid-cols-3'}>
<Link
prefetch={false}
key={name}
href={'/v3'}
className={'col-span-3 row-span-2'}
onClick={(): void => set_isShowing(false)}>
<div
className={cl(
'relative flex h-full w-full cursor-pointer flex-col items-center justify-center transition-all',
'bg-[#010A3B] hover:brightness-125 rounded-sm'
)}>
<div className={'z-10 flex w-full flex-col items-center'}>
<V3Logo className={'h-20'} />
<div className={'-mb-2 pt-4 text-center'}>
<p
className={cl(
'font-bold text-white text-sm',
'whitespace-break-spaces'
)}>
{`Discover\nBrand New Vaults`}
</p>
</div>
</div>
</div>
</Link>
</Link>
</div>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</Popover.Panel>
</Transition.Child>
</Transition.Root>
</Popover>
</>
);
Expand Down

0 comments on commit a688cd5

Please sign in to comment.