feat: optimize style of sale estimate details.

src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.js

@@ -1,19 +1,19 @@
 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 view detail
+ * Estimate details tabs.
+ * @returns {React.JSX}
  */
-export default function EstimateDetail() {
+function EstimateDetailsTabs() {
   return (
-    <div className={clsx(EstimateDetailsCls.root)}>
     <DrawerMainTabs>
       <Tab
         title={intl.get('details')}
@@ -21,6 +21,19 @@ export default function EstimateDetail() {
         panel={<EstimateDetailPanel />}
       />
     </DrawerMainTabs>
-    </div>
   );
 }
+
+/**
+ * Estimate view detail
+ */
+export default function EstimateDetail() {
+  return (
+    <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,11 +21,18 @@ export default function EstimateDetailHeader() {
   const { estimate } = useEstimateDetailDrawerContext();
 
   return (
-    <div className={clsx(EstimateDetailsCls.detail_panel_header)}>
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem label={intl.get('amount')}>
             <span class="big-number">{estimate.formatted_amount}</span>
           </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem
               label={intl.get('estimate.details.estimate_number')}
               children={defaultTo(estimate.estimate_number, '-')}
@@ -37,8 +50,14 @@ export default function EstimateDetailHeader() {
               children={estimate.formatted_expiration_date}
             />
           </DetailsMenu>
+        </Col>
 
-      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
             <DetailItem
               label={intl.get('reference')}
               children={defaultTo(estimate.reference, '-')}
@@ -48,6 +67,8 @@ export default function EstimateDetailHeader() {
               children={<FormatDate value={estimate.created_at} />}
             />
           </DetailsMenu>
-    </div>
+        </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)}>
+    <CommercialDocBox>
-      <EstimateDetailActionsBar />
-
-      <Card>
       <EstimateDetailHeader />
       <EstimateDetailTable />
       <EstimateDetailFooter />
-      </Card>
+    </CommercialDocBox>
-    </div>
   );
 }

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)}>
+    <CommercialDocEntriesTable
-      <DataTable
       columns={columns}
       data={entries}
-        className={'table-constrant'}
+      styleName={TableStyle.Constrant}
     />
-    </div>
   );
 }