KPC
Kevin Powell - Community•2y ago
Aditya Kirad

need a little bit of code review

hey folks this is my jsx 
<Box className={styles.container}>
  <Box sx={{display: 'grid', placeItems: 'center', height: '100vh'}}>
    <Box sx={{border: 'solid black', borderRadius: '2rem', padding: '2rem', boxShadow: '0 1rem black', background: 'white'}}>
      <Typography className={styles.rulesHeader}>RULES</Typography>
      <Box sx={{display: 'flex', flexDirection: 'column'}}>
        <Box>
          <Typography className={styles.objective} sx={{fontWeight: 600, color: '#7945FF !important'}}>OBJECTIVE</Typography>
          <Typography className={styles.objective}>Be the first player to connect 4 of the same colored discs in a row (either
                        vertically, horizontally, or diagonally).</Typography>
        </Box>
        <Box sx={{position: 'relative'}}>
          <Typography className={styles.howToPlay}>HOW TO PLAY</Typography>
          <List sx={{counterReset: 'counter'}}>
            <ListItem className={styles.rules}>Red goes first in the first game.</ListItem>
            <ListItem className={styles.rules}>Players must alternate turns, and only one disc can be dropped in each turn.</ListItem>
            <ListItem className={styles.rules}>The game ends when there is a 4-in-a-row or a stalemate.</ListItem>
            <ListItem className={styles.rules}>The starter of the previous game goes second on the next game.</ListItem>
          </List>
        </Box>
        <Button variant='contained' sx={{borderRadius: '50%'}}>&#10003;</Button>
      </Box>
    </Box>
  </Box>
</Box>
<Box className={styles.container}>
  <Box sx={{display: 'grid', placeItems: 'center', height: '100vh'}}>
    <Box sx={{border: 'solid black', borderRadius: '2rem', padding: '2rem', boxShadow: '0 1rem black', background: 'white'}}>
      <Typography className={styles.rulesHeader}>RULES</Typography>
      <Box sx={{display: 'flex', flexDirection: 'column'}}>
        <Box>
          <Typography className={styles.objective} sx={{fontWeight: 600, color: '#7945FF !important'}}>OBJECTIVE</Typography>
          <Typography className={styles.objective}>Be the first player to connect 4 of the same colored discs in a row (either
                        vertically, horizontally, or diagonally).</Typography>
        </Box>
        <Box sx={{position: 'relative'}}>
          <Typography className={styles.howToPlay}>HOW TO PLAY</Typography>
          <List sx={{counterReset: 'counter'}}>
            <ListItem className={styles.rules}>Red goes first in the first game.</ListItem>
            <ListItem className={styles.rules}>Players must alternate turns, and only one disc can be dropped in each turn.</ListItem>
            <ListItem className={styles.rules}>The game ends when there is a 4-in-a-row or a stalemate.</ListItem>
            <ListItem className={styles.rules}>The starter of the previous game goes second on the next game.</ListItem>
          </List>
        </Box>
        <Button variant='contained' sx={{borderRadius: '50%'}}>&#10003;</Button>
      </Box>
    </Box>
  </Box>
</Box>
11 Replies
Aditya Kirad
Aditya KiradOP•2y ago
and this is the corresponding css 
.container {
  height: 100%;
  width: 100vw;
  background: #7945ff;
  overflow: hidden;
}
.rulesHeader {
  font-family: Arvo, serif;
  font-weight: 800;
  font-size: 3.6rem;
  color: black;
}
.objective {
  font-family: Arvo, serif;
  font-size: 1.6rem;
  color: black;
}

.howToPlay {
  font-family: Arvo, serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #7945ff;
}

.rules {
  font-family: Arvo, serif;
  font-size: 1.6rem;
  color: black;
}

.rules::before {
  counter-increment: counter;
  content: counter(counter);
  position: absolute;
  left: 0;
}
.container {
  height: 100%;
  width: 100vw;
  background: #7945ff;
  overflow: hidden;
}
.rulesHeader {
  font-family: Arvo, serif;
  font-weight: 800;
  font-size: 3.6rem;
  color: black;
}
.objective {
  font-family: Arvo, serif;
  font-size: 1.6rem;
  color: black;
}

.howToPlay {
  font-family: Arvo, serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #7945ff;
}

.rules {
  font-family: Arvo, serif;
  font-size: 1.6rem;
  color: black;
}

.rules::before {
  counter-increment: counter;
  content: counter(counter);
  position: absolute;
  left: 0;
}
Aditya Kirad
Aditya KiradOP•2y ago
I don't know why the button at the bottom and typography at the top is taking width of container
MarkBoots
MarkBoots•2y ago
because it is a flex item (stretch by default). Put it in a wrapper or use align-self: start/center/end
Aditya Kirad
Aditya KiradOP•2y ago
okay hey @MarkBoots have you used react MUI library
MarkBoots
MarkBoots•2y ago
no I don't
Aditya Kirad
Aditya KiradOP•2y ago
ok
MarkBoots
MarkBoots•2y ago
<Button variant='contained' sx={{borderRadius: '50%'; alignSelf: 'flex-start'}}>&#10003;</Button>
<Button variant='contained' sx={{borderRadius: '50%'; alignSelf: 'flex-start'}}>&#10003;</Button>
https://mui.com/system/flexbox/
Flexbox - MUI System
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
Aditya Kirad
Aditya KiradOP•2y ago
for this I was not asking that do you know react MUI library actually I have some other issue with MUI button component here is that issue
Aditya Kirad
Aditya KiradOP•2y ago
I used its button component at two different places and they both are behaving wierdly these are jsx and css of these button 
<Button variant='contained' className={styles.mainpageButton}>Play vs CPU</Button>

<Button variant='contained' className={styles.check}>&#10003;</Button>
<Button variant='contained' className={styles.mainpageButton}>Play vs CPU</Button>

<Button variant='contained' className={styles.check}>&#10003;</Button>
.mainpageButton {
  border: solid black;
  border-radius: 2rem;
  box-shadow: 0 10px black;
  font-family: Arvo, serif;
  font-weight: 800;
  font-size: 2.4rem;
}

.mainpageButton:nth-of-type(1) {
  background: #FD6687;
  color: white;
}

.check {
  border: 0.2rem black solid;
  border-radius: 50%;
  align-self: center;
  background: #FD6687;
  box-shadow: 0 1rem black;
  font-size: 2.4rem;
}
.mainpageButton {
  border: solid black;
  border-radius: 2rem;
  box-shadow: 0 10px black;
  font-family: Arvo, serif;
  font-weight: 800;
  font-size: 2.4rem;
}

.mainpageButton:nth-of-type(1) {
  background: #FD6687;
  color: white;
}

.check {
  border: 0.2rem black solid;
  border-radius: 50%;
  align-self: center;
  background: #FD6687;
  box-shadow: 0 1rem black;
  font-size: 2.4rem;
}
why these two are having different hover effects I didn't make any hover property in the css file
Aditya Kirad
Aditya KiradOP•2y ago
@MarkBoots what happened do you have any idea why these buttons are behaving deferrently
MarkBoots
MarkBoots•2y ago
hard to tell. i dont think this is all the css. i miss the hover state
Want results from more Discord servers?
Add your server