From d0228af0ba380312b894d5cd3567d57828cce4fa Mon Sep 17 00:00:00 2001
From: Kichiyaki <dawidwysokinski000@gmail.com>
Date: Sun, 27 Dec 2020 18:27:54 +0100
Subject: [PATCH] change TribePage/PlayerPage/VillagePage header styles | show
 tribe name on the TribePage

---
 .../PlayerPage/common/PageLayout/PageLayout.tsx       |  4 ++--
 .../TribePage/common/PageLayout/PageLayout.tsx        | 11 ++++++-----
 .../VillagePage/components/PageLayout/PageLayout.tsx  |  1 +
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/features/ServerPage/features/PlayerPage/common/PageLayout/PageLayout.tsx b/src/features/ServerPage/features/PlayerPage/common/PageLayout/PageLayout.tsx
index 016e0d9..0a30cae 100644
--- a/src/features/ServerPage/features/PlayerPage/common/PageLayout/PageLayout.tsx
+++ b/src/features/ServerPage/features/PlayerPage/common/PageLayout/PageLayout.tsx
@@ -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`,
       },
     },
   },
diff --git a/src/features/ServerPage/features/TribePage/common/PageLayout/PageLayout.tsx b/src/features/ServerPage/features/TribePage/common/PageLayout/PageLayout.tsx
index 2acd8d7..03d51ae 100644
--- a/src/features/ServerPage/features/TribePage/common/PageLayout/PageLayout.tsx
+++ b/src/features/ServerPage/features/TribePage/common/PageLayout/PageLayout.tsx
@@ -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')]: {
diff --git a/src/features/ServerPage/features/VillagePage/components/PageLayout/PageLayout.tsx b/src/features/ServerPage/features/VillagePage/components/PageLayout/PageLayout.tsx
index 5025bbe..d7436fe 100644
--- a/src/features/ServerPage/features/VillagePage/components/PageLayout/PageLayout.tsx
+++ b/src/features/ServerPage/features/VillagePage/components/PageLayout/PageLayout.tsx
@@ -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',