From 27cb2bf554bdafe7d1a52dcd011e32a355cb3d81 Mon Sep 17 00:00:00 2001
From: Santiago <borrajosantiago@gmail.com>
Date: Wed, 14 Jun 2023 18:14:27 -0300
Subject: [PATCH 1/4] added story and style adjustments

---
 app/react/App/styles/globals.css              |  8 +++
 app/react/V2/Components/UI/Modal.tsx          | 13 ++---
 .../Settings/Languages/LanguagesList.tsx      |  2 +-
 .../stories/ConfirmationModal.stories.tsx     |  2 +-
 app/react/stories/Modal.stories.tsx           | 57 +++++++++++++++++--
 5 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/app/react/App/styles/globals.css b/app/react/App/styles/globals.css
index 4c33cfd2f6..cc2c698553 100644
--- a/app/react/App/styles/globals.css
+++ b/app/react/App/styles/globals.css
@@ -1053,6 +1053,10 @@ input:checked + .toggle-bg {
   position: sticky;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -1445,6 +1449,10 @@ input:checked + .toggle-bg {
   max-height: calc(100vh - 9rem);
 }
 
+.max-h-screen {
+  max-height: 100vh;
+}
+
 .min-h-fit {
   min-height: -moz-fit-content;
   min-height: fit-content;
diff --git a/app/react/V2/Components/UI/Modal.tsx b/app/react/V2/Components/UI/Modal.tsx
index 537ee4ef8f..ce76b35a10 100644
--- a/app/react/V2/Components/UI/Modal.tsx
+++ b/app/react/V2/Components/UI/Modal.tsx
@@ -21,14 +21,13 @@ const Modal = ({ children, size }: ModalProps) => {
   return (
     <div
       aria-hidden="false"
-      className={`fixed top-0 right-0 left-0 z-50 h-modal overflow-y-auto overflow-x-hidden 
-        md:inset-0 md:h-full items-center justify-center flex bg-gray-900 bg-opacity-50`}
+      className="flex overflow-x-hidden fixed inset-0 top-0 left-0 z-50 justify-center items-center bg-gray-900 bg-opacity-50"
       data-testid="modal"
       role="dialog"
       aria-label="Modal"
     >
-      <div className={`relative h-full w-full p-4 md:h-auto ${sizes[size]}`}>
-        <div className="relative bg-white rounded-lg shadow">{children}</div>
+      <div className={`overflow-y-auto py-4 max-h-screen ${sizes[size]}`}>
+        <div className="bg-white rounded-lg shadow">{children}</div>
       </div>
     </div>
   );
@@ -42,7 +41,7 @@ interface ModalChildrenProps {
 Modal.Header = ({ children, className }: ModalChildrenProps) => (
   <div
     className={`${className} flex items-start justify-between rounded-t ${
-      children ? 'border-b p-5' : 'p-2'
+      children ? 'p-5 border-b' : 'p-2'
     }`}
   >
     {children}
@@ -50,13 +49,13 @@ Modal.Header = ({ children, className }: ModalChildrenProps) => (
 );
 
 Modal.Body = ({ children, className }: ModalChildrenProps) => (
-  <div className={`${className} p-6 `} data-testid="modal-body">
+  <div className={`p-6 ${className}`} data-testid="modal-body">
     {children}
   </div>
 );
 
 Modal.Footer = ({ children }: ModalChildrenProps) => (
-  <div className="flex justify-center p-6 space-x-2 border-t border-gray-200 rounded-b">
+  <div className="flex justify-center p-6 space-x-2 rounded-b border-t border-gray-200">
     {children}
   </div>
 );
diff --git a/app/react/V2/Routes/Settings/Languages/LanguagesList.tsx b/app/react/V2/Routes/Settings/Languages/LanguagesList.tsx
index aaa10dc2c7..e920085501 100644
--- a/app/react/V2/Routes/Settings/Languages/LanguagesList.tsx
+++ b/app/react/V2/Routes/Settings/Languages/LanguagesList.tsx
@@ -176,7 +176,7 @@ const LanguagesList = () => {
         </SettingsContent.Footer>
       </SettingsContent>
       {showModal && (
-        <div className="container w-10 h10">
+        <div className="container w-10 h-10">
           <ConfirmationModal {...modalProps} size="md" />
         </div>
       )}
diff --git a/app/react/stories/ConfirmationModal.stories.tsx b/app/react/stories/ConfirmationModal.stories.tsx
index 7ff52a7b27..f16e8f068a 100644
--- a/app/react/stories/ConfirmationModal.stories.tsx
+++ b/app/react/stories/ConfirmationModal.stories.tsx
@@ -26,7 +26,7 @@ const Primary: Story = {
   render: args => (
     <Provider store={createStore()}>
       <div className="tw-content">
-        <div className="container w-10 h10">
+        <div className="container w-10 h-10">
           <ConfirmationModal
             header={args.header}
             body={args.body}
diff --git a/app/react/stories/Modal.stories.tsx b/app/react/stories/Modal.stories.tsx
index 4c413bfee2..db5d83cf64 100644
--- a/app/react/stories/Modal.stories.tsx
+++ b/app/react/stories/Modal.stories.tsx
@@ -14,13 +14,37 @@ type Story = StoryObj<typeof Modal>;
 const Primary: Story = {
   render: args => (
     <div className="tw-content">
-      <div className="container w-10 h10">
-        <Modal size={args.size}>{args.children}</Modal>
-      </div>
+      <Modal size={args.size}>{args.children}</Modal>
     </div>
   ),
 };
 
+const ModalContent = () => {
+  const contents: React.ReactNode[] = [];
+
+  for (let index = 1; index < 8; index += 1) {
+    contents.push(
+      <>
+        <h1 className="font-bold">Item {index}</h1>
+        <p className="mb-1">
+          Fusce id mi eu mauris bibendum dignissim nec in sem. Sed ultrices varius mauris quis
+          placerat. Donec imperdiet sodales diam sed imperdiet. Aenean a nisl venenatis lectus
+          mattis pellentesque. Duis fermentum ante a ultricies feugiat. Proin dapibus luctus purus
+          id viverra. Aenean a aliquet nibh. Aenean facilisis justo quis sem auctor, nec mollis
+          tortor placerat. Cras eget enim mollis, mollis risus gravida, pharetra risus. Mauris
+          dapibus malesuada mi, quis ornare felis imperdiet eget. Donec sed quam non dolor sodales
+          hendrerit. Aenean suscipit, velit sed laoreet cursus, ante odio tristique lectus, a porta
+          eros felis eu sem. Curabitur eu gravida dolor. Ut iaculis lacus vitae libero viverra
+          interdum. Phasellus ac est consectetur, malesuada nisl nec, blandit lorem.
+        </p>
+        <hr className="mb-2" />
+      </>
+    );
+  }
+
+  return <>{contents.map(content => content)}</>;
+};
+
 const Basic = {
   ...Primary,
   args: {
@@ -60,7 +84,7 @@ const Warning = {
         <h3 className="mb-5 text-lg font-normal text-gray-500">
           Are you sure you want to delete this product?
         </h3>
-        <div className="flex justify-center gap-4">
+        <div className="flex gap-4 justify-center">
           <Button styling="light" className="grow">
             No, cancel
           </Button>
@@ -74,6 +98,29 @@ const Warning = {
   },
 };
 
-export { Basic, Warning };
+const LargeContent = {
+  ...Primary,
+  args: {
+    children: (
+      <>
+        <Modal.Header>
+          <h3 className="text-xl font-medium text-gray-900">Information modal</h3>
+          <Modal.CloseButton />
+        </Modal.Header>
+        <Modal.Body>
+          <ModalContent />
+        </Modal.Body>
+        <Modal.Footer>
+          <Button styling="light" className="grow">
+            Close
+          </Button>
+        </Modal.Footer>
+      </>
+    ),
+    size: 'xxxl',
+  },
+};
+
+export { Basic, Warning, LargeContent };
 
 export default meta;

From 22b603bb3d0b0f0b3877af6b8b13ee58b99745ce Mon Sep 17 00:00:00 2001
From: Santiago <borrajosantiago@gmail.com>
Date: Wed, 14 Jun 2023 18:35:14 -0300
Subject: [PATCH 2/4] abstracted content generator

---
 app/react/stories/Modal.stories.tsx           | 29 ++---------------
 app/react/stories/Sidepanel.stories.tsx       | 31 ++-----------------
 .../stories/helpers/GeneratedContent.tsx      | 30 ++++++++++++++++++
 3 files changed, 35 insertions(+), 55 deletions(-)
 create mode 100644 app/react/stories/helpers/GeneratedContent.tsx

diff --git a/app/react/stories/Modal.stories.tsx b/app/react/stories/Modal.stories.tsx
index db5d83cf64..1d862be2f7 100644
--- a/app/react/stories/Modal.stories.tsx
+++ b/app/react/stories/Modal.stories.tsx
@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Modal } from 'V2/Components/UI/Modal';
 import { Button } from 'V2/Components/UI/Button';
 import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import { GeneratedContent } from './helpers/GeneratedContent';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
@@ -19,32 +20,6 @@ const Primary: Story = {
   ),
 };
 
-const ModalContent = () => {
-  const contents: React.ReactNode[] = [];
-
-  for (let index = 1; index < 8; index += 1) {
-    contents.push(
-      <>
-        <h1 className="font-bold">Item {index}</h1>
-        <p className="mb-1">
-          Fusce id mi eu mauris bibendum dignissim nec in sem. Sed ultrices varius mauris quis
-          placerat. Donec imperdiet sodales diam sed imperdiet. Aenean a nisl venenatis lectus
-          mattis pellentesque. Duis fermentum ante a ultricies feugiat. Proin dapibus luctus purus
-          id viverra. Aenean a aliquet nibh. Aenean facilisis justo quis sem auctor, nec mollis
-          tortor placerat. Cras eget enim mollis, mollis risus gravida, pharetra risus. Mauris
-          dapibus malesuada mi, quis ornare felis imperdiet eget. Donec sed quam non dolor sodales
-          hendrerit. Aenean suscipit, velit sed laoreet cursus, ante odio tristique lectus, a porta
-          eros felis eu sem. Curabitur eu gravida dolor. Ut iaculis lacus vitae libero viverra
-          interdum. Phasellus ac est consectetur, malesuada nisl nec, blandit lorem.
-        </p>
-        <hr className="mb-2" />
-      </>
-    );
-  }
-
-  return <>{contents.map(content => content)}</>;
-};
-
 const Basic = {
   ...Primary,
   args: {
@@ -108,7 +83,7 @@ const LargeContent = {
           <Modal.CloseButton />
         </Modal.Header>
         <Modal.Body>
-          <ModalContent />
+          <GeneratedContent />
         </Modal.Body>
         <Modal.Footer>
           <Button styling="light" className="grow">
diff --git a/app/react/stories/Sidepanel.stories.tsx b/app/react/stories/Sidepanel.stories.tsx
index 28778cadab..b22196ac88 100644
--- a/app/react/stories/Sidepanel.stories.tsx
+++ b/app/react/stories/Sidepanel.stories.tsx
@@ -5,38 +5,13 @@ import { Provider } from 'react-redux';
 import { LEGACY_createStore as createStore } from 'V2/shared/testingHelpers';
 import { Sidepanel } from 'V2/Components/UI';
 import { SidePanelProps } from 'app/V2/Components/UI/Sidepanel';
+import { GeneratedContent } from './helpers/GeneratedContent';
 
 const meta: Meta<typeof Sidepanel> = {
   title: 'Components/Sidepanel',
   component: Sidepanel,
 };
 
-const SidepanelContent = () => {
-  const contents: React.ReactNode[] = [];
-
-  for (let index = 1; index < 8; index += 1) {
-    contents.push(
-      <>
-        <h1 className="font-bold">Item {index}</h1>
-        <p className="mb-1">
-          Fusce id mi eu mauris bibendum dignissim nec in sem. Sed ultrices varius mauris quis
-          placerat. Donec imperdiet sodales diam sed imperdiet. Aenean a nisl venenatis lectus
-          mattis pellentesque. Duis fermentum ante a ultricies feugiat. Proin dapibus luctus purus
-          id viverra. Aenean a aliquet nibh. Aenean facilisis justo quis sem auctor, nec mollis
-          tortor placerat. Cras eget enim mollis, mollis risus gravida, pharetra risus. Mauris
-          dapibus malesuada mi, quis ornare felis imperdiet eget. Donec sed quam non dolor sodales
-          hendrerit. Aenean suscipit, velit sed laoreet cursus, ante odio tristique lectus, a porta
-          eros felis eu sem. Curabitur eu gravida dolor. Ut iaculis lacus vitae libero viverra
-          interdum. Phasellus ac est consectetur, malesuada nisl nec, blandit lorem.
-        </p>
-        <hr className="mb-2" />
-      </>
-    );
-  }
-
-  return <>{contents.map(content => content)}</>;
-};
-
 const SidePanelContainer = (args: SidePanelProps) => {
   const [showSidepanel, setShowSidepanel] = useState(false);
 
@@ -88,7 +63,7 @@ const SidePanelContainer = (args: SidePanelProps) => {
 
             <button
               type="button"
-              className="p-1 text-white border-2 rounded border-primary-400 bg-primary-400"
+              className="p-1 text-white rounded border-2 border-primary-400 bg-primary-400"
               onClick={() => setShowSidepanel(!showSidepanel)}
             >
               Open/Close sidepanel
@@ -101,7 +76,7 @@ const SidePanelContainer = (args: SidePanelProps) => {
             closeSidepanelFunction={() => setShowSidepanel(false)}
             size={args.size}
           >
-            <SidepanelContent />
+            <GeneratedContent />
           </Sidepanel>
         </div>
       </div>
diff --git a/app/react/stories/helpers/GeneratedContent.tsx b/app/react/stories/helpers/GeneratedContent.tsx
new file mode 100644
index 0000000000..854220f569
--- /dev/null
+++ b/app/react/stories/helpers/GeneratedContent.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const GeneratedContent = ({ rows }: { rows?: number }) => {
+  const maxRows = rows || 8;
+  const contents: React.ReactNode[] = [];
+
+  for (let index = 1; index < maxRows; index += 1) {
+    contents.push(
+      <>
+        <h1 className="font-bold">Item {index}</h1>
+        <p className="mb-1">
+          Fusce id mi eu mauris bibendum dignissim nec in sem. Sed ultrices varius mauris quis
+          placerat. Donec imperdiet sodales diam sed imperdiet. Aenean a nisl venenatis lectus
+          mattis pellentesque. Duis fermentum ante a ultricies feugiat. Proin dapibus luctus purus
+          id viverra. Aenean a aliquet nibh. Aenean facilisis justo quis sem auctor, nec mollis
+          tortor placerat. Cras eget enim mollis, mollis risus gravida, pharetra risus. Mauris
+          dapibus malesuada mi, quis ornare felis imperdiet eget. Donec sed quam non dolor sodales
+          hendrerit. Aenean suscipit, velit sed laoreet cursus, ante odio tristique lectus, a porta
+          eros felis eu sem. Curabitur eu gravida dolor. Ut iaculis lacus vitae libero viverra
+          interdum. Phasellus ac est consectetur, malesuada nisl nec, blandit lorem.
+        </p>
+        <hr className="mb-2" />
+      </>
+    );
+  }
+
+  return <>{contents.map(content => content)}</>;
+};
+
+export { GeneratedContent };

From 3ffafd0b10a9ae6a3aa27a42de69c50ba1e6cdfd Mon Sep 17 00:00:00 2001
From: A happy cat <acasadotorres@gmail.com>
Date: Thu, 15 Jun 2023 15:21:21 +0200
Subject: [PATCH 3/4] updated scrolling styles for modal with large content

---
 app/react/App/styles/globals.css     | 33 ++++++++++++++++++++++++++++
 app/react/V2/Components/UI/Modal.tsx |  8 +++----
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/app/react/App/styles/globals.css b/app/react/App/styles/globals.css
index cc2c698553..fe04c31a71 100644
--- a/app/react/App/styles/globals.css
+++ b/app/react/App/styles/globals.css
@@ -1437,6 +1437,10 @@ input:checked + .toggle-bg {
   height: 1px;
 }
 
+.h-\[70vh\] {
+  height: 70vh;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }
@@ -2250,6 +2254,11 @@ input:checked + .toggle-bg {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
+.bg-error-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
 .bg-error-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
@@ -2936,6 +2945,11 @@ input:checked + .toggle-bg {
   color: rgb(28 100 242 / var(--tw-text-opacity));
 }
 
+.text-error-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
 .text-error-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -3175,6 +3189,16 @@ input:checked + .toggle-bg {
   text-decoration-line: underline;
 }
 
+.placeholder-error-700::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-error-700::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-placeholder-opacity));
+}
+
 .placeholder-green-700::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(4 108 78 / var(--tw-placeholder-opacity));
@@ -3821,6 +3845,11 @@ input:checked + .toggle-bg {
   --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-purple-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(220 215 254 / var(--tw-ring-opacity));
@@ -5140,6 +5169,10 @@ input:checked + .toggle-bg {
     height: 100%;
   }
 
+  .md\:h-\[70vh\] {
+    height: 70vh;
+  }
+
   .md\:w-1\/2 {
     width: 50%;
   }
diff --git a/app/react/V2/Components/UI/Modal.tsx b/app/react/V2/Components/UI/Modal.tsx
index ce76b35a10..96adad9ccf 100644
--- a/app/react/V2/Components/UI/Modal.tsx
+++ b/app/react/V2/Components/UI/Modal.tsx
@@ -21,12 +21,12 @@ const Modal = ({ children, size }: ModalProps) => {
   return (
     <div
       aria-hidden="false"
-      className="flex overflow-x-hidden fixed inset-0 top-0 left-0 z-50 justify-center items-center bg-gray-900 bg-opacity-50"
+      className="fixed inset-0 top-0 left-0 z-50 flex items-center justify-center overflow-x-hidden bg-gray-900 bg-opacity-50"
       data-testid="modal"
       role="dialog"
       aria-label="Modal"
     >
-      <div className={`overflow-y-auto py-4 max-h-screen ${sizes[size]}`}>
+      <div className={`max-h-screen ${sizes[size]}`}>
         <div className="bg-white rounded-lg shadow">{children}</div>
       </div>
     </div>
@@ -49,13 +49,13 @@ Modal.Header = ({ children, className }: ModalChildrenProps) => (
 );
 
 Modal.Body = ({ children, className }: ModalChildrenProps) => (
-  <div className={`p-6 ${className}`} data-testid="modal-body">
+  <div className={`p-6 overflow-y-auto h-full md:h-[70vh] ${className}`} data-testid="modal-body">
     {children}
   </div>
 );
 
 Modal.Footer = ({ children }: ModalChildrenProps) => (
-  <div className="flex justify-center p-6 space-x-2 rounded-b border-t border-gray-200">
+  <div className="flex justify-center p-6 space-x-2 border-t border-gray-200 rounded-b">
     {children}
   </div>
 );

From 01f4860db210adda08d6c522f057222f31b29741 Mon Sep 17 00:00:00 2001
From: Santiago <borrajosantiago@gmail.com>
Date: Thu, 15 Jun 2023 10:51:25 -0300
Subject: [PATCH 4/4] update global.css

---
 app/react/App/styles/globals.css | 37 ++++----------------------------
 1 file changed, 4 insertions(+), 33 deletions(-)

diff --git a/app/react/App/styles/globals.css b/app/react/App/styles/globals.css
index fe04c31a71..9f4a5353c7 100644
--- a/app/react/App/styles/globals.css
+++ b/app/react/App/styles/globals.css
@@ -1437,10 +1437,6 @@ input:checked + .toggle-bg {
   height: 1px;
 }
 
-.h-\[70vh\] {
-  height: 70vh;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -2254,11 +2250,6 @@ input:checked + .toggle-bg {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
-.bg-error-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
-
 .bg-error-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
@@ -2945,11 +2936,6 @@ input:checked + .toggle-bg {
   color: rgb(28 100 242 / var(--tw-text-opacity));
 }
 
-.text-error-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-
 .text-error-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -3189,16 +3175,6 @@ input:checked + .toggle-bg {
   text-decoration-line: underline;
 }
 
-.placeholder-error-700::-moz-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-placeholder-opacity));
-}
-
-.placeholder-error-700::placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-placeholder-opacity));
-}
-
 .placeholder-green-700::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(4 108 78 / var(--tw-placeholder-opacity));
@@ -3845,11 +3821,6 @@ input:checked + .toggle-bg {
   --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-primary-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-purple-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(220 215 254 / var(--tw-ring-opacity));
@@ -5161,6 +5132,10 @@ input:checked + .toggle-bg {
     display: none;
   }
 
+  .md\:h-\[70vh\] {
+    height: 70vh;
+  }
+
   .md\:h-auto {
     height: auto;
   }
@@ -5169,10 +5144,6 @@ input:checked + .toggle-bg {
     height: 100%;
   }
 
-  .md\:h-\[70vh\] {
-    height: 70vh;
-  }
-
   .md\:w-1\/2 {
     width: 50%;
   }