diff --git a/app/components/Form/Field.css b/app/components/Form/Field.css index 3197a86d3a..c7b07d4b6c 100644 --- a/app/components/Form/Field.css +++ b/app/components/Form/Field.css @@ -8,11 +8,13 @@ } .inputWithError { - border: 1.5px solid var(--danger-color) !important; + border: 1.5px solid var(--danger-color); + border-radius: var(--border-radius-md); } .inputWithWarning { - border: 1.5px solid var(--color-orange-6) !important; + border: 1.5px solid var(--color-orange-6); + border-radius: var(--border-radius-md); } .fieldError { @@ -44,22 +46,3 @@ font-weight: 600; margin-left: 2px; } - -:global { - /* stylelint-disable-next-line selector-class-pattern */ - .Select.is-disabled > .Select-control { - background-color: var(--additive-background) !important; - color: var(--color-gray-5); - } - - /* stylelint-disable-next-line selector-class-pattern */ - .Select--multi.is-disabled .Select-value-label { - background-color: var(--additive-background) !important; - color: var(--color-gray-5); - } - - /* stylelint-disable-next-line selector-class-pattern */ - .Select--multi.is-disabled .Select-value { - border: none !important; - } -} diff --git a/app/components/Form/SelectInput.tsx b/app/components/Form/SelectInput.tsx index 1894fb0e4c..d989f84a4b 100644 --- a/app/components/Form/SelectInput.tsx +++ b/app/components/Form/SelectInput.tsx @@ -35,7 +35,18 @@ type Props = { }; export const selectStyles = { - control: (styles: Record) => ({ ...styles, cursor: 'pointer' }), + control: ( + styles: Record, + { isDisabled }: { isDisabled: boolean } + ) => ({ + ...styles, + cursor: 'pointer', + opacity: isDisabled ? '0.5' : 1, + backgroundColor: isDisabled && undefined, + border: '1.5px solid var(--border-gray)', + borderRadius: 'var(--border-radius-md)', + fontSize: '14px', + }), option: ( styles: Record, { @@ -49,6 +60,7 @@ export const selectStyles = { ...styles, cursor: isDisabled ? 'not-allowed' : 'pointer', color: isSelected ? 'var(--color-gray-1)' : undefined, + fontSize: '14px', }), }; export const selectTheme = ( @@ -57,23 +69,23 @@ export const selectTheme = ( ...theme, colors: { ...theme.colors, - //primary: 'var(--color-blue-4)', // Selected backgroundColor - primary25: 'var(--color-select-hover)', - // Hover backgroundColor - //primary75: // Unknown - neutral0: 'var(--color-white)', - // Background color - //neutral5: // Unknown - neutral10: 'var(--color-select-multi-bg)', - // Multiselect item background - // neutral20: // Border color - // neutral30: // Hover border color - // neutral40: // Unknown - // neutral50: // Placholder font color, - // neutral60: // Unknown + primary: 'var(--color-gray-4)', // Primary color + // primary75: // Unknown + // primary50: // Unknown + primary25: 'var(--additive-background)', // Hover background color + neutral0: 'var(--lego-card-color)', // Background color + // netutral5: // Unknown + neutral10: 'var(--additive-background)', // Multi select item background + neutral20: 'var(--border-gray)', // Border color + neutral30: 'var(--border-gray)', // Hover border color + neutral40: 'var(--secondary-font-color)', // Text color in dropdown ("No options" and "Loading...") + neutral50: 'var(--color-gray-5)', // Placholder color, + neutral60: 'var(--color-gray-4)', // Focused arrow color // neutral70: // Unknown - neutral80: 'var(--lego-font-color)', // Font color + neutral80: 'var(--lego-font-color)', // Font color and hover arrow color // neutral90: // Unknown + danger: 'var(--danger-color)', // Color of delete button in multi select items + dangerLight: 'rgba(255, 0, 0, var(--color-red-hover-alpha))', // Background color of delete button in multi select items }, }); @@ -105,6 +117,8 @@ function SelectInput({ shouldKeyDownEventCreateNewOption={shouldKeyDownEventCreateNewOption} options={options} isLoading={fetching} + styles={selectStyle ?? selectStyles} + theme={selectTheme} onInputChange={(value) => { if (props.onSearch) { props.onSearch(value); diff --git a/app/routes/admin/email/components/RestrictedMailEditor.tsx b/app/routes/admin/email/components/RestrictedMailEditor.tsx index f2889fef4f..0a9029bf5f 100644 --- a/app/routes/admin/email/components/RestrictedMailEditor.tsx +++ b/app/routes/admin/email/components/RestrictedMailEditor.tsx @@ -143,7 +143,7 @@ const RestrictedMailEditor = ({ disabled={restrictedMailId} label="Epost addresser" name="rawAddresses" - placeholder="Enkelte eposter du ønsker å sende til" + placeholder="Enkelte e-poster du ønsker å sende til" component={SelectInput.Field} tags isMulti diff --git a/app/routes/articles/components/ArticleEditor.tsx b/app/routes/articles/components/ArticleEditor.tsx index d59775f11b..71320205a5 100644 --- a/app/routes/articles/components/ArticleEditor.tsx +++ b/app/routes/articles/components/ArticleEditor.tsx @@ -122,6 +122,7 @@ const ArticleEditor = ({ component={TextInput.Field} id="article-title" /> + { diff --git a/app/routes/surveys/utils.tsx b/app/routes/surveys/utils.tsx index 26e2959f89..4095a118cd 100644 --- a/app/routes/surveys/utils.tsx +++ b/app/routes/surveys/utils.tsx @@ -106,7 +106,7 @@ export const QuestionTypeOption = ({ iconName, option, ...props }: any) => ( ? 'var(--color-gray-2)' : props.isFocused ? 'var(--additive-background)' - : 'var(--color-white)', + : 'var(--lego-card-color)', }} className={cx(styles.dropdownOption, styles.dropdown)} onMouseDown={(event) => { diff --git a/app/styles/variables.css b/app/styles/variables.css index 2260c8e3d7..e1121cfae5 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -95,9 +95,6 @@ --color-red-8: #730202; --color-red-9: #400101; - --color-select-hover: rgb(178, 212, 255); - --color-select-multi-bg: rgb(230, 230, 230); - --color-red-hover-alpha: 5%; --font-size: 16px; @@ -203,8 +200,5 @@ --color-red-8: #e52d2e; --color-red-9: #e9494a; - --color-select-hover: var(--color-gray-4); - --color-select-multi-bg: var(--color-gray-5); - --color-red-hover-alpha: 10%; }