feat: adjust bottom navbar padding (#4550)

adjust bottom navbar padding

Co-authored-by: Charlie <charlie@uniswap.org>
This commit is contained in:
Charles Bachmeier 2022-08-31 09:57:42 -07:00 committed by GitHub
parent e733113963
commit cbdeae276e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 9 deletions

@ -126,7 +126,7 @@ export const MenuDropdown = () => {
<> <>
<Box position="relative" ref={ref}> <Box position="relative" ref={ref}>
<NavIcon isActive={isOpen} onClick={toggleOpen}> <NavIcon isActive={isOpen} onClick={toggleOpen}>
<EllipsisIcon width={28} height={28} /> <EllipsisIcon />
</NavIcon> </NavIcon>
{isOpen && ( {isOpen && (

@ -81,6 +81,8 @@ const baseMenuItem = style([
borderRadius: '12', borderRadius: '12',
transition: '250', transition: '250',
height: 'min', height: 'min',
width: 'full',
textAlign: 'center',
}), }),
{ {
lineHeight: '24px', lineHeight: '24px',

@ -101,8 +101,10 @@ const Navbar = () => {
</nav> </nav>
<Box className={styles.mobileBottomBar}> <Box className={styles.mobileBottomBar}>
<PageTabs /> <PageTabs />
<Box marginY="4">
<MenuDropdown /> <MenuDropdown />
</Box> </Box>
</Box>
</> </>
) )
} }

@ -304,35 +304,35 @@ export const InstagramIcon = (props: SVGProps) => (
) )
export const EllipsisIcon = (props: SVGProps) => ( export const EllipsisIcon = (props: SVGProps) => (
<svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path <path
d="M13.9974 15.1663C14.6417 15.1663 15.1641 14.644 15.1641 13.9997C15.1641 13.3553 14.6417 12.833 13.9974 12.833C13.3531 12.833 12.8307 13.3553 12.8307 13.9997C12.8307 14.644 13.3531 15.1663 13.9974 15.1663Z" d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
fill="currentColor" fill="currentColor"
/> />
<path <path
d="M22.1641 15.1663C22.8084 15.1663 23.3307 14.644 23.3307 13.9997C23.3307 13.3553 22.8084 12.833 22.1641 12.833C21.5197 12.833 20.9974 13.3553 20.9974 13.9997C20.9974 14.644 21.5197 15.1663 22.1641 15.1663Z" d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
fill="currentColor" fill="currentColor"
/> />
<path <path
d="M5.83073 15.1663C6.47506 15.1663 6.9974 14.644 6.9974 13.9997C6.9974 13.3553 6.47506 12.833 5.83073 12.833C5.1864 12.833 4.66406 13.3553 4.66406 13.9997C4.66406 14.644 5.1864 15.1663 5.83073 15.1663Z" d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
fill="currentColor" fill="currentColor"
/> />
<path <path
d="M13.9974 15.1663C14.6417 15.1663 15.1641 14.644 15.1641 13.9997C15.1641 13.3553 14.6417 12.833 13.9974 12.833C13.3531 12.833 12.8307 13.3553 12.8307 13.9997C12.8307 14.644 13.3531 15.1663 13.9974 15.1663Z" d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
stroke="currentColor" stroke="currentColor"
strokeWidth="2.5" strokeWidth="2.5"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> />
<path <path
d="M22.1641 15.1663C22.8084 15.1663 23.3307 14.644 23.3307 13.9997C23.3307 13.3553 22.8084 12.833 22.1641 12.833C21.5197 12.833 20.9974 13.3553 20.9974 13.9997C20.9974 14.644 21.5197 15.1663 22.1641 15.1663Z" d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
stroke="currentColor" stroke="currentColor"
strokeWidth="2.5" strokeWidth="2.5"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> />
<path <path
d="M5.83073 15.1663C6.47506 15.1663 6.9974 14.644 6.9974 13.9997C6.9974 13.3553 6.47506 12.833 5.83073 12.833C5.1864 12.833 4.66406 13.3553 4.66406 13.9997C4.66406 14.644 5.1864 15.1663 5.83073 15.1663Z" d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
stroke="currentColor" stroke="currentColor"
strokeWidth="2.5" strokeWidth="2.5"
strokeLinecap="round" strokeLinecap="round"