A component has been created that I can not edit:
import * as React from 'react'
import styled from '#emotion/styled'
import FlexRow from '../../layouts/FlexRow'
const RowContainer = styled('div')<TableRowProps>(
({theme, padding, active, hoverActive=true}): any => ({
position: 'relative',
borderBottom: `1px solid ${theme.concrete}`,
borderLeft: active ? `4px solid ${theme.primaryDark}` : 'none',
boxShadow: active ? `inset 16px 0px 0px 0px ${theme.alabaster}, inset 0px 2px 4px -2px rgba(44, 51, 55, 0.16)` : 'none',
backgroundColor: active ? `${theme.alabaster}` : 'none',
padding: padding ?? `20px 16px 20px ${active ? '12px' : '16px'}`,
'&:hover': hoverActive ? {
borderLeft: `4px solid ${theme.schist}`,
paddingLeft: '12px',
backgroundColor: `${theme.alabaster}`,
boxShadow: `inset 16px 0px 0px 0px ${theme.alabaster}, inset 0px 2px 4px -2px rgba(44, 51, 55, 0.16)`
} : {}
})
)
type TableRowProps = {
theme?: any
padding?: string
active?: boolean,
hoverActive?: boolean
}
export const Row = (props) => <RowContainer padding={props.padding} active={props.active} hoverActive={props.hoverActive} ><FlexRow {...props} /></RowContainer>
I'm using this component with a custom Table component like this:
<Table.Row {...flexProps} className="TableRow">
I'm wanting to remove the padding from Row and have tried:
<Table.Row style={{ padding: 0 }}>...</Table.Row>
How can I access it's props and make changes to the component?
Given that the Row component forwards any padding prop to the RowContainer where it uses it for the padding style (falling back to 20px 16px 20px ${active ? '12px' : '16px'}), you can simply set padding="0" when you use it
<Table.Row padding="0">...</Table.Row>
i am creating a website for my nft collection, with a whitelist sale and a public sale. My problem, once the user is logged in with his metamask account, he should put a check if his wallet is whitelisted. If your wallet belongs to the whitelist, then it appears as a screen and you can proceed with the purchase of the NFT, if your wallet does not belong to the whitelist you will have another screen that you have to pass to buy the NFT. Can someone help me?
import React, { useEffect, useState, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { connect } from "./redux/blockchain/blockchainActions";
import { fetchData } from "./redux/data/dataActions";
import * as s from "./styles/globalStyles";
import styled from "styled-components";
const truncate = (input, len) =>
input.length > len ? `${input.substring(0, len)}...` : input;
const whitelistedAddresses = ['here the first address', 'here the second address'];
const whitelisted = "Congratulations, you are whitelisted!";
const notWhitelisted = "You are not whitelisted";
export const StyledButton = styled.button`
padding: 10px;
border-radius: 50px;
border: none;
background-color: var(--secondary);
padding: 10px;
font-weight: bold;
color: var(--secondary-text);
width: 100px;
cursor: pointer;
box-shadow: 0px 6px 0px -2px rgba(250, 250, 250, 0.3);
-webkit-box-shadow: 0px 6px 0px -2px rgba(250, 250, 250, 0.3);
-moz-box-shadow: 0px 6px 0px -2px rgba(250, 250, 250, 0.3);
:active {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
`;
export const StyledRoundButton = styled.button`
padding: 10px;
border-radius: 100%;
border: none;
background-color: var(--primary);
padding: 10px;
font-weight: bold;
font-size: 15px;
color: var(--primary-text);
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 4px 0px -2px rgba(250, 250, 250, 0.3);
-webkit-box-shadow: 0px 4px 0px -2px rgba(250, 250, 250, 0.3);
-moz-box-shadow: 0px 4px 0px -2px rgba(250, 250, 250, 0.3);
:active {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
`;
export const ResponsiveWrapper = styled.div`
display: flex;
flex: 1;
flex-direction: column;
justify-content: stretched;
align-items: stretched;
width: 100%;
#media (min-width: 767px) {
flex-direction: row;
}
`;
export const StyledLogo = styled.img`
width: 200px;
#media (min-width: 767px) {
width: 300px;
}
transition: width 0.5s;
transition: height 0.5s;
`;
export const StyledImg = styled.img`
box-shadow: 0px 5px 11px 2px rgba(0, 0, 0, 0.7);
border: 4px dashed var(--secondary);
background-color: var(--accent);
border-radius: 100%;
width: 200px;
#media (min-width: 900px) {
width: 250px;
}
#media (min-width: 1000px) {
width: 300px;
}
transition: width 0.5s;
`;
export const StyledLink = styled.a`
color: var(--secondary);
text-decoration: none;
`;
function App() {
const whitelistedAddresses = ['0x74be05EDACC9c0CcEb78BC0fCB76315069b6F411', '0x7490ED764e113F9283507E8401b011c8eF8F2Dbe'];
const dispatch = useDispatch();
const blockchain = useSelector((state) => state.blockchain);
const data = useSelector((state) => state.data);
const [claimingNft, setClaimingNft] = useState(false);
const [feedback, setFeedback] = useState(`Click buy to mint your NFT.`);
const [mintAmount, setMintAmount] = useState(1);
const [CONFIG, SET_CONFIG] = useState({
CONTRACT_ADDRESS: "",
SCAN_LINK: "",
NETWORK: {
NAME: "",
SYMBOL: "",
ID: 4,
},
NFT_NAME: "",
SYMBOL: "",
MAX_SUPPLY: 1,
WEI_FREE_MINT_COST: 0,
DISPLAY_FREE_MINT_COST: 0,
WEI_PUBLIC_COST: 0,
DISPLAY_PUBLIC_COST: 0,
GAS_LIMIT: 0,
MARKETPLACE: "",
MARKETPLACE_LINK: "",
SHOW_BACKGROUND: false,
});
const FreeMint = () => {
let freeMintCost = CONFIG.WEI_FREE_MINT_COST;
let gasLimit = CONFIG.GAS_LIMIT;
let totalFreeMintCostWei = String(freeMintCost * mintAmount);
let totalGasLimit = String(gasLimit * mintAmount);
console.log("Cost: ", totalFreeMintCostWei);
console.log("Gas limit: ", totalGasLimit);
setFeedback(`Minting your ${CONFIG.NFT_NAME}...`);
setClaimingNft(true);
blockchain.smartContract.methods
.freeMint(mintAmount)
.send({
gasLimit: String(totalGasLimit),
to: CONFIG.CONTRACT_ADDRESS,
from: blockchain.account,
value: totalFreeMintCostWei,
})
.once("error", (err) => {
console.log(err);
setFeedback("Sorry, something went wrong please try again later.");
setClaimingNft(false);
})
.then((receipt) => {
console.log(receipt);
setFeedback(
`WOW, the ${CONFIG.NFT_NAME} is yours! go visit Opensea.io to view it.`
);
setClaimingNft(false);
dispatch(fetchData(blockchain.account));
});
};
const claimNFTs = () => {
let publicCost = CONFIG.WEI_PUBLIC_COST;
let gasLimit = CONFIG.GAS_LIMIT;
let totalPublicCostWei = String(publicCost * mintAmount);
let totalGasLimit = String(gasLimit * mintAmount);
console.log("Cost: ", totalPublicCostWei);
console.log("Gas limit: ", totalGasLimit);
setFeedback(`Minting your ${CONFIG.NFT_NAME}...`);
setClaimingNft(true);
blockchain.smartContract.methods
.mint(mintAmount)
.send({
gasLimit: String(totalGasLimit),
to: CONFIG.CONTRACT_ADDRESS,
from: blockchain.account,
value: totalPublicCostWei,
})
.once("error", (err) => {
console.log(err);
setFeedback("Sorry, something went wrong please try again later.");
setClaimingNft(false);
})
.then((receipt) => {
console.log(receipt);
setFeedback(
`WOW, the ${CONFIG.NFT_NAME} is yours! go visit Opensea.io to view it.`
);
setClaimingNft(false);
dispatch(fetchData(blockchain.account));
});
};
const decrementMintAmount = () => {
let newMintAmount = mintAmount - 1;
if (newMintAmount < 1) {
newMintAmount = 1;
}
setMintAmount(newMintAmount);
};
const incrementMintAmount = () => {
let newMintAmount = mintAmount + 1;
if (newMintAmount > 10) {
newMintAmount = 10;
}
setMintAmount(newMintAmount);
};
const getData = () => {
if (blockchain.account !== "" && blockchain.smartContract !== null) {
dispatch(fetchData(blockchain.account));
}
};
const getConfig = async () => {
const configResponse = await fetch("/config/config.json", {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
const config = await configResponse.json();
SET_CONFIG(config);
};
useEffect(() => {
getConfig();
}, []);
useEffect(() => {
getData();
}, [blockchain.account]);
return (
<s.Screen>
<s.Container
flex={1}
ai={"center"}
style={{ padding: 24, backgroundColor: "var(--primary)" }}
image={CONFIG.SHOW_BACKGROUND ? "/config/images/bg.png" : null}
>
<StyledLogo alt={"logo"} src={"/config/images/logo.png"} />
<s.SpacerSmall />
<ResponsiveWrapper flex={1} style={{ padding: 24 }} test>
<s.Container flex={1} jc={"center"} ai={"center"}>
<StyledImg alt={"example"} src={"/config/images/example.gif"} />
</s.Container>
<s.SpacerLarge />
<s.Container
flex={2}
jc={"center"}
ai={"center"}
style={{
backgroundColor: "var(--accent)",
padding: 24,
borderRadius: 24,
border: "4px dashed var(--secondary)",
boxShadow: "0px 5px 11px 2px rgba(0,0,0,0.7)",
}}
>
<s.TextTitle
style={{
textAlign: "center",
fontSize: 50,
fontWeight: "bold",
color: "var(--accent-text)",
}}
>
{data.totalSupply} / {CONFIG.MAX_SUPPLY}
</s.TextTitle>
<s.TextDescription
style={{
textAlign: "center",
color: "var(--primary-text)",
}}
>
<StyledLink target={"_blank"} href={CONFIG.SCAN_LINK}>
{truncate(CONFIG.CONTRACT_ADDRESS, 50)}
</StyledLink>
</s.TextDescription>
<s.SpacerSmall />
{Number(data.totalSupply) >= CONFIG.MAX_SUPPLY ? (
<>
<s.TextTitle
style={{ textAlign: "center", color: "var(--accent-text)" }}
>
The sale has ended.
</s.TextTitle>
<s.TextDescription
style={{ textAlign: "center", color: "var(--accent-text)" }}
>
You can still find {CONFIG.NFT_NAME} on
</s.TextDescription>
<s.SpacerSmall />
<StyledLink target={"_blank"} href={CONFIG.MARKETPLACE_LINK}>
{CONFIG.MARKETPLACE}
</StyledLink>
</>
) : (
<>
<s.TextTitle
style={{ textAlign: "center", color: "var(--accent-text)" }}
>
1 {CONFIG.SYMBOL} costs {CONFIG.DISPLAY_COST}{" "}
{CONFIG.NETWORK.SYMBOL}.
</s.TextTitle>
<s.SpacerXSmall />
<s.TextDescription
style={{ textAlign: "center", color: "var(--accent-text)" }}
>
Excluding gas fees.
{feedback}
</s.TextDescription>
<s.SpacerSmall />
{blockchain.account === "" ||
blockchain.smartContract === null ? (
<s.Container ai={"center"} jc={"center"}>
<s.TextDescription
style={{
textAlign: "center",
color: "var(--accent-text)",
}}
>
Connect to the {CONFIG.NETWORK.NAME} network
</s.TextDescription>
<s.SpacerSmall />
<StyledButton
onClick={(e) => {
e.preventDefault();
dispatch(connect());
getData();
}}
>
CONNECT
</StyledButton>
{blockchain.errorMsg !== "" ? (
<>
<s.SpacerSmall />
<s.TextDescription
style={{
textAlign: "center",
color: "var(--accent-text)",
}}
>
{blockchain.errorMsg}
</s.TextDescription>
</>
) : null}
</s.Container>
) : (
<>
<s.TextDescription
style={{
textAlign: "center",
color: "var(--accent-text)",
}}
>
</s.TextDescription>
<s.SpacerMedium />
<s.Container ai={"center"} jc={"center"} fd={"row"}>
<StyledRoundButton
style={{ lineHeight: 0.4 }}
disabled={claimingNft ? 1 : 0}
onClick={(e) => {
e.preventDefault();
decrementMintAmount();
}}
>
-
</StyledRoundButton>
<s.SpacerMedium />
<s.TextDescription
style={{
textAlign: "center",
color: "var(--accent-text)",
}}
>
{mintAmount}
</s.TextDescription>
<s.SpacerMedium />
<StyledRoundButton
disabled={claimingNft ? 1 : 0}
onClick={(e) => {
e.preventDefault();
incrementMintAmount();
}}
>
+
</StyledRoundButton>
</s.Container>
<s.SpacerSmall />
<s.Container ai={"center"} jc={"center"} fd={"row"}>
<StyledButton
disabled={claimingNft ? 1 : 0}
onClick={(e) => {
e.preventDefault();
FreeMint();
getData();
}}
>
{claimingNft ? "BUSY" : "BUY"}
</StyledButton>
</s.Container>
</>
)}
</>
)}
<s.SpacerMedium />
</s.Container>
<s.SpacerLarge />
<s.Container flex={1} jc={"center"} ai={"center"}>
<StyledImg
alt={"example"}
src={"/config/images/example.gif"}
style={{ transform: "scaleX(-1)" }}
/>
</s.Container>
</ResponsiveWrapper>
<s.SpacerMedium />
<s.Container jc={"center"} ai={"center"} style={{ width: "70%" }}>
<s.TextDescription
style={{
textAlign: "center",
color: "var(--primary-text)",
}}
>
Please make sure you are connected to the right network (
{CONFIG.NETWORK.NAME} Mainnet) and the correct address. Please note:
Once you make the purchase, you cannot undo this action.
</s.TextDescription>
<s.SpacerSmall />
<s.TextDescription
style={{
textAlign: "center",
color: "var(--primary-text)",
}}
>
We have set the gas limit to {CONFIG.GAS_LIMIT} for the contract to
successfully mint your NFT. We recommend that you don't lower the
gas limit.
</s.TextDescription>
</s.Container>
</s.Container>
</s.Screen>
);
}
export default App;
I never used a <Fab /> before but I'm confused on how to add a hover option that changes the buttons color. So far i have this:
js:
<Fab variant="extended" className="sidebar__tweet" fullWidth>
<TwitterIcon className= 'sidebar__twitterIcon2' sx={{ mr: 1 }} />
Tweet
</Fab>
css:
sidebar__tweet:
.sidebar__tweet {
background-color: var(--twitter-color) !important;
border: none !important;
color: #444444 !important;
font-weight: 900 !important;
text-transform: inherit !important;
border-radius: 30px !important;
height: 50px !important;
margin-top: 20px !important;
}
sidebar__TweetIcon2:
.sidebar__twitterIcon2 {
color: #444444;
}
if i add a new css function that changes the hover color it errases the other styleings of the button and goes back to default
<Fab /> comes with hover color based on the color prop.
If you want to override the color, you can use the sx prop.
<Fab
color="primary"
aria-label="add"
sx={{
border: '3px solid orange',
":hover": {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
}
}}
>
<TwitterIcon sx={{ mr: 1 }} />
</Fab>
https://codesandbox.io/s/fab-custom-hover-effect-gqhrt?file=/demo.js
i'm currently i'm working in a project that is required to have a "Inset Fab" button between containers. I saw in the Material Design documentation that the name of the component is called "Inset FAB", i'd got some tutorials on google (but didn't find many) on how to implement, but normally they are "workaround" (setting a background border with radius behind the button). I'm still puzzled in how to do it.
Currently i'm using the MUI/Material UI 5.
Example of inset Fab
from what I understand inset is done through box shadows.
specifically
boxShadow: "0px 0px 0px 5px white inset"
here is a code sandbox I threw together
import React from "react";
import ReactDOM from "react-dom";
import { Box, Fab } from "#material-ui/core";
const appBarStyle = {
height: "100px",
backgroundColor: "blue",
position: "relative"
};
const fabWithInset = {
position: "absolute",
backgroundColor: "red",
boxShadow: "0px 0px 0px 0px white inset",
left: "50%",
bottom: "0px",
transform: "translate(0%,50%)",
"&:onclick": {
boxShadow: "0px 0px 0px 5px white inset"
}
};
function App() {
return (
<Box style={appBarStyle}>
<Fab style={fabWithInset} />
</Box>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
After deploying in firebase, My react app goes slightly misaligned in margins,padding and opacity of icons go 1% sometimes. I'm new to React and deploying works. Also I could see the changes only after some hours after the firebase deploy.
my JSX
<Col lg={5}>
<div style={{color: screen === 'Kitchen' ? '#42D7C2' : '#000', borderLeft :
screen === 'Kitchen' ? '4px solid #42D7C2' : 'none'}} name='kitchenDefault' onClick={() => setScreen('Kitchen')} id='kitchenDefault' tabIndex='-1' className="selectionUserMg">Kitchen</div>
<div onClick={() => setScreen('Menu')} tabIndex='-1' className="selectionUserMg">Menu</div>
<div onClick={() => setScreen('Chef')} tabIndex='-1' className="selectionUserMg">Chefs</div>
<div onClick={() => setScreen('Reviews')} tabIndex='-1' className="selectionUserMg">Reviews</div>
</Col>
my CSS
.selectionUserMg{
padding: 8%;
background-color: rgba(0, 0, 0, 0.055);
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
color : #000;
font-size: 20px;
font-weight: 400;
cursor: pointer;
padding-left: -20px;
}