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;
+`;

src/style/components/Drawers/AccountDrawer.scss

@@ -1,8 +1,7 @@
 
 
 .account-drawer {
-  background-color: #fbfbfb;
-
+  
   .card-header{
     margin: 15px;
     padding: 22px 15px;
@@ -35,34 +34,4 @@
       }
     }
   }
-
-  &__table {
-    margin: 18px;
-    background: #fff;
-    border: 1px solid #d2dce2;
-
-    .table {
-      .thead {
-        .tr .th {
-          padding: 0.7rem 0.8rem;
-          font-weight: 500;
-        }
-      }
-
-      .tbody .tr .td {
-        padding: 0.6rem 0.8rem;
-      }
-    }
-
-    &-footer{
-      padding: 10px 14px;
-      display: inline-block;
-      
-      a{
-        text-decoration: underline;
-        font-size: 12px;
-        color: #37639c;
-      }
-    }
-  }
 }