responsive modal

dOrgTech · Jun 23, 2023 · a069932 · a069932
1 parent c845d65
commit a069932
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 138 deletions.
diff --git a/src/modules/common/CopyAddress.tsx b/src/modules/common/CopyAddress.tsx
@@ -16,7 +16,7 @@ export const CopyAddress: React.FC<Props> = ({ address, typographyProps }) => {
     <>
       <Grid container alignItems="center">
         <Grid item>
-          <Typography variant="subtitle1" color="textPrimary" {...typographyProps}>
+          <Typography variant="subtitle2" color="textPrimary" {...typographyProps}>
             {isMobileSmall ? toShortAddress(address) : address}
           </Typography>
         </Grid>

diff --git a/src/modules/explorer/components/ResponsiveDialog.tsx b/src/modules/explorer/components/ResponsiveDialog.tsx
@@ -8,12 +8,15 @@ const Content = styled(Grid)({
   padding: "41px 46px"
 })
 
-const TitleText = styled(Typography)({
+const TitleText = styled(Typography)(({ theme }) => ({
   color: "#ffff",
   fontWeight: 550,
   lineHeight: ".80",
-  textTransform: "capitalize"
-})
+  textTransform: "capitalize",
+  [theme.breakpoints.down("sm")]: {
+    fontSize: 18
+  }
+}))
 
 const CustomDialog = styled(Dialog)({
   "& .MuiDialog-paperWidthMd": {
@@ -57,7 +60,9 @@ export const ResponsiveDialog: React.FC<{
             <CloseButton onClose={onClose} />
           </Grid>
         </Grid>
-        <Grid item>{children}</Grid>
+        <Grid item style={{ width: "inherit" }}>
+          {children}
+        </Grid>
       </Content>
     </BottomSheet>
   ) : (