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

Author: theshadowagent

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,7 +83,7 @@ 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}>
                 {step === 1 && <QuantityModalStep
@@ -108,7 +112,8 @@ const styles = {
         display: "flex",
         flexWrap: "wrap",
         flexDirection: "row",
-        overflow: "visible"
+        overflow: "visible",
+        minWidth: "300px"
     },
     mintOption: {
         padding: "16px",

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 ? 4 : 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={{

src/styles/index.css

@@ -1,3 +1,5 @@
+@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;

src/styles/theme.js

@@ -112,15 +112,23 @@ 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,