Merge pull request 0xPolygonHermez#277 from 0xPolygonHermez/improve-m…

…odals-on-mobile Improve modal styles on mobile
RealityETH · Apr 4, 2023 · 94fe84e · 94fe84e
2 parents 20112ec + ab3ee7d
commit 94fe84e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/src/views/home/components/deposit-warning-modal/deposit-warning-modal.styles.ts b/src/views/home/components/deposit-warning-modal/deposit-warning-modal.styles.ts
@@ -4,12 +4,15 @@ import { Theme } from "src/styles/theme";
 
 export const useDepositWarningModalStyles = createUseStyles((theme: Theme) => ({
   background: {
-    alignItems: "flex-start",
+    alignItems: "center",
     background: theme.palette.transparency,
     display: "flex",
     height: "100vh",
     justifyContent: "center",
     width: "100%",
+    [theme.breakpoints.upSm]: {
+      alignItems: "flex-start",
+    },
   },
   cancelButton: {
     "&:hover": {
@@ -26,10 +29,15 @@ export const useDepositWarningModalStyles = createUseStyles((theme: Theme) => ({
   card: {
     display: "flex",
     flexDirection: "column",
-    marginTop: theme.spacing(30),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     maxWidth: 510,
-    padding: theme.spacing(4),
+    padding: theme.spacing(3),
     width: "100%",
+    [theme.breakpoints.upSm]: {
+      marginTop: theme.spacing(30),
+      padding: theme.spacing(4),
+    },
   },
   exampleText: {
     userSelect: "none",

diff --git a/src/views/shared/confirmation-modal/confirmation-modal.styles.ts b/src/views/shared/confirmation-modal/confirmation-modal.styles.ts
@@ -4,12 +4,15 @@ import { Theme } from "src/styles/theme";
 
 export const useConfirmationModalStyles = createUseStyles((theme: Theme) => ({
   background: {
-    alignItems: "flex-start",
+    alignItems: "center",
     background: theme.palette.transparency,
     display: "flex",
     height: "100vh",
     justifyContent: "center",
     width: "100%",
+    [theme.breakpoints.upSm]: {
+      alignItems: "flex-start",
+    },
   },
   cancelButton: {
     "&:hover": {
@@ -26,10 +29,15 @@ export const useConfirmationModalStyles = createUseStyles((theme: Theme) => ({
   card: {
     display: "flex",
     flexDirection: "column",
-    marginTop: theme.spacing(30),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     maxWidth: 510,
-    padding: theme.spacing(4),
+    padding: theme.spacing(3),
     width: "100%",
+    [theme.breakpoints.upSm]: {
+      marginTop: theme.spacing(30),
+      padding: theme.spacing(4),
+    },
   },
   textContainer: {
     "& p": {

diff --git a/src/views/shared/network-box/network-box.styles.ts b/src/views/shared/network-box/network-box.styles.ts
@@ -29,10 +29,16 @@ export const useNetworkBoxStyles = createUseStyles((theme: Theme) => ({
     alignItems: "center",
     display: "flex",
     gap: theme.spacing(4),
+    textAlign: "center",
   },
   link: {
     color: theme.palette.primary.dark,
   },
+  list: {
+    paddingLeft: theme.spacing(2),
+    width: "100%",
+    wordBreak: "break-word",
+  },
   listItem: {
     padding: [theme.spacing(0.25), 0],
   },

diff --git a/src/views/shared/network-box/network-box.view.tsx b/src/views/shared/network-box/network-box.view.tsx
@@ -67,7 +67,7 @@ export const NetworkBox: FC = () => {
     <Card>
       <div className={classes.networkBox}>
         <Typography type="body1">{env.chains[1].name}</Typography>
-        <ul>
+        <ul className={classes.list}>
           <li className={classes.listItem}>
             <Typography type="body2">
               RPC URL: {polygonZkEVMChain.provider.connection.url}