feat: optimize style of sale estimate details.

src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.js

@@ -1,26 +1,39 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
 import { DrawerMainTabs } from 'components';
 
+import EstimateDetailActionsBar from './EstimateDetailActionsBar';
 import EstimateDetailPanel from './EstimateDetailPanel';
-import clsx from 'classnames';
 
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+/**
+ * Estimate details tabs.
+ * @returns {React.JSX}
+ */
+function EstimateDetailsTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<EstimateDetailPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
 
 /**
  * Estimate view detail
  */
 export default function EstimateDetail() {
   return (
-    <div className={clsx(EstimateDetailsCls.root)}>
-      <DrawerMainTabs>
-        <Tab
-          title={intl.get('details')}
-          id={'details'}
-          panel={<EstimateDetailPanel />}
-        />
-      </DrawerMainTabs>
-    </div>
+    <EstimateDetailsRoot>
+      <EstimateDetailActionsBar />
+      <EstimateDetailsTabs />
+    </EstimateDetailsRoot>
   );
 }
+
+const EstimateDetailsRoot = styled.div``;

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js

@@ -8,7 +8,7 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -19,7 +19,13 @@ import {
   AbilitySubject,
 } from '../../../common/abilityOption';
 
-import { Icon, FormattedMessage as T, MoreMenuItems, Can } from 'components';
+import {
+  DrawerActionsBar,
+  Icon,
+  FormattedMessage as T,
+  MoreMenuItems,
+  Can,
+} from 'components';
 
 import { compose } from 'utils';
 
@@ -36,8 +42,10 @@ function EstimateDetailActionsBar({
   // #withDrawerActions
   closeDrawer,
 }) {
+  // Estimate details drawer context.
   const { estimateId } = useEstimateDetailDrawerContext();
 
+  // History.
   const history = useHistory();
 
   // Handle edit sale estimate.
@@ -61,7 +69,7 @@ function EstimateDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
           <Button
@@ -98,7 +106,7 @@ function EstimateDetailActionsBar({
           />
         </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
-import clsx from 'classnames';
 
-import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
+import {
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  FormatDate,
+  T,
+  DetailsMenu,
+  DetailItem,
+  Row,
+  Col,
+} from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
-
 /**
  * Estimate read-only details drawer header.
  */
@@ -15,39 +21,54 @@ export default function EstimateDetailHeader() {
   const { estimate } = useEstimateDetailDrawerContext();
 
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel_header)}>
-      <DetailsMenu>
-        <DetailItem label={intl.get('amount')}>
-          <span class="big-number">{estimate.formatted_amount}</span>
-        </DetailItem>
-        <DetailItem
-          label={intl.get('estimate.details.estimate_number')}
-          children={defaultTo(estimate.estimate_number, '-')}
-        />
-        <DetailItem
-          label={intl.get('customer_name')}
-          children={estimate.customer?.display_name}
-        />
-        <DetailItem
-          label={intl.get('estimate_date')}
-          children={estimate.formatted_estimate_date}
-        />
-        <DetailItem
-          label={intl.get('expiration_date')}
-          children={estimate.formatted_expiration_date}
-        />
-      </DetailsMenu>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem label={intl.get('amount')}>
+            <span class="big-number">{estimate.formatted_amount}</span>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
-        <DetailItem
-          label={intl.get('reference')}
-          children={defaultTo(estimate.reference, '-')}
-        />
-        <DetailItem
-          label={<T id={'estimate.details.created_at'} />}
-          children={<FormatDate value={estimate.created_at} />}
-        />
-      </DetailsMenu>
-    </div>
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('estimate.details.estimate_number')}
+              children={defaultTo(estimate.estimate_number, '-')}
+            />
+            <DetailItem
+              label={intl.get('customer_name')}
+              children={estimate.customer?.display_name}
+            />
+            <DetailItem
+              label={intl.get('estimate_date')}
+              children={estimate.formatted_estimate_date}
+            />
+            <DetailItem
+              label={intl.get('expiration_date')}
+              children={estimate.formatted_expiration_date}
+            />
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(estimate.reference, '-')}
+            />
+            <DetailItem
+              label={<T id={'estimate.details.created_at'} />}
+              children={<FormatDate value={estimate.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
   );
 }

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.js

@@ -1,25 +1,17 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
 
-import EstimateDetailActionsBar from './EstimateDetailActionsBar';
 import EstimateDetailHeader from './EstimateDetailHeader';
 import EstimateDetailTable from './EstimateDetailTable';
-
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
 import EstimateDetailFooter from './EstimateDetailFooter';
 
 export default function EstimateDetailTab() {
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel)}>
-      <EstimateDetailActionsBar />
-
-      <Card>
-        <EstimateDetailHeader />
-        <EstimateDetailTable />
-        <EstimateDetailFooter />
-      </Card>
-    </div>
+    <CommercialDocBox>
+      <EstimateDetailHeader />
+      <EstimateDetailTable />
+      <EstimateDetailFooter />
+    </CommercialDocBox>
   );
 }

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import clsx from 'classnames';
 
-import { DataTable } from 'components';
+import { CommercialDocEntriesTable } from 'components';
+
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
-
 import { useEstimateReadonlyEntriesColumns } from './utils';
 
-import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+import { TableStyle } from '../../../common';
 
 /**
  * Estimate detail table.
@@ -20,12 +19,10 @@ export default function EstimateDetailTable() {
   const columns = useEstimateReadonlyEntriesColumns();
 
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel_table)}>
-      <DataTable
-        columns={columns}
-        data={entries}
-        className={'table-constrant'}
-      />
-    </div>
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
   );
 }