Update buttons, infer width from content
This commit is contained in:
Ben Grant
parent
8648cef3d8
commit
dada28d723
|
|
@ -1,16 +1,13 @@
|
|||
import { Wrapper, Top, Bottom } from './buttonStyle';
|
||||
import { Pressable } from './buttonStyle';
|
||||
|
||||
const Button = ({
|
||||
buttonHeight,
|
||||
buttonWidth,
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
...props
|
||||
}) => (
|
||||
<Wrapper buttonHeight={buttonHeight} buttonWidth={buttonWidth}>
|
||||
<Top primaryColor={primaryColor} secondaryColor={secondaryColor} {...props} />
|
||||
<Bottom secondaryColor={secondaryColor} />
|
||||
</Wrapper>
|
||||
const Button = ({ href, type = 'button', ...props }) => (
|
||||
<Pressable
|
||||
type={href ? undefined : type}
|
||||
role="button"
|
||||
as={href ? 'a' : 'button'}
|
||||
href={href}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
export default Button;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,57 @@
|
|||
import styled from '@emotion/styled';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
display: inline-block;
|
||||
export const Pressable = styled.button`
|
||||
position: relative;
|
||||
|
||||
--btn-height: ${props => props.buttonHeight || '40px'};
|
||||
--btn-width: ${props => props.buttonWidth || '100px'};
|
||||
|
||||
height: var(--btn-height);
|
||||
width: var(--btn-width);
|
||||
`;
|
||||
|
||||
export const Top = styled.button`
|
||||
border: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
font: inherit;
|
||||
box-sizing: border-box;
|
||||
background: ${props => props.primaryColor || props.theme.primary};
|
||||
color: #FFF;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 -1.5px .5px ${props => props.secondaryColor || props.theme.primaryDark};
|
||||
padding: 0;
|
||||
text-shadow: 0 -1px .5px ${props => props.secondaryColor || props.theme.primaryDark};
|
||||
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
border-radius: 3px;
|
||||
height: var(--btn-height);
|
||||
width: var(--btn-width);
|
||||
padding: ${props => props.small ? '.4em 1.3em' : '.6em 1.5em'};
|
||||
transform-style: preserve-3d;
|
||||
margin-bottom: 5px;
|
||||
|
||||
${props => props.size && `
|
||||
padding: 0;
|
||||
height: ${props.size};
|
||||
width: ${props.size};
|
||||
`}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
user-select: none;
|
||||
transition: top .15s;
|
||||
background: ${props => props.secondaryColor || props.theme.primaryDark};
|
||||
border-radius: inherit;
|
||||
transform: translate3d(0, 5px, -1em);
|
||||
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translate(0, 1px);
|
||||
&::before {
|
||||
transform: translate3d(0, 4px, -1em);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 0;
|
||||
transform: translate(0, 5px);
|
||||
&::before {
|
||||
transform: translate3d(0, 0, -1em);
|
||||
}
|
||||
}
|
||||
|
||||
${props => props.isLoading && `
|
||||
|
|
@ -84,11 +104,3 @@ export const Top = styled.button`
|
|||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export const Bottom = styled.div`
|
||||
box-sizing: border-box;
|
||||
background: ${props => props.secondaryColor || props.theme.primaryDark};
|
||||
border-radius: 3px;
|
||||
height: var(--btn-height);
|
||||
width: var(--btn-width);
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -122,10 +122,8 @@ const CalendarField = ({
|
|||
<>
|
||||
<CalendarHeader>
|
||||
<Button
|
||||
buttonHeight="30px"
|
||||
buttonWidth="30px"
|
||||
size="30px"
|
||||
title={t('form.dates.tooltips.previous')}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (month-1 < 0) {
|
||||
setYear(year-1);
|
||||
|
|
@ -137,10 +135,8 @@ const CalendarField = ({
|
|||
><</Button>
|
||||
<span>{dayjs.months()[month]} {year}</span>
|
||||
<Button
|
||||
buttonHeight="30px"
|
||||
buttonWidth="30px"
|
||||
size="30px"
|
||||
title={t('form.dates.tooltips.next')}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (month+1 > 11) {
|
||||
setYear(year+1);
|
||||
|
|
|
|||
|
|
@ -97,7 +97,9 @@ const Donate = () => {
|
|||
|
||||
return (
|
||||
<Wrapper>
|
||||
<a
|
||||
<Button
|
||||
small
|
||||
title={t('donate.title')}
|
||||
onClick={event => {
|
||||
if (store.TWA) {
|
||||
gtag('event', 'donate', { 'event_category': 'donate' });
|
||||
|
|
@ -116,15 +118,7 @@ const Donate = () => {
|
|||
target="_blank"
|
||||
rel="noreferrer"
|
||||
ref={buttonRef}
|
||||
>
|
||||
<Button
|
||||
buttonHeight="30px"
|
||||
buttonWidth={`${Math.max(t('donate.button').length*10, 90)}px`}
|
||||
type="button"
|
||||
tabIndex="-1"
|
||||
title={t('donate.title')}
|
||||
>{t('donate.button')}</Button>
|
||||
</a>
|
||||
|
||||
<Options
|
||||
isOpen={isOpen}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,6 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
|
|||
<Button
|
||||
onClick={() => signIn()}
|
||||
isLoading={signedIn === undefined}
|
||||
buttonWidth={`${Math.max(t('event:you.google_cal.login').length*10, 270)}px`}
|
||||
primaryColor="#4286F5"
|
||||
secondaryColor="#3367BD">
|
||||
<LoginButton>
|
||||
|
|
@ -156,8 +155,7 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
|
|||
<>
|
||||
<Info>{t('event:you.google_cal.info')}</Info>
|
||||
<Button
|
||||
buttonWidth="170px"
|
||||
buttonHeight="35px"
|
||||
small
|
||||
isLoading={freeBusyLoading}
|
||||
disabled={freeBusyLoading}
|
||||
onClick={() => importAvailability()}
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
|
|||
<Button
|
||||
onClick={() => signIn()}
|
||||
isLoading={client === undefined}
|
||||
buttonWidth={`${Math.max(t('event:you.outlook_cal').length*10, 270)}px`}
|
||||
primaryColor="#0364B9"
|
||||
secondaryColor="#02437D">
|
||||
<LoginButton>
|
||||
|
|
@ -223,8 +222,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
|
|||
<>
|
||||
<Info>{t('event:you.google_cal.info')}</Info>
|
||||
<Button
|
||||
buttonWidth="170px"
|
||||
buttonHeight="35px"
|
||||
small
|
||||
isLoading={freeBusyLoading}
|
||||
disabled={freeBusyLoading}
|
||||
onClick={() => importAvailability()}
|
||||
|
|
|
|||
|
|
@ -231,7 +231,7 @@ const Create = ({ offline }) => {
|
|||
|
||||
<Error open={!!error} onClose={() => setError(null)}>{error}</Error>
|
||||
|
||||
<Button type="submit" isLoading={isLoading} disabled={isLoading} buttonWidth="100%">{t('home:form.button')}</Button>
|
||||
<Button type="submit" isLoading={isLoading} disabled={isLoading} style={{ width: '100%' }}>{t('home:form.button')}</Button>
|
||||
</CreateForm>
|
||||
)}
|
||||
</StyledMain>
|
||||
|
|
|
|||
|
|
@ -349,7 +349,6 @@ const Event = (props) => {
|
|||
type="submit"
|
||||
isLoading={isLoginLoading}
|
||||
disabled={isLoginLoading || isLoading}
|
||||
buttonWidth={`${Math.max(t('event:form.button').length*11, 100)}px`}
|
||||
>{t('event:form.button')}</Button>
|
||||
</LoginForm>
|
||||
<Error open={!!error} onClose={() => setError(null)}>{error}</Error>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const Help = () => {
|
|||
|
||||
<AboutSection id="about">
|
||||
<StyledMain>
|
||||
<Center><Button buttonWidth="230px" onClick={() => push('/')}>{t('common:cta')}</Button></Center>
|
||||
<Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
|
||||
</StyledMain>
|
||||
</AboutSection>
|
||||
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ const Privacy = () => {
|
|||
|
||||
<AboutSection id="about">
|
||||
<StyledMain>
|
||||
<Center><Button buttonWidth="230px" onClick={() => push('/')}>{t('common:cta')}</Button></Center>
|
||||
<Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
|
||||
</StyledMain>
|
||||
</AboutSection>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue