Make selectors feel more at home

They now share the styling of all the other input fields in all ways. This makes them feel much more at home, and they no longer stick out much. Also, add the custom styling to the select used for tags (specified by the `tags` prop), since that was missing.
webkom · Apr 9, 2023 · b07ecf1 · b07ecf1
1 parent 019273c
commit b07ecf1
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 45 deletions.
diff --git 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
@@ -35,7 +35,18 @@ type Props = {
 };
 
 export const selectStyles = {
-  control: (styles: Record<string, any>) => ({ ...styles, cursor: 'pointer' }),
+  control: (
+    styles: Record<string, any>,
+    { 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<string, any>,
     {
@@ -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
@@ -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
@@ -122,6 +122,7 @@ const ArticleEditor = ({
           component={TextInput.Field}
           id="article-title"
         />
+
         <Field
           name="tags"
           label="Tags"

diff --git a/app/routes/surveys/components/SurveyEditor/Question.tsx b/app/routes/surveys/components/SurveyEditor/Question.tsx
@@ -86,6 +86,7 @@ const Question = ({
           <div className={styles.questionType}>
             <Field
               name={`${question}.questionType`}
+              placeholder="Velg type"
               component={SelectInput.Field}
               components={{
                 Option: (props: any) => {

diff --git 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
@@ -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%;
 }