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

Better dark mode colors

Browse source
This commit is contained in:
Ben Grant 2021-06-05 23:40:23 +10:00
parent dada28d723
commit 2c43a8e0d2
12 changed files with 51 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
crabfit-frontend/src/App.tsx
View file

@ -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}`,
},
})}
/>
<Suspense fallback={<Loading />}>
<Settings />
</Suspense>

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

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

8
crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
View file

@ -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')};
`}
`;

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

@ -118,6 +118,7 @@ const Donate = () => {
target="_blank"
rel="noreferrer"
ref={buttonRef}
style={{ whiteSpace: 'nowrap' }}
>{t('donate.button')}</Button>
<Options

9
crabfit-frontend/src/components/Error/errorStyle.ts
View file

@ -4,7 +4,7 @@ export const Wrapper = styled.div`
border-radius: 3px;
background-color: ${props => 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;
}

2
crabfit-frontend/src/components/Recents/recentsStyle.ts
View file

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

8
crabfit-frontend/src/components/SelectField/selectFieldStyle.ts
View file

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

8
crabfit-frontend/src/components/TextField/textFieldStyle.ts
View file

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

2
crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts
View file

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

13
crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
View file

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

4
crabfit-frontend/src/pages/Home/homeStyle.ts
View file

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

4
crabfit-frontend/src/theme/index.ts
View file

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