feat: optimize style of account drawer.

client/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js

@@ -28,8 +28,6 @@ function AccountDrawerActionBar({
   // #ownProps
   account,
 }) {
-
-
   // Handle new child button click.
   const onNewChildAccount = () => {
     openDialog('account-form', {
@@ -69,9 +67,9 @@ function AccountDrawerActionBar({
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon style={{ color: 'red' }} icon="trash-18" iconSize={18} />}
+          icon={<Icon icon="trash-18" iconSize={18} />}
           text={<T id={'delete'} />}
-          // intent={Intent.DANGER}
+          intent={Intent.DANGER}
           onClick={safeCallback(onDeleteAccount)}
         />
       </NavbarGroup>

client/src/containers/Drawers/AccountDrawer/AccountDrawerContent.js

@@ -8,10 +8,11 @@ import AccountDrawerDetails from './AccountDrawerDetails';
 export default function AccountDrawerContent({
   // #ownProp
   accountId,
+  name
 }) {
   return (
-    <AccountDrawerProvider accountId={accountId}>
+    <AccountDrawerProvider name={name} accountId={accountId}>
       <AccountDrawerDetails />
     </AccountDrawerProvider>
   );
-}
+}

client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage as T } from 'react-intl';
-import { If, Money } from 'components';
+import { Icon, Money } from 'components';
 
 /**
  *  Account drawer header.
@@ -23,17 +23,24 @@ export default function AccountDrawerHeader({
           {<Money amount={amount} currency={currency_code} />}
         </p>
       </div>
-      <div>
+      <div class={'account-type'}>
         <span>
           <T id={'account_type'} />
         </span>
         <p>{account_type_label}</p>
       </div>
-      <div>
+      <div class={'account-normal'}>
         <span>
           <T id={'account_normal'} />
         </span>
-        <p> {account_normal}</p>
+        <p>
+          {' '}
+          {account_normal}{' '}
+          <Icon
+            iconSize={14}
+            icon={`arrow-${account_normal === 'credit' ? 'down' : 'up'}`}
+          />
+        </p>
       </div>
       <div>
         <span>
@@ -49,12 +56,10 @@ export default function AccountDrawerHeader({
       </div>
 
       <p className={'account-drawer__content--desc'}>
-        <If condition={description}>
-          <b>
-            <T id={'description'} />
-          </b>
-          : {description}
-        </If>
+        <b>
+          <T id={'description'} />
+        </b>
+        : {description ? description : '--'}
       </p>
     </div>
   );

client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js

@@ -7,7 +7,7 @@ const AccountDrawerContext = React.createContext();
 /**
  * Account drawer provider.
  */
-function AccountDrawerProvider({ accountId, ...props }) {
+function AccountDrawerProvider({ accountId, name, ...props }) {
   // Fetches the specific account details.
   const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
     enabled: !!accountId,
@@ -20,18 +20,19 @@ function AccountDrawerProvider({ accountId, ...props }) {
   } = useAccountTransactions(accountId, {
     enabled: !!accountId,
   });
-  const name = `${account.name} ${account.code}`;
+  const drawerTitle = `${account.name} ${account.code}`;
 
   // provider.
   const provider = {
     accountId,
     account,
     accounts,
+    drawerName: name,
   };
 
   return (
     <DashboardInsider loading={isAccountLoading || isAccountsLoading}>
-      <DrawerHeaderContent name={'account-drawer'} title={name} />
+      <DrawerHeaderContent name={'account-drawer'} title={drawerTitle} />
       <AccountDrawerContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );

client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js

@@ -1,18 +1,23 @@
 import React from 'react';
 import moment from 'moment';
+import { Link } from 'react-router-dom';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 import { formatMessage } from 'services/intl';
 import { DataTable, Money } from 'components';
-import { isBlank } from 'utils';
+import { isBlank, compose } from 'utils';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 /**
  * account drawer table.
  */
-export default function AccountDrawerTable() {
+function AccountDrawerTable({
+  closeDrawer
+}) {
   const {
     account: { currency_code },
     accounts,
+    drawerName
   } = useAccountDrawerContext();
 
   const columns = React.useMemo(
@@ -45,16 +50,33 @@ export default function AccountDrawerTable() {
       },
       {
         Header: formatMessage({ id: 'running_balance' }),
-        accessor: 'balance',
+        accessor: ({ running_balance }) => (
+          <Money amount={running_balance} currency={currency_code} />
+        ),
         width: 110,
       },
     ],
     [],
   );
 
+  // Handle view more link click.
+  const handleLinkClick = () => {
+    closeDrawer(drawerName);
+  };
+
   return (
     <div className={'account-drawer__table'}>
       <DataTable columns={columns} data={accounts} />
+
+      <div class="account-drawer__table-footer">
+        <Link to={`/financial-reports/general-ledger`} onClick={handleLinkClick}>
+          ← View more transactions.
+        </Link>
+      </div>
     </div>
   );
 }
+
+export default compose(
+  withDrawerActions
+)(AccountDrawerTable);

client/src/containers/Drawers/AccountDrawer/index.js

@@ -11,15 +11,15 @@ const AccountDrawerContent = lazy(() => import('./AccountDrawerContent'));
  */
 function AccountDrawer({
   name,
-  //#withDrawer
+  // #withDrawer
   isOpen,
   payload: { accountId },
 }) {
 
   return (
-    <Drawer isOpen={isOpen} name={name}>
+    <Drawer isOpen={isOpen} name={name} size={'900px'}>
       <DrawerSuspense>
-        <AccountDrawerContent accountId={accountId} />
+        <AccountDrawerContent name={name} accountId={accountId} />
       </DrawerSuspense>
     </Drawer>
   );

client/src/containers/Drawers/ManualJournalDrawer/index.js

@@ -19,7 +19,7 @@ function ManualJournalDrawer({
   payload: { manualJournalId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name}>
+    <Drawer isOpen={isOpen} name={name} size={'900px'}>
       <DrawerSuspense>
         <ManualJournalDrawerContent manualJournalId={manualJournalId} />
       </DrawerSuspense>