74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
import React from "react"
|
|
import { withTheme } from "emotion-theming"
|
|
import { Link } from "gatsby"
|
|
import styled from "@emotion/styled"
|
|
|
|
import { SIZES } from "styles/constants"
|
|
|
|
export const H1 = styled.h1`
|
|
display: block;
|
|
font-size: ${SIZES.small};
|
|
color: ${props => props.color};
|
|
`
|
|
|
|
export const Input = styled.input`
|
|
color: ${props => props.colors.primary};
|
|
background-color: ${props => props.colors.headerBackground};
|
|
border: none;
|
|
border-radius: 5px;
|
|
max-height: 40px;
|
|
outline: none;
|
|
padding: 15px;
|
|
font-size: ${SIZES.normal};
|
|
&:focus {
|
|
box-shadow: 0 0 0 3px ${props => props.colors.bodyBackground},
|
|
0 0 0 5px ${props => props.colors.hover};
|
|
}
|
|
&::placeholder {
|
|
color: ${props => props.colors.tertiary};
|
|
}
|
|
&:valid {
|
|
border-color: ${props => props.colors.valid} !important;
|
|
}
|
|
`
|
|
|
|
export const Button = styled.button`
|
|
display: inline;
|
|
color: ${props => props.colors.primary};
|
|
background-color: ${props => props.colors.button};
|
|
border-color: ${props => props.colors.quarternary};
|
|
padding: 12px 50px;
|
|
min-height: 45px;
|
|
border-radius: 5px;
|
|
border: 0px solid;
|
|
font-family: Montserrat;
|
|
font-size: ${props => SIZES[props.fontSize || "normal"]};
|
|
font-weight: 700;
|
|
outline: none;
|
|
&:hover {
|
|
cursor: pointer;
|
|
background-color: ${props => props.colors.hover};
|
|
box-shadow: 0 0 0 3px ${props => props.colors.bodyBackground},
|
|
0 0 0 5px ${props => props.colors.button};
|
|
}
|
|
&:focus {
|
|
}
|
|
`
|
|
|
|
export const P = styled.p`
|
|
color: ${props => props.theme.colors.secondary};
|
|
`
|
|
|
|
export const AppLink = props => <Link {...props} to={"/app" + props.to} />
|
|
|
|
export const StyledLink = withTheme(styled(AppLink)`
|
|
text-decoration: none;
|
|
border-radius: 12px;
|
|
outline: none;
|
|
color: ${props => props.theme.colors.primary};
|
|
&:focus {
|
|
box-shadow: 0 0 0 3px ${props => props.theme.colors.bodyBackground},
|
|
0 0 0 5px ${props => props.theme.colors.hover};
|
|
}
|
|
`)
|