feat: dashboard style.

client/src/components/Accounts/AccountsViewsTabs.js

@@ -80,6 +80,7 @@ function AccountsViewsTabs({
             className='button--new-view'
             icon={<Icon icon='plus' />}
             onClick={handleClickNewView}
+            minimal={true}
           />
         </Tabs>
       </NavbarGroup>

client/src/components/AccountsSelectList.js

@@ -5,11 +5,12 @@ import {
 } from '@blueprintjs/core';
 import {Select} from '@blueprintjs/select';
 
-export default function AccountsMultiSelect({
+export default function AccountsSelectList({
   accounts,
   onAccountSelected,
   error,
   initialAccount,
+  defautlSelectText = 'Select account'
 }) {
   const [selectedAccount, setSelectedAccount] = useState(
     initialAccount || null
@@ -36,7 +37,7 @@ export default function AccountsMultiSelect({
       onItemSelect={onAccountSelect}>
       <Button
         rightIcon='caret-down'
-        text={selectedAccount ? selectedAccount.name : 'Select account'}
+        text={selectedAccount ? selectedAccount.name : defautlSelectText}
       />
     </Select>
   );

client/src/components/Dashboard/DashboardTopbar.js

@@ -37,7 +37,7 @@ function DashboardTopbar({
     <div class="dashboard__topbar">
       <div class="dashboard__topbar-left">
         <div class="dashboard__topbar-sidebar-toggle">
-          <Button>
+          <Button minimal={true}>
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" focusable="false">
               <title>Menu</title>
               <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="5" stroke-width="2" d="M4 7h15M4 12h15M4 17h15"></path>

client/src/components/DataTable.js

@@ -16,14 +16,7 @@ import Icon from 'components/Icon';
 
 const IndeterminateCheckbox = React.forwardRef(
   ({ indeterminate, ...rest }, ref) => {
-    const defaultRef = React.useRef()
-    const resolvedRef = ref || defaultRef
-
-    useEffect(() => {
-      resolvedRef.current.indeterminate = indeterminate
-    }, [resolvedRef, indeterminate])
-
-    return (<Checkbox ref={resolvedRef} {...rest} />);
+    return (<Checkbox indeterminate={indeterminate} {...rest} />);
   }
 );
 
@@ -174,13 +167,14 @@ export default function DataTable({
                 })}>
                   <div {...column.getSortByToggleProps()}>
                     {column.render('Header')}
-                    <span>
-                      {column.isSorted
-                        ? column.isSortedDesc
-                          ? (<Icon icon="sort-down" />)
-                          : (<Icon icon="sort-up" />)
-                        : ''}
-                    </span>
+
+                    {column.isSorted && (
+                      <span className={classnames({
+                        'sort-icon--desc': column.isSortedDesc,
+                        'sort-icon--asc': !column.isSortedDesc,
+                      }, 'sort-icon')}>
+                      </span>
+                    )}
                   </div>
 
                   {column.canResize && (

client/src/components/ErrorMessage.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {get} from 'lodash';
+
+const hasErrorMessage = ({
+  
+}) => {
+
+}
+
+export default function ErrorMessage({
+  touched, 
+  errors,
+  name,
+  children,
+}) {
+  const error = get(errors, name);
+  const touch = get(touched, name);
+  
+  return (error && touch) ? error : null;
+}
+