From 40bc7d4e99990406cc083e88ac6d7c314402acf6 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sun, 2 Jan 2022 16:37:37 +0200
Subject: [PATCH] fix: `BIG-222` Manual journal details entries table footer.

---
 src/components/Table/index.js                 | 33 +++++++++++
 src/components/index.js                       |  1 +
 .../ManualJournalDrawerFooter.js              | 59 +++++++++++++------
 3 files changed, 75 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Table/index.js

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
new file mode 100644
index 000000000..9c5afe084
--- /dev/null
+++ b/src/components/Table/index.js
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const Table = styled.table`
+  width: 100%;
+  vertical-align: top;
+  border-color: #dee2e6;
+  border-spacing: 0;
+`;
+export const TBody = styled.tbody``;
+export const TR = styled.tr``;
+export const TD = styled.td`
+  padding: 0.5rem 0.5rem;
+  border-bottom-width: 1px;
+  border-bottom-color: inherit;
+  border-bottom-style: solid;
+
+  ${(props) =>
+    props.textAlign === 'right' &&
+    `
+  text-align: right;`}
+`;
+
+export const TRDarkSingleLine = styled(TR)`
+  ${TD} {
+    border-bottom: 1px solid #000;
+  }
+`;
+
+export const TRDarkDoubleLines = styled(TR)`
+  ${TD} {
+    border-bottom: 3px double #000;
+  }
+`;
diff --git a/src/components/index.js b/src/components/index.js
index 04a2b4138..5e14f2288 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -94,6 +94,7 @@ export * from './CommercialDoc';
 export * from './Card';
 export * from './Customers'
 export * from './Vendors'
+export * from './Table';
 
 const Hint = FieldHint;
 
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
index 3661ce341..a30d35a35 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
@@ -1,7 +1,15 @@
 import React from 'react';
-import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+import styled from 'styled-components';
 
-import { T, FormatNumber } from '../../../components';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+import {
+  TRDarkSingleLine,
+  TRDarkDoubleLines,
+  T,
+  FormatNumber,
+  Table,
+  TD,
+} from '../../../components';
 
 /**
  * Manual journal readonly details footer.
@@ -13,26 +21,41 @@ export default function ManualJournalDrawerFooter() {
 
   return (
     <div className="journal-drawer__content-footer">
-      <div class="total-lines">
-        <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">
+      <JournalTotalTable>
+        <TRDarkSingleLine>
+          <TDLabel>
             <T id={'manual_journal.details.subtotal'} />
-          </div>
-          <div class="debit">
+          </TDLabel>
+          <TDAmount textAlign={'right'}>
             <FormatNumber value={amount} />
-          </div>
-          <div class="credit">
+          </TDAmount>
+          <TDAmount textAlign={'right'}>
             <FormatNumber value={amount} />
-          </div>
-        </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">
+          </TDAmount>
+        </TRDarkSingleLine>
+
+        <TRDarkDoubleLines>
+          <TDLabel>
             <T id={'manual_journal.details.total'} />
-          </div>
-          <div class="debit">{formatted_amount}</div>
-          <div class="credit">{formatted_amount}</div>
-        </div>
-      </div>
+          </TDLabel>
+          <TDAmount textAlign={'right'}>{formatted_amount}</TDAmount>
+          <TDAmount textAlign={'right'}>{formatted_amount}</TDAmount>
+        </TRDarkDoubleLines>
+      </JournalTotalTable>
     </div>
   );
 }
+
+const JournalTotalTable = styled(Table)`
+  font-weight: 600;
+  width: auto;
+  margin-left: auto;
+`;
+
+const TDLabel = styled(TD)`
+  width: 220px;
+`;
+
+const TDAmount = styled(TD)`
+  width: 155px;
+`;