refactor: make theme more consistent
This commit is contained in:
@ -19,23 +19,23 @@ display: flex
|
||||
}
|
||||
|
||||
& .react-datepicker-time__header {
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
}
|
||||
& .react-datepicker__time-list-item {
|
||||
color: rgba(${props => props.theme.colors.text.primary});
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
}
|
||||
& .react-datepicker__time-container .react-datepicker__time
|
||||
.react-datepicker__time-box ul.react-datepicker__time-list
|
||||
li.react-datepicker__time-list-item:hover {
|
||||
color: rgba(${props => props.theme.colors.text.secondary});
|
||||
background: rgba(${props => props.theme.colors.bg.secondary});
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
background: ${props => props.theme.colors.bg.secondary};
|
||||
}
|
||||
& .react-datepicker__time-container .react-datepicker__time {
|
||||
background: rgba(${props => props.theme.colors.bg.primary});
|
||||
background: ${props => props.theme.colors.bg.primary};
|
||||
}
|
||||
& .react-datepicker--time-only {
|
||||
background: rgba(${props => props.theme.colors.bg.primary});
|
||||
border: 1px solid rgba(${props => props.theme.colors.border});
|
||||
background: ${props => props.theme.colors.bg.primary};
|
||||
border: 1px solid ${props => props.theme.colors.border};
|
||||
}
|
||||
|
||||
& .react-datepicker * {
|
||||
@ -75,12 +75,12 @@ display: flex
|
||||
}
|
||||
& .react-datepicker__day--selected {
|
||||
border-radius: 50%;
|
||||
background: rgba(115, 103, 240);
|
||||
background: ${props => props.theme.colors.primary};
|
||||
color: #fff;
|
||||
}
|
||||
& .react-datepicker__day--selected:hover {
|
||||
border-radius: 50%;
|
||||
background: rgba(115, 103, 240);
|
||||
background: ${props => props.theme.colors.primary};
|
||||
color: #fff;
|
||||
}
|
||||
& .react-datepicker__header {
|
||||
@ -88,7 +88,7 @@ display: flex
|
||||
border: none;
|
||||
}
|
||||
& .react-datepicker__header--time {
|
||||
border-bottom: 1px solid rgba(${props => props.theme.colors.border});
|
||||
border-bottom: 1px solid ${props => props.theme.colors.border};
|
||||
}
|
||||
|
||||
`;
|
||||
|
@ -43,7 +43,7 @@ const HeaderSelectLabel = styled.div`
|
||||
color: #c2c6dc;
|
||||
|
||||
&:hover {
|
||||
background: rgba(115, 103, 240);
|
||||
background: ${props => props.theme.colors.primary};
|
||||
color: #c2c6dc;
|
||||
}
|
||||
`;
|
||||
@ -60,8 +60,8 @@ const HeaderSelect = styled.select`
|
||||
appearance: none;
|
||||
|
||||
&:hover {
|
||||
background: #262c49;
|
||||
border: 1px solid rgba(115, 103, 240);
|
||||
background: ${props => props.theme.colors.bg.secondary};
|
||||
border: 1px solid ${props => props.theme.colors.primary};
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
color: #c2c6dc;
|
||||
@ -93,7 +93,7 @@ const HeaderButton = styled.button`
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
background: rgba(115, 103, 240);
|
||||
background: ${props => props.theme.colors.primary};
|
||||
color: #fff;
|
||||
}
|
||||
`;
|
||||
|
Reference in New Issue
Block a user