Merge pull request #173 from bigcapitalhq/abouhuolia/big-37-item-drawer-floating

fix(webapp): style of quick item drawer

packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.tsx

@@ -17,16 +17,6 @@ import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { DRAWERS } from '@/constants/drawers';
 
-/**
- * Drawer item form loading.
- * @returns {JSX}
- */
-function DrawerItemFormLoading({ children }) {
-  const { isFormLoading } = useItemFormContext();
-
-  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
-}
-
 /**
  * Quick create/edit item drawer form.
  */
@@ -72,6 +62,16 @@ function QuickCreateItemDrawerForm({
   );
 }
 
+/**
+ * Drawer item form loading.
+ * @returns {JSX}
+ */
+function DrawerItemFormLoading({ children }) {
+  const { isFormLoading } = useItemFormContext();
+
+  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
+}
+
 export default R.compose(
   withDrawerActions,
   withDashboardActions,
@@ -79,10 +79,15 @@ export default R.compose(
 
 const ItemFormCard = styled(Card)`
   margin: 15px;
+  padding: 25px;
   margin-bottom: calc(15px + 65px);
 
-  .page-form__floating-actions {
+  .page-form {
-    margin-left: -36px;
+    padding: 0;
-    margin-right: -36px;
+
+    &__floating-actions {
+      margin-left: -41px;
+      margin-right: -41px;
+    }
   }
 `;

packages/webapp/src/containers/Items/ItemFormFormik.tsx

@@ -90,7 +90,9 @@ export default function ItemFormFormik({
   };
 
   return (
-    <div class={classNames(CLASSES.PAGE_FORM_ITEM, className)}>
+    <div
+      class={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ITEM, className)}
+    >
       <Formik
         enableReinitialize={true}
         validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}