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 { MultiSelect } from '@blueprintjs-formik/select';
-import { Select, MultiSelect } from '@blueprintjs-formik/select';
 import { DateInput } from '@blueprintjs-formik/datetime';
-
+import { FSelect } from './Select';
-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} />;
-}
 
 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;
+  }
+`;

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { Form, ErrorMessage, useFormikContext } from 'formik';
+import { Form, useFormikContext } from 'formik';
 import { Button, Classes, FormGroup, Intent } from '@blueprintjs/core';
 import {
   If,
@@ -17,11 +17,13 @@ import {
 } from '@/components';
 import withAccounts from '@/containers/Accounts/withAccounts';
 
-import { compose } from '@/utils';
-import { useAutofocus } from '@/hooks';
 import { FOREIGN_CURRENCY_ACCOUNTS } from '@/constants/accountTypes';
+
+import { useAutofocus } from '@/hooks';
 import { useAccountDialogContext } from './AccountDialogProvider';
+
 import { parentAccountShouldUpdate } from './utils';
+import { compose } from '@/utils';
 
 /**
  * Account form dialogs fields.
@@ -58,6 +60,7 @@ function AccountFormDialogFields({
             disabled={fieldsDisabled.accountType}
             popoverProps={{ minimal: true }}
             fastField={true}
+            fill={true}
           />
         </FFormGroup>
 
@@ -65,7 +68,6 @@ function AccountFormDialogFields({
           name={'name'}
           label={<T id={'account_name'} />}
           labelInfo={<FieldRequiredHint />}
-          helperText={<ErrorMessage name="name" />}
           inline={true}
           fastField={true}
         >
@@ -80,7 +82,6 @@ function AccountFormDialogFields({
         <FFormGroup
           label={<T id={'account_code'} />}
           name={'code'}
-          helperText={<ErrorMessage name="code" />}
           labelInfo={<Hint content={<T id="account_code_hint" />} />}
           inline={true}
           fastField={true}
@@ -118,6 +119,7 @@ function AccountFormDialogFields({
               filterByTypes={values.account_type}
               buttonProps={{ disabled: !values.subaccount }}
               fastField={true}
+              fill={true}
             />
           </FFormGroup>
         )}
@@ -135,6 +137,7 @@ function AccountFormDialogFields({
               currencies={currencies}
               popoverProps={{ minimal: true }}
               fastField={true}
+              fill={true}
             />
           </FFormGroup>
         </If>
@@ -149,6 +152,7 @@ function AccountFormDialogFields({
             name={'description'}
             growVertically={true}
             height={280}
+            fill={true}
             fastField={true}
           />
         </FFormGroup>

packages/webapp/src/lang/en/index.json

@@ -64,7 +64,7 @@
   "new_currency": "New Currency",
   "currency_name": "Currency Name",
   "currency_code": "Currency Code",
-  "select_currency_code": "Select Currency Code",
+  "select_currency_code": "Select Currency Code...",
   "edit_exchange_rate": "Edit Exchange Rate",
   "new_exchange_rate": "New Exchange Rate",
   "delete_exchange_rate": "Delete Exchange Rate",