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

fix(webapp): inconsistent style of quick customer/vendor drawer
This commit is contained in:
Ahmed Bouhuolia
2023-02-16 22:10:37 +02:00
committed by GitHub
4 changed files with 44 additions and 12 deletions

View File

@@ -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);

View File

@@ -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-right: -36px;
margin-left: -41px;
margin-right: -41px;
}
}
`;

View File

@@ -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-right: -36px;
margin-left: -41px;
margin-right: -41px;
}
}
`;

View File

@@ -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);