Cleanedup some rendering

Makisuo · Jun 14, 2020 · 3698848 · 3698848
1 parent fec60bc
commit 3698848
Showing 1 changed file with 57 additions and 60 deletions.
diff --git a/src/pages/RandomChamp.js b/src/pages/RandomChamp.js
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({
 		width: 200,
 	},
 	button: {
-		width: '40%',
+		width: '100%',
 		height: '40px',
 	},
 }))
@@ -50,72 +50,69 @@ const Randomize = (props) => {
 			<Container className={classes.root}>
 				{championData && (
 					<Paper className={classes.paper}>
-						<Grid container spacing={1}>
-							<Grid item xs={5}>
+						<Box display='flex'>
+							<Box>
 								<img
 									className={classes.image}
 									src={`http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${championData.id}_0.jpg`}
 									alt='Lol'
 								/>
-							</Grid>
-							<Grid item xs={7}>
-								<Box display='flex'>
+							</Box>
+							<Grid container justify='center'>
+								<Grid item xs={12}>
 									<Box>
-										<Typography variant={'h2'}>{championData.name}</Typography>
-										<Typography variant={'h6'}>{championData.title}</Typography>
+										<Typography align='center' variant={'h2'}>
+											{championData.name}
+										</Typography>
+										<Typography align='center' variant={'h6'}>
+											{championData.title}
+										</Typography>
 									</Box>
-								</Box>
-								<Grid container>
-									<Grid item xs={12}>
-										<Box display='flex' justifyContent='flex-start' m={1} p={1}>
-											<Box
-												p={1}
-												border={1}
-												borderColor='secondary.main'
-												borderRadius={'10px'}
-												className={classes.content}
-											>
-												<List className={classes.list}>
-													<ListItemText primary='About' secondary={`${championData.blurb}`} />
-												</List>
-											</Box>
-											<Box
-												className={classes.content}
-												p={1}
-												border={1}
-												borderRadius={'10px'}
-												borderColor='secondary.main'
-											>
-												<List className={classes.list}>
-													<ListItemText primary='Role' secondary={`${championData.tags}`} />
-													<ListItemText
-														primary='Type'
-														secondary={`${championData.partype}`}
-													/>
-													<ListItemText
-														primary='Attack'
-														secondary={`${championData.info.attack}`}
-													/>
-													<ListItemText
-														primary='Defense'
-														secondary={`${championData.info.defense}`}
-													/>
-													<ListItemText
-														primary='Magic'
-														secondary={`${championData.info.magic}`}
-													/>
-													<ListItemText
-														primary='Difficulty'
-														secondary={`${championData.info.difficulty}`}
-													/>
-												</List>
-											</Box>
+								</Grid>
+								<Grid item xs={12}>
+									<Box display='flex' justifyContent='center' m={1} p={1}>
+										<Box
+											p={1}
+											border={1}
+											borderColor='secondary.main'
+											borderRadius={6}
+											className={classes.content}
+										>
+											<List className={classes.list}>
+												<ListItemText primary='About' secondary={`${championData.blurb}`} />
+											</List>
+										</Box>
+										<Box
+											className={classes.content}
+											p={1}
+											border={1}
+											borderRadius={6}
+											borderColor='secondary.main'
+										>
+											<List className={classes.list}>
+												<ListItemText primary='Role' secondary={`${championData.tags}`} />
+												<ListItemText primary='Type' secondary={`${championData.partype}`} />
+												<ListItemText
+													primary='Attack'
+													secondary={`${championData.info.attack}`}
+												/>
+												<ListItemText
+													primary='Defense'
+													secondary={`${championData.info.defense}`}
+												/>
+												<ListItemText
+													primary='Magic'
+													secondary={`${championData.info.magic}`}
+												/>
+												<ListItemText
+													primary='Difficulty'
+													secondary={`${championData.info.difficulty}`}
+												/>
+											</List>
 										</Box>
-									</Grid>
+									</Box>
 								</Grid>
-							</Grid>
-							<Grid item xs={12}>
-								<Box display='flex' justifyContent='center'>
+								<Grid item xs={6}>
 									<Button
 										className={classes.button}
 										variant='contained'
@@ -124,9 +121,9 @@ const Randomize = (props) => {
 									>
 										Get Random
 									</Button>
-								</Box>
+								</Grid>
 							</Grid>
-						</Grid>
+						</Box>
 					</Paper>
 				)}
 			</Container>