fix: better typography, hide slider when maxPerTx=1, added font CSS i…

…mport
artgenexyz · Aug 29, 2022 · 9377b02 · 9377b02 · vercel · Aug 29, 2022
1 parent d5f3132
commit 9377b02
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 26 deletions.
diff --git a/src/components/MintModal.js b/src/components/MintModal.js
@@ -6,7 +6,9 @@ import { isMobile } from "../utils";
 
 const DialogTitleWithClose = ({ children, onClose }) => {
     return <DialogTitle>
-        <Box sx={{ mr: 4 }}>{children}</Box>
+        <Box sx={{ textAlign: "center" }}>
+            {children}
+        </Box>
         {onClose ? (
             <IconButton
                 aria-label="close"
@@ -60,13 +62,15 @@ export const MintModal = (props, ref) => {
                     }}>
                         👀
                     </span>}
-                    <Typography sx={{mt: 3}} variant="subtitle1">{
-                        txHash
-                        ? `Minting ${quantity} NFT...`
-                        : 'Confirm the transaction in your wallet'
-                    }</Typography>
+                    <Typography
+                        sx={{ mt: 3, textAlign: "center" }}
+                        variant="h4">
+                        {txHash
+                            ? `Minting ${quantity} NFT...`
+                            : 'Confirm the transaction in your wallet'}
+                    </Typography>
                     {!txHash && <Typography sx={{
-                        mt: 1,
+                        mt: 3,
                         pl: 3,
                         pr: 3,
                         color: "#757575",
@@ -79,9 +83,9 @@ export const MintModal = (props, ref) => {
             }
             {!isLoading && <>
             <DialogTitleWithClose onClose={handleClose}>
-                {step === 1 ? "Choose how many to mint" : "Pay with"}
+                <Typography variant="h1">Mint now</Typography>
             </DialogTitleWithClose>
-            <DialogContent style={styles.mintModalContent}>
+            <DialogContent className="mintModal-content">
                 {step === 1 && <QuantityModalStep
                     setTxHash={setTxHash}
                     setQuantity={setQuantity}
@@ -104,12 +108,6 @@ export const showMintModal = (quantity) => {
 }
 
 const styles = {
-    mintModalContent: {
-        display: "flex",
-        flexWrap: "wrap",
-        flexDirection: "row",
-        overflow: "visible"
-    },
     mintOption: {
         padding: "16px",
         marginLeft: "12px",

diff --git a/src/components/QuantityModalStep.js b/src/components/QuantityModalStep.js
@@ -13,7 +13,7 @@ import { parseTxError, roundToDecimal } from '../utils';
 import { Attribution } from './Attribution';
 import { isEthereumContract } from "../contract";
 
-export const QuantityModalStep = ({ setQuantity, setStep, setIsLoading, setTxHash }) => {
+export const QuantityModalStep = ({ setQuantity, setIsLoading, setTxHash, setStep }) => {
     const [quantityValue, setQuantityValue] = useState(1)
     const [maxTokens, setMaxTokens] = useState(getDefaultMaxTokensPerMint())
     const [mintPrice, setMintPrice] = useState(undefined)
@@ -66,11 +66,11 @@ export const QuantityModalStep = ({ setQuantity, setStep, setIsLoading, setTxHas
     }
 
     return <div style={{ width: "100%" }}>
-        <Box sx={{
+        {maxTokens > 1 && <Box sx={{
             display: "flex",
             alignItems: "flex-end",
             width: "100%",
-            height: 75
+            height: 64
         }}>
             <Slider
                 sx={{ ml: 2 }}
@@ -86,15 +86,15 @@ export const QuantityModalStep = ({ setQuantity, setStep, setIsLoading, setTxHas
                 min={1}
                 max={maxTokens}
             />
-        </Box>
+        </Box>}
         <Button
             onClick={onSuccess}
-            sx={{ mt: 4, width: "100%" }}
+            sx={{ mt: maxTokens > 1 ? 3 : 2, width: "100%" }}
             variant="contained"
         >
             {mintPrice !== undefined
                 ? (mintPrice !== 0 ? `Mint for ${roundToDecimal(mintPrice * quantityValue, 4)} ETH` : "Mint for free")
-                : "Mint now"}
+                : "Mint"}
         </Button>
         {!window.DEFAULTS?.hideCounter && <Box
             sx={{

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -1,8 +1,24 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 .MuiDialog-container {
     font-family: "Inter", BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif !important;
 }
 
+.mintModal-content {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    overflow: visible;
+    min-width: 240px;
+}
+
+@media screen and (min-width: 600px) {
+    .mintModal-content {
+        min-width: 280px;
+    }
+}
+
 .web3modal-modal-lightbox {
     z-index: 10000 !important;
-}
+}
diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -65,10 +65,12 @@ export const theme = createTheme({
                     color: primaryTextColor
                 },
                 paper: {
+                    // to avoid horizontal scrolls
+                    overflowY: "unset",
                     backgroundImage: "inherit",
                     backgroundColor: backgroundColor,
                     borderRadius: dialogRadius,
-                    padding: "16px",
+                    padding: "16px 24px",
                     margin: "16px"
                 }
             }
@@ -80,6 +82,13 @@ export const theme = createTheme({
                 }
             }
         },
+        MuiDialogContent: {
+            styleOverrides: {
+                root: {
+                    overflowY: "visible"
+                }
+            }
+        },
         MuiLink: {
             styleOverrides: {
                 root: {
@@ -112,22 +121,31 @@ export const theme = createTheme({
         }
     },
     typography: {
-        fontFamily: "Inter, San Francisco, Roboto, Helvetica, sans-serif",
+        fontFamily: '"Inter", San Francisco, Roboto, Helvetica, sans-serif',
         button: {
             color: buttonTextColor,
             fontSize: "1rem !important",
             textTransform: "none",
         },
+        h1: {
+            color: primaryTextColor,
+            fontWeight: 700,
+            lineHeight: 1.4,
+            fontSize: "2rem"
+        },
         h4: {
             color: primaryTextColor,
-            fontWeight: 600
+            fontWeight: 600,
+            fontSize: "1.3rem",
+            lineHeight: 1.4
         },
         subtitle1: {
             color: primaryTextColor,
         },
         subtitle2: {
             fontWeight: 300,
-            lineHeight: 1.3
+            fontSize: "1rem",
+            lineHeight: 1.4
         }
     },
 });