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:
parent
c52b5f0039
commit
baa3563abb
1 changed files with 4 additions and 3 deletions
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue