chore(Select):style the Select button.

packages/webapp/src/components/Forms/BlueprintFormik.tsx

@@ -10,22 +10,9 @@ import {
   EditableText,
   TextArea,
 } from '@blueprintjs-formik/core';
-import { Button } from '@blueprintjs/core';
-import { Select, MultiSelect } from '@blueprintjs-formik/select';
+import { MultiSelect } from '@blueprintjs-formik/select';
 import { DateInput } from '@blueprintjs-formik/datetime';
-
-function FSelect({ ...props }) {
-  const input = ({ activeItem, text, label, value }) => {
-    return (
-      <Button
-        text={text || props.placeholder || 'Select an item ...'}
-        rightIcon="double-caret-vertical"
-        {...props.buttonProps}
-      />
-    );
-  };
-  return <Select input={input} {...props} />;
-}
+import { FSelect } from './Select';
 
 export {
   FormGroup as FFormGroup,

packages/webapp/src/components/Forms/Select.tsx

@@ -0,0 +1,58 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import clsx from 'classnames';
+import { Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs-formik/select';
+
+export function FSelect({ ...props }) {
+  const input = ({ activeItem, text, label, value }) => {
+    return (
+      <SelectButton
+        text={text || props.placeholder || 'Select an item ...'}
+        {...props.buttonProps}
+        className={clsx({ 'is-selected': !!text }, props.className)}
+      />
+    );
+  };
+  return <Select input={input} {...props} fill={true} />;
+}
+
+const SelectButton = styled(Button)`
+  outline: none;
+  box-shadow: 0 0 0 transparent;
+  border: 1px solid #ced4da;
+  position: relative;
+  padding-right: 30px;
+
+  &:not(.is-selected):not([class*='bp3-intent-']):not(.bp3-minimal) {
+    color: #5c7080;
+  }
+  &:after {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid #8d8d8d;
+
+    position: absolute;
+    right: 0;
+    top: 50%;
+    margin-top: -2px;
+    margin-right: 12px;
+    border-radius: 1px;
+  }
+
+  &:not([class*='bp3-intent-']) {
+    &,
+    &:hover {
+      background: #fff;
+    }
+  }
+  .bp3-intent-danger & {
+    border-color: #db3737;
+  }
+`;