mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-04-26 04:29:11 +00:00
header/unauth: add login button
This commit is contained in:
parent
fe7c55a6c9
commit
641082f765
1 changed files with 26 additions and 1 deletions
|
@ -12,6 +12,29 @@ const LogoBox = styled.a`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const LoginButton = styled.a`
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
display: block;
|
||||||
|
padding: 0.3em 1em;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,0.75);
|
||||||
|
background-color: var(--c-green);
|
||||||
|
border-color: rgba(0,0,0,0.25);
|
||||||
|
text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0px);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
const HeaderBarUnauth: React.StatelessFunctionalComponent<CommonProps> = (props) => (
|
const HeaderBarUnauth: React.StatelessFunctionalComponent<CommonProps> = (props) => (
|
||||||
<HeaderBarCommon {...props}>
|
<HeaderBarCommon {...props}>
|
||||||
<>
|
<>
|
||||||
|
@ -20,7 +43,9 @@ const HeaderBarUnauth: React.StatelessFunctionalComponent<CommonProps> = (props)
|
||||||
<Logotype />
|
<Logotype />
|
||||||
</LogoBox>
|
</LogoBox>
|
||||||
</Link>
|
</Link>
|
||||||
Hey stranger.
|
<Link href='/auth/login' prefetch>
|
||||||
|
<LoginButton>Sign in →</LoginButton>
|
||||||
|
</Link>
|
||||||
</>
|
</>
|
||||||
</HeaderBarCommon>
|
</HeaderBarCommon>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Add table
Reference in a new issue