Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: better typography, hide slider when maxPerTx=1, added font CSS i…
Browse files Browse the repository at this point in the history
…mport
theshadowagent committed Aug 29, 2022
1 parent d5f3132 commit e7ce79f
Showing 4 changed files with 32 additions and 17 deletions.
23 changes: 14 additions & 9 deletions src/components/MintModal.js
Original file line number Diff line number Diff line change
@@ -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",
12 changes: 6 additions & 6 deletions src/components/QuantityModalStep.js
Original file line number Diff line number Diff line change
@@ -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={{
2 changes: 2 additions & 0 deletions src/styles/index.css
Original file line number Diff line number Diff line change
@@ -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;
12 changes: 10 additions & 2 deletions src/styles/theme.js
Original file line number Diff line number Diff line change
@@ -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,

1 comment on commit e7ce79f

@vercel
Copy link

@vercel vercel bot commented on e7ce79f Aug 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.