I want to achieve the given style.
Currently, I have
<Box display="flex" flexDirection="row" alignItems="center" width={1}>
<Box flexGrow="1">
<Typography variant="h6">
{subscription.PlanName}
<Box
px={1}
py={0.5}
color={"primary.contrastText"}
className={classes.success}
display="flex"
alignItems="center"
justifyContent="space-between"
>
{subscription.Status}
</Box>
</Typography>
<Typography variant="caption" component="div">Purchased on: <b>{moment(subscription.StartDate).format("DD-MM-YYYY")}</b></Typography>
<Typography variant="caption" component="div">Expiring on: <b>{moment(subscription.EndDate).format("DD-MM-YYYY")}</b></Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
onClick={Actions.openBillingDrawer}>
UPDATE CREDITS
</Button>
</Box>
<Box>
<Button
variant="contained"
color="primary"
onClick={Actions.openBillingDrawer}>
UPGRADE PLAN
</Button>
</Box>
Also, the UPDATE CREDITS button is different from which I am currently using. Please provide the correct button for that too.
it is not exactly your goal, but its a good place to start. You've got the right separation of boxes, right size of the green box and a iconButton:
<Box
display="flex"
flexDirection="row"
alignItems="center"
width={1}
justifyContent="space-between"
>
<Box>
<Box display="flex" alignItems="flex-end" margin="5px 0">
<Typography variant="h4" style={{ lineHeight: "0.8" }}>
Basic Plan
</Typography>
<Box
color="primary.contrastText"
bgcolor="success.main"
fontSize="8px"
padding="2px 4px"
marginLeft="6px"
>
ACTIVE
</Box>
</Box>
<Typography variant="caption" component="div" color="textSecondary">
Purchased on: <b>01-01-2020</b>
</Typography>
<Typography variant="caption" component="div" color="textSecondary">
Expiring on: <b>02-02-2020</b>
</Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
endIcon={<ArrowDropDownIcon />}
>
UPDATE CREDITS
</Button>
<Button variant="contained" color="primary">
UPGRADE PLAN
</Button>
</Box>
</Box>
Related
I am using material UI version 5.4 and I have a sign-in form and applied validations on it. Validation is appearing properly but my problem is when I placed a long texted error message the exclamation mark is coming below outlined text field of the MUI material.
Here is the screenshot:
And here is the code:
<Box
component="form"
role="form"
sx={{
"& .MuiFormHelperText-root": { color: "#d32f2f" },
"& .MuiInputLabel-formControl": { paddingTop: "5px" },
}}
>
<Box mb={2}>
<TextField
type="email"
label="Email"
variant="standard"
fullWidth
onChange={(e) => emailHandler(e)}
error={emailError}
helperText={emailError ? emailErrorMessage : ""}
/>
</Box>
<Box mb={2}>
<TextField
margin="dense"
type="password"
label="Password"
variant="standard"
fullWidth
onChange={(e) => passwordHandler(e)}
error={passwordError}
helperText={passwordError ? passwordErrorMessage : ""}
/>
</Box>
<Box>
<span style={{ color: "#d32f2f", fontSize: "12px" }}>{error}</span>
</Box>
<Typography variant="button" color="info" to="/forgot-password" component={Link}>
Forgot Password?
</Typography>
<Box mt={4} mb={1}>
<Button variant="gradient" color="newColor" fullWidth onClick={signInHandler}>
sign in
</Button>
</Box>
<Box mt={3} mb={1} textAlign="center">
<Typography variant="button" color="text">
Don't have an account?{" "}
<Typography
onClick={() => {
navigate("/sign-up", { replace: true });
}}
style={{ cursor: "pointer" }}
variant="button"
color="info"
fontWeight="medium"
textGradient
>
Sign Up
</Typography>
</Typography>
</Box>
</Box>
How can I solve this styling issue?
<Grid container spacing={2}>
<Grid item xs={12} md={4} lg={3}>
<Card>
<CardActionArea>
<CardMedia
width={1}
alt="Meal Products POS"
sx={{ maxWidth: 400 }}
component="img"
image={themesObj.pos.featuredProduct}
/>
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
Meal Products POS
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<Grid item xs={12} md={4} lg={3}>
<Card>
<CardActionArea>
<CardMedia
width={1}
alt="Barcode normal products POS"
sx={{ maxWidth: 400 }}
component="img"
image={themesObj.pos.normalProduct}
/>
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
Barcode normal products POS
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<Grid item xs={12} md={4} lg={3}>
<Card>
<CardActionArea>
<CardContent sx={{ textAlign: 'center' }}>
<NotInterestedIcon sx={{ fontSize: 200 }} />
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
Return a product
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
</Grid>
I have this grid component, and it displays the following:
It is depending on the image height, it makes the card height.
I want to make the height the same for all the cards, dynamically. but how?
I am using the newest version of MUI as of now (v5.10.3).
what to do?
I am facing an issue of adding the slide animation on the question and answer. I want on click of the radio button the slide effect comes and next question comes with Slideup animation.
<Grid item xs={12} sm={8} md={8}>
<Slide direction="up"
in={checked}
appear={true}
mountOnEnter
unmountOnExit
timeout={{ enter: 1000 , exit: checked ? 1 : 900}}
>
<Card variant="outlined" sx={{ bgcolor: "#bea"}} elevation={0}>
<CardContent>
<form onSubmit= {handleSubmit}>
<CardActions>
<Button type="submit" color="warning" variant="outlined" disabled={currentQuestion===0} className={classes.button} onClick={previousQuestion}>
Previous</Button>
</CardActions>
<FormControl component='fieldset' className={classes.formControl}
data-hidden={questions[currentQuestion].number !==
currentQuestion[questions[currentQuestion] .number]} >
<FormLabel component='legend'>
{questions[currentQuestion].question}
</FormLabel>
<FormLabel component='legend'>
{questions[currentQuestion].description}
</FormLabel>
<RadioGroup
aria-label='quiz'
name='quiz'
value={questions[currentQuestion].value}
checked={checked}
onChange={(e)=> handleRadioChange(questions[currentQuestion].number, e)}
sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}>
{options.map((option) => (
<FormControlLabel
key={option.score}
value={option.score}
control={<Radio sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}/>}
label={option.label}
/>
))}
</RadioGroup>
</FormControl>
<CardActions>
<Button type="submit" variant="contained" color="primary" className={classes.button} disabled={currentQuestion != 5} onClick={handleSubmit}>
Submit
</Button>
</CardActions>
</form>
</CardContent>
</Card>
</Slide>
This is not working smoothly. So please help. The problem is on click of previous button the value disappeared. The slide effect is not flawless.
I have a problem on aligning the texts on the second line. It needs to be aligned with the first line.
Codesandbox CLICK HERE
<Card sx={{ maxWidth: 200 }}>
<CardMedia
component="img"
height="140"
image="/static/images/cards/contemplative-reptile.jpg"
alt="green iguana"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Box>
<Typography variant="body2" color="error">
• Hello how are you doing there?
</Typography>
</Box>
<Box>
<Typography variant="body2" color="error">
• Hi how are you doing there?
</Typography>
</Box>
</CardContent>
<CardActions>
<Button size="small">Share</Button>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
Put the bullet inside another Typography component and align it horizontally:
<Stack direction="row" gap={1}>
<Typography variant="body2" color="error">
•
</Typography>
<Typography variant="body2" color="error">
Hello how are you doing there?
</Typography>
</Stack>
Before
After
Live Demo
Please try using ul html element and add some styles.
...
<CardContent>
<ul>
<li>
<Typography variant="body2" color="error">
Hello how are you doing there?
</Typography>
</li>
<li>
<Typography variant="body2" color="error">
Hi how are you doing there?
</Typography>
</li>
</ul>
</CardContent>
...
I have a dialog popup using Material UI where I cannot get rid of the whitespace above the title. I've applied a background colour to the title and content area, but this then left a white margin at the top, which I can't seem to get rid of.
Any idea on how to do this?
<Dialog
id="myDialog"
classes={{ paper: classes.dialog }}
onClose={handleCloseTagInstructions}
open={openTagInstructions}
aria-labelledby="form-dialog-title"
fullWidth={true}
>
<DialogActions>
<IconButton
className={classes.customizedButton}
onClick={handleCloseTagInstructions}
>
<CloseIcon />
</IconButton>
</DialogActions>
<DialogTitle id="helper-dialog-title" style={{ backgroundColor: '#eeeeee' }}>
<Typography variant="h5">White's Semi-Open Files at</Typography>
</DialogTitle>
<DialogContent style={{ backgroundColor: '#f5f5f5' }} dividers>
<Typography variant="h6">White's Strategy</Typography>
<Typography paragraph="true">Blah</Typography>
<Typography variant="h6">Black's Strategy</Typography>
<Typography paragraph="true">???</Typography>
<Typography variant="h6">Notes</Typography>
<Grid container spacing={3}>
<Grid item xs={6}>
<Typography paragraph="true">Blah.</Typography>
</Grid>
<Grid item xs={6}>
<Paper width="5%" id="board3"></Paper>
</Grid>
</Grid>
</DialogContent>
</Dialog>;
try changing the dialog margin
dialog { margin-top: -10px !important; }
here is an example with your code :
<Dialog
style="margin-top: -10px"
id="myDialog"
classes={{ paper: classes.dialog }}
onClose={handleCloseTagInstructions}
open={openTagInstructions}
aria-labelledby="form-dialog-title"
fullWidth={true}
>
<DialogActions>
<IconButton
className={classes.customizedButton}
onClick={handleCloseTagInstructions}
>
<CloseIcon />
</IconButton>
</DialogActions>
<DialogTitle id="helper-dialog-title" style={{ backgroundColor: '#eeeeee' }}>
<Typography variant="h5">White's Semi-Open Files at</Typography>
</DialogTitle>
<DialogContent style={{ backgroundColor: '#f5f5f5' }} dividers>
<Typography variant="h6">White's Strategy</Typography>
<Typography paragraph="true">Blah</Typography>
<Typography variant="h6">Black's Strategy</Typography>
<Typography paragraph="true">???</Typography>
<Typography variant="h6">Notes</Typography>
<Grid container spacing={3}>
<Grid item xs={6}>
<Typography paragraph="true">Blah.</Typography>
</Grid>
<Grid item xs={6}>
<Paper width="5%" id="board3"></Paper>
</Grid>
</Grid>
</DialogContent>
</Dialog>;