change TribePage/PlayerPage/VillagePage header styles | show tribe name on the TribePage

This commit is contained in:
Dawid Wysokiński 2020-12-27 18:27:54 +01:00
parent b1121478ae
commit d0228af0ba
3 changed files with 9 additions and 7 deletions

View File

@ -132,6 +132,7 @@ function PageLayout({ children }: Props) {
const useStyles = makeStyles(theme => ({
header: {
width: '100%',
paddingTop: theme.spacing(2),
minHeight: theme.spacing(30),
backgroundPosition: 'center',
backgroundSize: 'cover',
@ -161,8 +162,7 @@ const useStyles = makeStyles(theme => ({
[theme.breakpoints.down('xs')]: {
flexDirection: 'column',
'& > *': {
marginRight: 0,
marginBottom: theme.spacing(1),
marginRight: `0 !important`,
},
},
},

View File

@ -39,6 +39,7 @@ function PageLayout({ children }: Props) {
<header className={clsx(classes.header, 'bg-' + bg)}>
<Toolbar className={classes.toolbar}>
<div style={{ width: '100%' }}>
<Typography variant="h3">{tribe.name}</Typography>
<div className={classes.tribeTagContainer}>
<Typography variant="h3">{tribe.tag}</Typography>
<div className={classes.chipContainer}>
@ -113,6 +114,7 @@ const useStyles = makeStyles(theme => ({
header: {
width: '100%',
minHeight: theme.spacing(30),
paddingTop: theme.spacing(2),
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
@ -134,16 +136,15 @@ const useStyles = makeStyles(theme => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
'& > *:not(:last-child)': {
marginRight: theme.spacing(2),
},
[theme.breakpoints.down('xs')]: {
flexDirection: 'column',
'& > *': {
marginRight: 0,
marginBottom: theme.spacing(1),
marginRight: `0 !important`,
},
},
'& > *:not(:last-child)': {
marginRight: theme.spacing(2),
},
},
toolbar: {
[theme.breakpoints.down('xs')]: {

View File

@ -49,6 +49,7 @@ const useStyles = makeStyles(theme => ({
header: {
width: '100%',
minHeight: theme.spacing(30),
paddingTop: theme.spacing(2),
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',