fix margin between home icon and user bar

Oops, I attached the margin to the title, which meant that the home link _didn't_ get spaced away from "Hi, matchu!"
This commit is contained in:
Emi Matchu 2020-09-20 20:13:00 -07:00
parent c52b5f0039
commit baa3563abb

View file

@ -15,14 +15,14 @@ function GlobalNavBar() {
return ( return (
<Box display="flex" alignItems="center" flexWrap="wrap"> <Box display="flex" alignItems="center" flexWrap="wrap">
<HomeLink showArrow={!isHomePage} /> <HomeLink showArrow={!isHomePage} marginRight="2" />
<Box <Box
display="flex" display="flex"
alignItems="center" alignItems="center"
opacity={isHomePage ? "0" : "1"} opacity={isHomePage ? "0" : "1"}
transition="0.2s opacity" transition="0.2s opacity"
> >
<DressToImpressTitle marginLeft="2" /> <DressToImpressTitle />
</Box> </Box>
<Box marginLeft="auto"> <Box marginLeft="auto">
<UserNavBarSection /> <UserNavBarSection />
@ -31,7 +31,7 @@ function GlobalNavBar() {
); );
} }
function HomeLink({ showArrow }) { function HomeLink({ showArrow, ...props }) {
return ( return (
<Box <Box
as={Link} as={Link}
@ -44,6 +44,7 @@ function HomeLink({ showArrow }) {
opacity="0.8" opacity="0.8"
_hover={{ transform: "scale(1.1)", opacity: "1" }} _hover={{ transform: "scale(1.1)", opacity: "1" }}
_focus={{ transform: "scale(1.1)", opacity: "1" }} _focus={{ transform: "scale(1.1)", opacity: "1" }}
{...props}
> >
<Box <Box
position="absolute" position="absolute"