scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update buttons, infer width from content

Browse source
This commit is contained in:
Ben Grant 2021-06-05 22:03:56 +10:00
parent 8648cef3d8
commit dada28d723
10 changed files with 70 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
crabfit-frontend/src/components/Button/Button.tsx
View file

@ -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;

88
crabfit-frontend/src/components/Button/buttonStyle.ts
View file

@ -1,40 +1,60 @@
import styled from '@emotion/styled';
export const Wrapper = styled.div`
display: inline-block;
position: relative;
export const Pressable = styled.button`
position: relative;
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 -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;
padding: ${props => props.small ? '.4em 1.3em' : '.6em 1.5em'};
transform-style: preserve-3d;
margin-bottom: 5px;
--btn-height: ${props => props.buttonHeight || '40px'};
--btn-width: ${props => props.buttonWidth || '100px'};
${props => props.size && `
padding: 0;
height: ${props.size};
width: ${props.size};
`}
height: var(--btn-height);
width: var(--btn-width);
`;
&::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
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);
}
export const Top = styled.button`
border: 0;
cursor: pointer;
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;
border-radius: 3px;
height: var(--btn-height);
width: var(--btn-width);
position: absolute;
top: -4px;
left: 0;
user-select: none;
transition: top .15s;
&:hover {
transform: translate(0, 1px);
&::before {
transform: translate3d(0, 4px, -1em);
}
}
&:active {
top: 0;
}
&:active {
transform: translate(0, 5px);
&::before {
transform: translate3d(0, 0, -1em);
}
}
${props => props.isLoading && `
${props => props.isLoading && `
text-shadow: none;
color: transparent;
cursor: wait;
@ -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);
`;

8
crabfit-frontend/src/components/CalendarField/CalendarField.tsx
View file

@ -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 = ({
>&lt;</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);

14
crabfit-frontend/src/components/Donate/Donate.tsx
View file

@ -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>
>{t('donate.button')}</Button>
<Options
isOpen={isOpen}

4
crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
View file

@ -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()}

4
crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
View file

@ -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()}

2
crabfit-frontend/src/pages/Create/Create.tsx
View file

@ -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>

1
crabfit-frontend/src/pages/Event/Event.tsx
View file

@ -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>

2
crabfit-frontend/src/pages/Help/Help.tsx
View file

@ -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>

2
crabfit-frontend/src/pages/Privacy/Privacy.tsx
View file

@ -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>