From dada28d723da42ddf3eada08fe70e2c2862b2121 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sat, 5 Jun 2021 22:03:56 +1000 Subject: [PATCH] Update buttons, infer width from content --- .../src/components/Button/Button.tsx | 21 ++--- .../src/components/Button/buttonStyle.ts | 88 +++++++++++-------- .../CalendarField/CalendarField.tsx | 8 +- .../src/components/Donate/Donate.tsx | 14 +-- .../GoogleCalendar/GoogleCalendar.tsx | 4 +- .../OutlookCalendar/OutlookCalendar.tsx | 4 +- crabfit-frontend/src/pages/Create/Create.tsx | 2 +- crabfit-frontend/src/pages/Event/Event.tsx | 1 - crabfit-frontend/src/pages/Help/Help.tsx | 2 +- .../src/pages/Privacy/Privacy.tsx | 2 +- 10 files changed, 70 insertions(+), 76 deletions(-) diff --git a/crabfit-frontend/src/components/Button/Button.tsx b/crabfit-frontend/src/components/Button/Button.tsx index 896d574..b17ee4e 100644 --- a/crabfit-frontend/src/components/Button/Button.tsx +++ b/crabfit-frontend/src/components/Button/Button.tsx @@ -1,16 +1,13 @@ -import { Wrapper, Top, Bottom } from './buttonStyle'; +import { Pressable } from './buttonStyle'; -const Button = ({ - buttonHeight, - buttonWidth, - primaryColor, - secondaryColor, - ...props -}) => ( - - - - +const Button = ({ href, type = 'button', ...props }) => ( + ); export default Button; diff --git a/crabfit-frontend/src/components/Button/buttonStyle.ts b/crabfit-frontend/src/components/Button/buttonStyle.ts index c3a6338..7779d1d 100644 --- a/crabfit-frontend/src/components/Button/buttonStyle.ts +++ b/crabfit-frontend/src/components/Button/buttonStyle.ts @@ -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); -`; diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx index 0844a8b..5957d0a 100644 --- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx +++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx @@ -122,10 +122,8 @@ const CalendarField = ({ <> {dayjs.months()[month]} {year} - + >{t('donate.button')} { + )} diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx index 6b64e8e..39e2bf3 100644 --- a/crabfit-frontend/src/pages/Event/Event.tsx +++ b/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')} setError(null)}>{error} diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx index 57bab1b..4196595 100644 --- a/crabfit-frontend/src/pages/Help/Help.tsx +++ b/crabfit-frontend/src/pages/Help/Help.tsx @@ -84,7 +84,7 @@ const Help = () => { -
+
diff --git a/crabfit-frontend/src/pages/Privacy/Privacy.tsx b/crabfit-frontend/src/pages/Privacy/Privacy.tsx index e9f0eff..b3af673 100644 --- a/crabfit-frontend/src/pages/Privacy/Privacy.tsx +++ b/crabfit-frontend/src/pages/Privacy/Privacy.tsx @@ -83,7 +83,7 @@ const Privacy = () => { -
+