refactor: Total lines of commercial documents.

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js

@@ -1,11 +1,15 @@
 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,
+  FormatNumber,
+} from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
-import { FormatNumber } from '../../../components';
-
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
 
 /**
  * Estimate details panel footer content.
@@ -14,27 +18,26 @@ export default function EstimateDetailFooter() {
   const { estimate } = useEstimateDetailDrawerContext();
 
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel_footer)}>
-      <TotalLines className={clsx(EstimateDetailsCls.total_lines)}>
+    <EstimateDetailsFooterRoot>
+      <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'estimate.details.subtotal'} />}
           value={<FormatNumber value={estimate.amount} />}
-          className={EstimateDetailsCls.total_line_subtotal}
+          borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'estimate.details.total'} />}
           value={estimate.formatted_amount}
-          className={EstimateDetailsCls.total_line_total}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
         />
-      </TotalLines>
-
-      <If condition={false}>
-        <div className={clsx(EstimateDetailsCls.detail_panel_note)}>
-          <p>
-            <b><T id={'estimate.details.note'} />:</b> --
-          </p>
-        </div>
-      </If>
-    </div>
+      </EstimateTotalLines>
+    </EstimateDetailsFooterRoot>
   );
 }
+
+export const EstimateDetailsFooterRoot = styled.div``;
+
+export const EstimateTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;