From 2c43a8e0d257fabf6f9e8354c9d8d42cfa838666 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sat, 5 Jun 2021 23:40:23 +1000 Subject: [PATCH] Better dark mode colors --- crabfit-frontend/src/App.tsx | 8 ++++---- .../src/components/Button/buttonStyle.ts | 20 +++++++++++++++---- .../CalendarField/calendarFieldStyle.ts | 8 +++----- .../src/components/Donate/Donate.tsx | 1 + .../src/components/Error/errorStyle.ts | 9 +++++---- .../src/components/Recents/recentsStyle.ts | 2 +- .../SelectField/selectFieldStyle.ts | 8 ++++---- .../components/TextField/textFieldStyle.ts | 8 ++++---- .../TimeRangeField/timeRangeFieldStyle.ts | 2 +- .../ToggleField/toggleFieldStyle.ts | 13 +++++++----- crabfit-frontend/src/pages/Home/homeStyle.ts | 4 ++-- crabfit-frontend/src/theme/index.ts | 4 ++-- 12 files changed, 51 insertions(+), 36 deletions(-) diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx index 743c72f..dd97904 100644 --- a/crabfit-frontend/src/App.tsx +++ b/crabfit-frontend/src/App.tsx @@ -97,17 +97,17 @@ const App = () => { borderRadius: 100, border: `4px solid ${theme.primaryBackground}`, width: 12, - background: `${theme.primaryLight}AA`, + background: `${theme.mode === 'light' ? theme.primaryLight : theme.primaryDark}AA`, }, '*::-webkit-scrollbar-thumb:hover': { - background: `${theme.primaryLight}CC`, + background: `${theme.mode === 'light' ? theme.primaryLight : theme.primaryDark}CC`, }, '*::-webkit-scrollbar-thumb:active': { - background: `${theme.primaryLight}`, + background: `${theme.mode === 'light' ? theme.primaryLight : theme.primaryDark}`, }, })} /> - + }> diff --git a/crabfit-frontend/src/components/Button/buttonStyle.ts b/crabfit-frontend/src/components/Button/buttonStyle.ts index 7779d1d..8cce43f 100644 --- a/crabfit-frontend/src/components/Button/buttonStyle.ts +++ b/crabfit-frontend/src/components/Button/buttonStyle.ts @@ -12,10 +12,9 @@ export const Pressable = styled.button` font: inherit; box-sizing: border-box; background: ${props => props.primaryColor || props.theme.primary}; - color: #FFF; + color: ${props => props.primaryColor ? '#FFF' : props.theme.background}; 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); + transition: transform 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; @@ -55,7 +54,6 @@ export const Pressable = styled.button` } ${props => props.isLoading && ` - text-shadow: none; color: transparent; cursor: wait; @@ -103,4 +101,18 @@ export const Pressable = styled.button` } } `} + + ${props => props.alt && ` + background: transparent; + border: 1px solid ${props.primaryColor || props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + color: ${props.primaryColor || props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + margin-bottom: 0; + + &::before { + content: none; + } + &:hover, &:active { + transform: none; + } + `} `; diff --git a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts index 055e0a8..7dcee99 100644 --- a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts +++ b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts @@ -78,7 +78,7 @@ export const Date = styled.button` } background-color: ${props => props.theme.primaryBackground}; - border: 1px solid ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; display: flex; align-items: center; justify-content: center; @@ -87,20 +87,18 @@ export const Date = styled.button` touch-action: none; ${props => props.otherMonth && ` - color: ${props.theme.primaryLight}; + color: ${props.theme.mode === 'light' ? props.theme.primaryLight : props.theme.primaryDark}; `} ${props => props.isToday && ` font-weight: 900; - color: ${props.theme.primaryDark}; + color: ${props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; `} ${props => (props.selected || (props.mode === 'add' && props.selecting)) && ` color: ${props.otherMonth ? 'rgba(255,255,255,.5)' : '#FFF'}; background-color: ${props.theme.primary}; - border-color: ${props.theme.primary}; `} ${props => props.mode === 'remove' && props.selecting && ` background-color: ${props.theme.primaryBackground}; - border: 1px solid ${props.theme.primaryLight}; color: ${props.isToday ? props.theme.primaryDark : (props.otherMonth ? props.theme.primaryLight : 'inherit')}; `} `; diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx index 0933612..69d352d 100644 --- a/crabfit-frontend/src/components/Donate/Donate.tsx +++ b/crabfit-frontend/src/components/Donate/Donate.tsx @@ -118,6 +118,7 @@ const Donate = () => { target="_blank" rel="noreferrer" ref={buttonRef} + style={{ whiteSpace: 'nowrap' }} >{t('donate.button')} props.theme.error}; color: #FFFFFF; - padding: 12px 16px; + padding: 0 16px; display: flex; align-items: center; justify-content: space-between; @@ -13,16 +13,17 @@ export const Wrapper = styled.div` max-height: 0; margin: 0; visibility: hidden; - transition: margin .2s, max-height .2s; + transition: margin .2s, padding .2s, max-height .2s; ${props => props.open && ` opacity: 1; visibility: visible; margin: 20px 0; + padding: 12px 16px; max-height: 60px; - transition: opacity .15s .2s, max-height .2s, margin .2s, visibility .2s; + transition: opacity .15s .2s, max-height .2s, margin .2s, padding .2s, visibility .2s; `} - + @media (prefers-reduced-motion: reduce) { transition: none; } diff --git a/crabfit-frontend/src/components/Recents/recentsStyle.ts b/crabfit-frontend/src/components/Recents/recentsStyle.ts index ee60d92..5b4ca72 100644 --- a/crabfit-frontend/src/components/Recents/recentsStyle.ts +++ b/crabfit-frontend/src/components/Recents/recentsStyle.ts @@ -12,7 +12,7 @@ export const Recent = styled.a` & .name { font-weight: 700; font-size: 1.1em; - color: ${props => props.theme.primaryDark}; + color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; flex: 1; display: block; } diff --git a/crabfit-frontend/src/components/SelectField/selectFieldStyle.ts b/crabfit-frontend/src/components/SelectField/selectFieldStyle.ts index 7d0197d..2383a85 100644 --- a/crabfit-frontend/src/components/SelectField/selectFieldStyle.ts +++ b/crabfit-frontend/src/components/SelectField/selectFieldStyle.ts @@ -38,8 +38,8 @@ export const StyledSelect = styled.select` background: ${props => props.theme.primaryBackground}; color: inherit; padding: 10px 14px; - border: 1px solid ${props => props.theme.primaryLight}; - box-shadow: inset 0 0 0 0 ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; + box-shadow: inset 0 0 0 0 ${props => props.theme.primary}; border-radius: 3px; outline: none; transition: border-color .15s, box-shadow .15s; @@ -50,8 +50,8 @@ export const StyledSelect = styled.select` background-size: 1em; &:focus { - border: 1px solid ${props => props.theme.primary}; - box-shadow: inset 0 -3px 0 0 ${props => props.theme.primary}; + border: 1px solid ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + box-shadow: inset 0 -3px 0 0 ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; } ${props => props.small && ` diff --git a/crabfit-frontend/src/components/TextField/textFieldStyle.ts b/crabfit-frontend/src/components/TextField/textFieldStyle.ts index 1405e3d..de2bc5f 100644 --- a/crabfit-frontend/src/components/TextField/textFieldStyle.ts +++ b/crabfit-frontend/src/components/TextField/textFieldStyle.ts @@ -32,15 +32,15 @@ export const StyledInput = styled.input` background: ${props => props.theme.primaryBackground}; color: inherit; padding: 10px 14px; - border: 1px solid ${props => props.theme.primaryLight}; - box-shadow: inset 0 0 0 0 ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; + box-shadow: inset 0 0 0 0 ${props => props.theme.primary}; border-radius: 3px; font-size: 18px; outline: none; transition: border-color .15s, box-shadow .15s; &:focus { - border: 1px solid ${props => props.theme.primary}; - box-shadow: inset 0 -3px 0 0 ${props => props.theme.primary}; + border: 1px solid ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + box-shadow: inset 0 -3px 0 0 ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; } `; diff --git a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts index 6706c23..447d4dc 100644 --- a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts +++ b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts @@ -20,7 +20,7 @@ export const StyledSubLabel = styled.label` export const Range = styled.div` user-select: none; background-color: ${props => props.theme.primaryBackground}; - border: 1px solid ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; border-radius: 3px; height: 50px; position: relative; diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts index 7b2e9d8..6575d2f 100644 --- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts +++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts @@ -9,9 +9,14 @@ export const ToggleContainer = styled.div` border: 1px solid ${props => props.theme.primary}; border-radius: 3px; overflow: hidden; + --focus-color: ${props => props.theme.primary}; - &:focus-within label { - box-shadow: inset 0 -3px 0 0 var(--focus-color); + &:focus-within { + --focus-color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + border: 1px solid var(--focus-color); + & label { + box-shadow: inset 0 -3px 0 0 var(--focus-color); + } } & > div:first-of-type label { @@ -41,8 +46,7 @@ export const HiddenInput = styled.input` &:checked + label { color: ${props => props.theme.background}; - background-color: ${props => props.theme.primary}; - --focus-color: ${props => props.theme.primaryDark}; + background-color: var(--focus-color); } `; @@ -57,5 +61,4 @@ export const LabelButton = styled.label` align-items: center; justify-content: center; transition: box-shadow .15s; - --focus-color: ${props => props.theme.primary}; `; diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index 16e1f89..2a205e7 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -17,7 +17,7 @@ export const TitleSmall = styled.span` text-align: center; font-family: 'Samurai Bob', sans-serif; font-weight: 400; - color: ${props => props.theme.primaryDark}; + color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; line-height: 1em; text-transform: uppercase; @@ -113,7 +113,7 @@ export const Stat = styled.div` export const StatNumber = styled.span` display: block; font-weight: 900; - color: ${props => props.theme.primaryDark}; + color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; font-size: 2em; `; diff --git a/crabfit-frontend/src/theme/index.ts b/crabfit-frontend/src/theme/index.ts index 9746b65..b102ecc 100644 --- a/crabfit-frontend/src/theme/index.ts +++ b/crabfit-frontend/src/theme/index.ts @@ -15,8 +15,8 @@ const theme = { background: '#111111', text: '#DDDDDD', primary: '#F79E00', - primaryDark: '#F4BB60', - primaryLight: '#F48600', + primaryDark: '#CC7313', + primaryLight: '#F4BB60', primaryBackground: '#30240F', error: '#E53935', loading: '#444444',