feat: adapt modal to mobile layout (#55)

* feat: adapt modal to mobile layout
lojaintegrada · Sep 20, 2021 · 7acd5f5 · 7acd5f5
1 parent f337d32
commit 7acd5f5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/styleguide/package.json b/styleguide/package.json
@@ -112,7 +112,7 @@
     "react-dom": ">=17.0.1"
   },
   "dependencies": {
-    "@lojaintegrada/tailwindcss-config": "^1.0.1",
+    "@lojaintegrada/tailwindcss-config": "^1.1.0",
     "@tippyjs/react": "^4.2.5",
     "react-modal": "^3.14.3",
     "react-table": "^7.7.0",

diff --git a/styleguide/src/Components/Modal/Modal.tsx b/styleguide/src/Components/Modal/Modal.tsx
@@ -4,9 +4,9 @@ import ReactModal from 'react-modal'
 import { Icon } from '../../Icons'
 
 const sizeClasses = {
-  small: 'max-w-xl',
-  default: 'max-w-4xl',
-  large: 'max-w-6xl',
+  small: 'sm:max-w-xl',
+  default: 'sm:max-w-4xl',
+  large: 'sm:max-w-6xl',
 }
 
 const ModalComponent = ({
@@ -37,11 +37,12 @@ const ModalComponent = ({
       isOpen={modalIsOpen}
       onAfterClose={handleAfterCloseFunc}
       onRequestClose={handleRequestCloseFunc}
+      closeTimeoutMS={200}
       ariaHideApp={false}
-      overlayClassName={
-        'justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none bg-black-alpha px-3 focus:outline-none'
-      }
-      className={`relative max-h-screen p-10 pt-9 rounded-lg shadow-lg flex flex-col w-full bg-base-1 outline-none focus:outline-none border border-card-stroke break-words ${sizeClasses[size]} ${className}`}
+      overlayClassName={`justify-center items-end sm:items-center flex overflow-hidden w-screen h-screen fixed inset-0 z-50 outline-none bg-black bg-opacity-60 pt-16 sm:p-3 focus:outline-none transition ${
+        modalIsOpen ? 'opacity-100' : 'opacity-0'
+      }`}
+      className={`relative max-h-full p-8 sm:p-10 rounded-t-xl sm:rounded-xl shadow-lg flex flex-col w-full bg-base-1 outline-none focus:outline-none border border-card-stroke break-words ${sizeClasses[size]} ${className}`}
       bodyOpenClassName={'ReactModal__Body--open overflow-hidden'}
       testId={'modal-component'}
       parentSelector={() => (parentSelector ? parentSelector : document.body)}

diff --git a/styleguide/yarn.lock b/styleguide/yarn.lock
@@ -2166,10 +2166,10 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
-"@lojaintegrada/tailwindcss-config@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/@lojaintegrada/tailwindcss-config/-/tailwindcss-config-1.0.1.tgz"
-  integrity sha512-bg1OZ5CMH/rQJ1rOKNdZqIfDqd16zgoAyy8zX7lI+kd9cjb0KUgGZFJfkmFRfVqqKr4nOaHnNA71bMZrPWH+uw==
+"@lojaintegrada/tailwindcss-config@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@lojaintegrada/tailwindcss-config/-/tailwindcss-config-1.1.0.tgz#15e23bac97a90c0a68398299014516ec3a3464c1"
+  integrity sha512-09VS/A++T/KzlYBEOA9oZ0EglBhLcQ4Ch4cz4VaI/2IXyCyesM/T/ytQa/MPaVBt7glxunH+ZZWskmiPpZbo5Q==
   dependencies:
     tailwindcss "^2.2.4"
     tailwindcss-padding-safe "^1.0.5"