refactor: Total lines of commercial documents.

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js

@@ -1,12 +1,16 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import { T, TotalLines, TotalLine, If } from 'components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 import { FormatNumber } from '../../../components';
 
-import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
-
 /**
  * Vendor Credit detail panel footer.
  */
@@ -14,19 +18,26 @@ export default function VendorCreditDetailDrawerFooter() {
   const { vendorCredit } = useVendorCreditDetailDrawerContext();
 
   return (
-    <div className={clsx(VendorCreditDetailCls.detail_panel_footer)}>
-      <TotalLines className={clsx(VendorCreditDetailCls.total_lines)}>
+    <VendorCreditFooterRoot>
+      <VendorCreditTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'vendor_credit.drawer.label_subtotal'} />}
           value={<FormatNumber value={vendorCredit.formatted_amount} />}
-          className={VendorCreditDetailCls.total_line_subtotal}
+          borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'vendor_credit.drawer.label_total'} />}
           value={vendorCredit.formatted_amount}
-          className={VendorCreditDetailCls.total_line_total}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
-      </TotalLines>
-    </div>
+      </VendorCreditTotalLines>
+    </VendorCreditFooterRoot>
   );
 }
+
+export const VendorCreditFooterRoot = styled.div``;
+
+export const VendorCreditTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js

@@ -6,12 +6,16 @@ import VendorCreditDetailHeader from './VendorCreditDetailHeader';
 import VendorCreditDetailTable from './VendorCreditDetailTable';
 import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
 
+/**
+ * Vendor credit details panel.
+ * @returns {React.JSX}
+ */
 export default function VendorCreditDetailPanel() {
   return (
     <CommercialDocBox>
       <VendorCreditDetailHeader />
       <VendorCreditDetailTable />
-      {/* <VendorCreditDetailDrawerFooter /> */}
+      <VendorCreditDetailDrawerFooter />
     </CommercialDocBox>
   );
 }