From ef47f21943e631577824387df9c1ae92ce485aa1 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Sat, 18 Sep 2021 12:18:02 -0600
Subject: [PATCH] ui(admin): fix inconsistent select styling

---
 .../scripts/components/elements/Select.tsx     |  6 +++---
 .../components/elements/SelectField.tsx        | 18 ++++++------------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/resources/scripts/components/elements/Select.tsx b/resources/scripts/components/elements/Select.tsx
index f29d7a7e6..f34ef891f 100644
--- a/resources/scripts/components/elements/Select.tsx
+++ b/resources/scripts/components/elements/Select.tsx
@@ -23,11 +23,11 @@ const Select = styled.select<Props>`
     }
 
     ${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 ");
 
-        &:hover:not(:disabled), &:focus {
-            ${tw`border-neutral-400`};
+        &:focus {
+            ${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`};
         }
     `};
 `;
diff --git a/resources/scripts/components/elements/SelectField.tsx b/resources/scripts/components/elements/SelectField.tsx
index 481d37333..1247d94ce 100644
--- a/resources/scripts/components/elements/SelectField.tsx
+++ b/resources/scripts/components/elements/SelectField.tsx
@@ -15,7 +15,6 @@ import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
 type T = 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 => {
         return {
             ...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 => {
         return {
             ...base,
             height: '3rem',
-            /* paddingTop: '0.75rem',
-            paddingBottom: '0.75rem',
-            paddingLeft: '4rem',
-            paddingRight: '4rem', */
             background: theme`colors.neutral.600`,
-            borderColor: theme`colors.neutral.500`,
+            borderColor: !props.isFocused ? theme`colors.neutral.500` : theme`colors.primary.300`,
             borderWidth: '2px',
             color: theme`colors.neutral.200`,
             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': {
-                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 => {
         return {
             ...base,
             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,
 
             ':hover': {
@@ -95,7 +90,6 @@ export const SelectStyle: StylesConfig<T, any, any> = {
     indicatorSeparator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
         return {
             ...base,
-            // width: '0',
             backgroundColor: theme`colors.neutral.500`,
         };
     },