Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(admin): fix inconsistent select styling

Browse source
This commit is contained in:
Matthew Penner 2021-09-18 12:18:02 -06:00
parent b2d3aed520
commit ef47f21943
No known key found for this signature in database
GPG key ID: 030E4AB751DC756F
2 changed files with 9 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/scripts/components/elements/Select.tsx
View file

@ -23,11 +23,11 @@ const Select = styled.select<Props>`
} }
${props => !props.hideDropdownArrow && css` ${props => !props.hideDropdownArrow && css`
${tw`bg-neutral-600 border-neutral-500 text-neutral-200`}; ${tw`bg-neutral-600 border-neutral-500 text-neutral-200 hover:border-neutral-400`};
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e "); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
&:hover:not(:disabled), &:focus { &:focus {
${tw`border-neutral-400`}; ${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`};
} }
`}; `};
`; `;

18
resources/scripts/components/elements/SelectField.tsx
View file

@ -15,7 +15,6 @@ import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
type T = any; type T = any;
export const SelectStyle: StylesConfig<T, any, any> = { export const SelectStyle: StylesConfig<T, any, any> = {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
clearIndicator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => { clearIndicator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
return { return {
...base, ...base,
@ -34,34 +33,30 @@ export const SelectStyle: StylesConfig<T, any, any> = {
}; };
}, },
// eslint-disable-next-line @typescript-eslint/no-unused-vars
control: (base: CSSObject, props: ControlProps<T, any, any>): CSSObject => { control: (base: CSSObject, props: ControlProps<T, any, any>): CSSObject => {
return { return {
...base, ...base,
height: '3rem', height: '3rem',
/* paddingTop: '0.75rem',
paddingBottom: '0.75rem',
paddingLeft: '4rem',
paddingRight: '4rem', */
background: theme`colors.neutral.600`, background: theme`colors.neutral.600`,
borderColor: theme`colors.neutral.500`, borderColor: !props.isFocused ? theme`colors.neutral.500` : theme`colors.primary.300`,
borderWidth: '2px', borderWidth: '2px',
color: theme`colors.neutral.200`, color: theme`colors.neutral.200`,
cursor: 'pointer', cursor: 'pointer',
// boxShadow: props.isFocused ? '0 0 0 2px #2684ff' : undefined, boxShadow: props.isFocused ?
'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(36, 135, 235, 0.5) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px'
:
undefined,
':hover': { ':hover': {
borderColor: !props.isFocused ? theme`colors.neutral.400` : theme`colors.neutral.500`, borderColor: !props.isFocused ? theme`colors.neutral.400` : theme`colors.primary.300`,
}, },
}; };
}, },
// eslint-disable-next-line @typescript-eslint/no-unused-vars
dropdownIndicator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => { dropdownIndicator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
return { return {
...base, ...base,
color: props.isFocused ? theme`colors.neutral.300` : theme`colors.neutral.400`, color: props.isFocused ? theme`colors.neutral.300` : theme`colors.neutral.400`,
// TODO: find better alternative for `isFocused` so this only triggers when the dropdown is visible.
transform: props.isFocused ? 'rotate(180deg)' : undefined, transform: props.isFocused ? 'rotate(180deg)' : undefined,
':hover': { ':hover': {
@ -95,7 +90,6 @@ export const SelectStyle: StylesConfig<T, any, any> = {
indicatorSeparator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => { indicatorSeparator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
return { return {
...base, ...base,
// width: '0',
backgroundColor: theme`colors.neutral.500`, backgroundColor: theme`colors.neutral.500`,
}; };
}, },