From 6e1fd4c53e227d1f0732d3097aae1d5f63d41a16 Mon Sep 17 00:00:00 2001
From: mlfaa <mlfaa@hotmail.com>
Date: Fri, 17 Dec 2021 14:32:04 -0300
Subject: [PATCH] #237 - Adjusting the modal size for tablet

---
 src/components/InfoModal/style.js | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/InfoModal/style.js b/src/components/InfoModal/style.js
index cf732b66..11af288b 100644
--- a/src/components/InfoModal/style.js
+++ b/src/components/InfoModal/style.js
@@ -3,14 +3,21 @@ import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles((theme) => ({
   container: {
-    margin: '50% 16px 0px 16px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignContent: 'center',
+
+    [theme.breakpoints.only('xs')]: {
+      margin: '50% 16px 0px 16px',
+    },
 
     [theme.breakpoints.up('sm')]: {
-      margin: '50% 35px 0px 35px',
+      margin: '50% 0px 0px 0px',
     },
   },
   modal: {
-    width: '100%',
+    minWidth: '100%',
+    maxWidth: '425px',
     position: 'relative',
     fontSize: '12px',
     padding: '20px',
@@ -19,6 +26,10 @@ export const useStyles = makeStyles((theme) => ({
     borderRadius: '16px',
     display: 'flex',
     flexDirection: 'column',
+
+    [theme.breakpoints.up('sm')]: {
+      minWidth: '343px',
+    },
   },
   titleModal: {
     color: theme.palette.white.main,
@@ -26,6 +37,10 @@ export const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
     justifyContent: 'center',
     paddingBottom: '24px',
+
+    [theme.breakpoints.up('sm')]: {
+      fontSize: '25px',
+    },
   },
   descriptionModal: {
     color: theme.palette.white.main,
@@ -35,6 +50,10 @@ export const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
     justifyContent: 'center',
     paddingBottom: '24px',
+
+    [theme.breakpoints.up('sm')]: {
+      fontSize: '16px',
+    },
   },
   iconClose: {
     width: '20px',