From 46bf1cc39a994028174bbb3434e6a6af31add9a1 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Thu, 22 Jun 2023 20:48:27 +0200
Subject: [PATCH] fix(webapp): style of quick item drawer

---
 .../QuickCreateItemDrawerForm.tsx             | 31 +++++++++++--------
 .../src/containers/Items/ItemFormFormik.tsx   |  4 ++-
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.tsx b/packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.tsx
index b185eacaa0..29b7ec4a08 100644
--- a/packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.tsx
+++ b/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 {
-    margin-left: -36px;
-    margin-right: -36px;
+  .page-form {
+    padding: 0;
+
+    &__floating-actions {
+      margin-left: -41px;
+      margin-right: -41px;
+    }
   }
 `;
diff --git a/packages/webapp/src/containers/Items/ItemFormFormik.tsx b/packages/webapp/src/containers/Items/ItemFormFormik.tsx
index 3acf49da50..45bc74e920 100644
--- a/packages/webapp/src/containers/Items/ItemFormFormik.tsx
+++ b/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}