Merge pull request #87 from bigcapitalhq/BIG-412-inconsistent-style-of-quick-customer-vendor-drawer

fix(webapp): inconsistent style of quick customer/vendor drawer

packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx

@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 import { CLASSES } from '@/constants/classes';
 import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
@@ -104,9 +105,9 @@ function CustomerFormFormik({
         onSubmit={handleFormSubmit}
       >
         <Form>
-          <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+          <CustomerFormHeaderPrimary>
             <CustomerFormPrimarySection />
-          </div>
+          </CustomerFormHeaderPrimary>
 
           <div className={'page-form__after-priamry-section'}>
             <CustomerFormAfterPrimarySection />
@@ -123,4 +124,12 @@ function CustomerFormFormik({
   );
 }
 
+export const CustomerFormHeaderPrimary = styled.div`
+  padding: 10px 0 0;
+  margin: 0 0 20px;
+  overflow: hidden;
+  border-bottom: 1px solid #e4e4e4;
+  max-width: 1000px;
+`;
+
 export default compose(withCurrentOrganization())(CustomerFormFormik);

packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.tsx

@@ -4,12 +4,13 @@ import * as R from 'ramda';
 import styled from 'styled-components';
 
 import { Card, DrawerLoading } from '@/components';
-
 import {
   CustomerFormProvider,
   useCustomerFormContext,
 } from '@/containers/Customers/CustomerForm/CustomerFormProvider';
-import CustomerFormFormik from '@/containers/Customers/CustomerForm/CustomerFormFormik';
+import CustomerFormFormik, {
+  CustomerFormHeaderPrimary,
+} from '@/containers/Customers/CustomerForm/CustomerFormFormik';
 
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
@@ -55,12 +56,18 @@ export default R.compose(withDrawerActions)(QuickCustomerFormDrawer);
 
 const CustomerFormCard = styled(Card)`
   margin: 15px;
+  padding: 25px;
   margin-bottom: calc(15px + 65px);
 
+  ${CustomerFormHeaderPrimary} {
+    padding-top: 0;
+  }
   .page-form {
+    padding: 0;
+
     &__floating-actions {
-      margin-left: -36px;
+      margin-left: -41px;
-      margin-right: -36px;
+      margin-right: -41px;
     }
   }
 `;

packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx

@@ -4,12 +4,13 @@ import * as R from 'ramda';
 import styled from 'styled-components';
 
 import { Card, DrawerLoading } from '@/components';
-
 import {
   VendorFormProvider,
   useVendorFormContext,
 } from '@/containers/Vendors/VendorForm/VendorFormProvider';
-import VendorFormFormik from '@/containers/Vendors/VendorForm/VendorFormFormik';
+import VendorFormFormik, {
+  VendorFormHeaderPrimary,
+} from '@/containers/Vendors/VendorForm/VendorFormFormik';
 
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
@@ -75,12 +76,18 @@ export default R.compose(
 
 const VendorFormCard = styled(Card)`
   margin: 15px;
+  padding: 25px;
   margin-bottom: calc(15px + 65px);
 
+  ${VendorFormHeaderPrimary} {
+    padding-top: 0;
+  }
   .page-form {
+    padding: 0;
+
     &__floating-actions {
-      margin-left: -36px;
+      margin-left: -41px;
-      margin-right: -36px;
+      margin-right: -41px;
     }
   }
 `;

packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx

@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
+import styled from 'styled-components';
 
 import { CLASSES } from '@/constants/classes';
 import { AppToaster } from '@/components';
@@ -115,9 +116,9 @@ function VendorFormFormik({
         onSubmit={handleFormSubmit}
       >
         <Form>
-          <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+          <VendorFormHeaderPrimary>
             <VendorFormPrimarySection />
-          </div>
+          </VendorFormHeaderPrimary>
 
           <div className={'page-form__after-priamry-section'}>
             <VendorFormAfterPrimarySection />
@@ -134,4 +135,12 @@ function VendorFormFormik({
   );
 }
 
+export const VendorFormHeaderPrimary = styled.div`
+  padding: 10px 0 0;
+  margin: 0 0 20px;
+  overflow: hidden;
+  border-bottom: 1px solid #e4e4e4;
+  max-width: 1000px;
+`;
+
 export default compose(withCurrentOrganization())(VendorFormFormik);