app: Select fields are visually improved

src/renderer/components/form/Select.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Control, {components} from 'react-select';
-import {X} from 'react-feather';
+import {ChevronDown, X} from 'react-feather';
 
 type ControlProps = React.ComponentProps<typeof Control>;
 
@@ -23,16 +23,27 @@ const selectStyles: ControlProps['styles'] = {
     ...base,
     borderRadius: '3px',
     zIndex: 10,
+    boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
   }),
   option: (base, state) => ({
     ...base,
     backgroundColor: state.isFocused ? '#4b98f8' : 'none',
     color: state.isFocused ? '#fff' : 'none',
+    padding: '0.25rem 0.5rem',
+    margin: '0 0.25rem',
+    borderRadius: '3px',
+    width: 'auto',
   }),
 };
 
 const selectComponents: ControlProps['components'] = {
-  IndicatorsContainer: () => null,
+  IndicatorSeparator: () => null,
+  ClearIndicator: () => null,
+  DropdownIndicator: p => (
+    <components.DropdownIndicator {...p}>
+      <ChevronDown size="1rem" />
+    </components.DropdownIndicator>
+  ),
   MultiValueRemove: p => (
     <components.MultiValueRemove {...p}>
       <X size="0.75rem" />