feat(Sales & Purchases ): add FormTopBar.

src/containers/Purchases/Bills/BillForm/BillFormTopBar.js

@@ -2,19 +2,24 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
   Classes,
 } from '@blueprintjs/core';
-import styled from 'styled-components';
 import {
   useSetPrimaryBranchToForm,
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useBillFormContext } from './BillFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +43,7 @@ export default function BillFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <BillFormSelectBranch />
@@ -50,7 +55,7 @@ export default function BillFormTopBar() {
           <BillFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +112,3 @@ function BillBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js

@@ -3,7 +3,6 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
@@ -14,7 +13,14 @@ import {
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +44,7 @@ export default function VendorCreditNoteFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <VendorCreditNoteFormSelectBranch />
@@ -50,7 +56,7 @@ export default function VendorCreditNoteFormTopBar() {
           <VendorCreditFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +113,3 @@ function VendorCreditNoteBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js

@@ -10,7 +10,13 @@ import {
 import styled from 'styled-components';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { Features } from 'common';
 
@@ -30,13 +36,13 @@ export default function PaymentMadeFormTopBar() {
     return null;
   }
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <PaymentMadeFormSelectBranch />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -66,12 +72,3 @@ function PaymentMadeBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;