feat: optimize account details.

src/containers/Drawers/AccountDrawer/AccountDrawerTable.js

@@ -1,26 +1,23 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
-import { DataTable, If } from 'components';
+import { Card, DataTable, If } from 'components';
 
 import { compose } from 'utils';
 import { useAccountReadEntriesColumns } from './utils';
 
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
+import { TableStyle } from '../../../common';
 
 /**
  * account drawer table.
  */
 function AccountDrawerTable({ closeDrawer }) {
-  const {
-    account,
-    accounts,
-    drawerName,
-  } = useAccountDrawerContext();
+  const { account, accounts, drawerName } = useAccountDrawerContext();
 
   // Account read-only entries table columns.
   const columns = useAccountReadEntriesColumns();
@@ -31,21 +28,34 @@ function AccountDrawerTable({ closeDrawer }) {
   };
 
   return (
-    <div className={'account-drawer__table'}>
-      <DataTable columns={columns} data={accounts} payload={{ account }}/>
+    <Card>
+      <DataTable
+        columns={columns}
+        data={accounts}
+        payload={{ account }}
+        styleName={TableStyle.Constrant}
+      />
 
       <If condition={accounts.length > 0}>
-        <div class="account-drawer__table-footer">
+        <TableFooter>
           <Link
             to={`/financial-reports/general-ledger`}
             onClick={handleLinkClick}
           >
-            ←{intl.get('view_more_transactions')}
+            ← {intl.get('view_more_transactions')}
           </Link>
-        </div>
+        </TableFooter>
       </If>
-    </div>
+    </Card>
   );
 }
 
 export default compose(withDrawerActions)(AccountDrawerTable);
+
+const TableFooter = styled.div`
+  padding: 6px 14px;
+  display: block;
+  border-top: 1px solid #d2dde2;
+  border-bottom: 1px solid #d2dde2;
+  font-size: 12px;
+`;