Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: make theme more consistent

Browse Source
This commit is contained in:
FernTheDev
2020-12-17 19:13:34 -04:00
committed by Jordan Knott
parent ea767f3d19
commit b5fd3b1bf1
56 changed files with 336 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/shared/components/NewProject/index.tsx
View File

@ -3,16 +3,17 @@ import styled from 'styled-components';
import { mixin } from 'shared/utils/styles';
import Select from 'react-select';
import { ArrowLeft, Cross } from 'shared/icons';
import theme from '../../../App/ThemeStyles';
function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
if (isDisabled) {
return null;
}
if (isSelected) {
return mixin.darken('#262c49', 0.25);
return mixin.darken(theme.colors.bg.secondary, 0.25);
}
if (isFocused) {
return mixin.darken('#262c49', 0.15);
return mixin.darken(theme.colors.bg.secondary, 0.15);
}
return null;
}
@ -97,8 +98,8 @@ const ProjectName = styled.input`
font-weight: 400;
&:focus {
background: ${mixin.darken('#262c49', 0.15)};
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
}
`;
const ProjectNameLabel = styled.label`
@ -126,35 +127,35 @@ const colourStyles = {
control: (styles: any, data: any) => {
return {
...styles,
backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderImage: 'initial',
borderColor: '#414561',
borderColor: theme.colors.alternate,
':hover': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderImage: 'initial',
borderColor: '#414561',
borderColor: theme.colors.alternate,
},
':active': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderImage: 'initial',
borderColor: 'rgb(115, 103, 240)',
borderColor: `${theme.colors.primary}`,
},
};
},
menu: (styles: any) => {
return {
...styles,
backgroundColor: mixin.darken('#262c49', 0.15),
backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
};
},
dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@ -167,11 +168,11 @@ const colourStyles = {
cursor: isDisabled ? 'not-allowed' : 'default',
':active': {
...styles[':active'],
backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
},
':hover': {
...styles[':hover'],
backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
},
};
},
@ -209,8 +210,8 @@ const CreateButton = styled.button`
&:hover {
color: #fff;
background: rgb(115, 103, 240);
border-color: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
border-color: ${props => props.theme.colors.primary};
}
`;
type NewProjectProps = {