Update buttons, infer width from content

crabfit-frontend/src/components/Button/Button.tsx

@@ -1,16 +1,13 @@
-import { Wrapper, Top, Bottom } from './buttonStyle';
+import { Pressable } from './buttonStyle';
 
-const Button = ({
+const Button = ({ href, type = 'button', ...props }) => (
-	buttonHeight,
+	<Pressable
-	buttonWidth,
+    type={href ? undefined : type}
-  primaryColor,
+    role="button"
-  secondaryColor,
+    as={href ? 'a' : 'button'}
-	...props
+    href={href}
-}) => (
+    {...props}
-	<Wrapper buttonHeight={buttonHeight} buttonWidth={buttonWidth}>
+  />
-		<Top primaryColor={primaryColor} secondaryColor={secondaryColor} {...props} />
-		<Bottom secondaryColor={secondaryColor} />
-	</Wrapper>
 );
 
 export default Button;

crabfit-frontend/src/components/Button/buttonStyle.ts

@@ -1,40 +1,60 @@
 import styled from '@emotion/styled';
 
-export const Wrapper = styled.div`
+export const Pressable = styled.button`
-	display: inline-block;
+  position: relative;
-	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'};
+  ${props => props.size && `
-	--btn-width: ${props => props.buttonWidth || '100px'};
+    padding: 0;
+    height: ${props.size};
+    width: ${props.size};
+  `}
 
-	height: var(--btn-height);
+  &::before {
-	width: var(--btn-width);
+    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`
+  &:hover {
-	border: 0;
+    transform: translate(0, 1px);
-	cursor: pointer;
+    &::before {
-	font: inherit;
+      transform: translate3d(0, 4px, -1em);
-	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;
 
-	&:active {
+  &:active {
-		top: 0;
+    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);
-`;

crabfit-frontend/src/components/CalendarField/CalendarField.tsx

@@ -122,10 +122,8 @@ const CalendarField = ({
         <>
     			<CalendarHeader>
     				<Button
-    					buttonHeight="30px"
+    					size="30px"
-    					buttonWidth="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"
+    					size="30px"
-    					buttonWidth="30px"
     					title={t('form.dates.tooltips.next')}
-    					type="button"
     					onClick={() => {
     						if (month+1 > 11) {
     							setYear(year+1);

crabfit-frontend/src/components/Donate/Donate.tsx

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

crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx

@@ -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"
+                small
-                buttonHeight="35px"
                 isLoading={freeBusyLoading}
                 disabled={freeBusyLoading}
                 onClick={() => importAvailability()}

crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx

@@ -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"
+                small
-                buttonHeight="35px"
                 isLoading={freeBusyLoading}
                 disabled={freeBusyLoading}
                 onClick={() => importAvailability()}

crabfit-frontend/src/pages/Create/Create.tsx

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

crabfit-frontend/src/pages/Event/Event.tsx

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

crabfit-frontend/src/pages/Help/Help.tsx

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

crabfit-frontend/src/pages/Privacy/Privacy.tsx

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