Merge pull request #567 from hermeznetwork/fix-page-header

Fix page header
hermeznetwork · Jun 30, 2021 · 4867ca9 · 4867ca9
2 parents 34de8fb + 6f423b1
commit 4867ca9
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 34 deletions.
diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -43,7 +43,7 @@ const theme = {
     upSm: '@media (min-width: 576px)'
   },
   spacing: (value) => value * 8,
-  headerHeight: 80,
+  headerHeight: 84,
   sidenavWidth: 295
 }
 

diff --git a/src/views/my-account/my-account.styles.js b/src/views/my-account/my-account.styles.js
@@ -8,7 +8,7 @@ const useMyAccountStyles = createUseStyles(theme => ({
     fontSize: theme.spacing(2.5),
     fontWeight: theme.fontWeights.medium,
     textAlign: 'center',
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(3.5),
     marginBottom: theme.spacing(2.5)
   },
   topSection: {

diff --git a/src/views/shared/page-header/page-header.styles.js b/src/views/shared/page-header/page-header.styles.js
@@ -6,17 +6,22 @@ const usePageHeaderStyles = createUseStyles(theme => ({
     position: 'absolute',
     height: theme.headerHeight,
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     zIndex: 998,
     background: 'transparent'
   },
-  headerContent: {
+  headerWrapper: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  titleWrapper: {
     width: '100%',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    position: 'relative',
-    marginTop: theme.spacing(3)
+    position: 'relative'
   },
   buttonBase: {
     position: 'absolute',
@@ -37,9 +42,6 @@ const usePageHeaderStyles = createUseStyles(theme => ({
     right: 0,
     marginRight: -(theme.spacing(2))
   },
-  titleWrapper: {
-    textAlign: 'center'
-  },
   title: {
     fontSize: theme.spacing(3),
     fontWeight: theme.fontWeights.extraBold
@@ -48,7 +50,7 @@ const usePageHeaderStyles = createUseStyles(theme => ({
     fontSize: theme.spacing(2),
     fontWeight: theme.fontWeights.medium,
     color: theme.palette.grey.dark,
-    paddingTop: theme.spacing(1.5),
+    paddingTop: theme.spacing(1.25),
     margin: 0
   }
 }))

diff --git a/src/views/shared/page-header/page-header.view.jsx b/src/views/shared/page-header/page-header.view.jsx
@@ -20,33 +20,33 @@ function PageHeader ({
   return (
     <header className={classes.root}>
       <Container disableVerticalGutters>
-        <div className={classes.headerContent}>
-          {goBackAction && (
-            <button
-              className={clsx({
-                [classes.buttonBase]: true,
-                [classes.goBackButton]: true
-              })}
-              onClick={() => onGoBack(goBackAction)}
-            >
-              <ArrowBackIcon />
-            </button>
-          )}
+        <div className={classes.headerWrapper}>
           <div className={classes.titleWrapper}>
+            {goBackAction && (
+              <button
+                className={clsx({
+                  [classes.buttonBase]: true,
+                  [classes.goBackButton]: true
+                })}
+                onClick={() => onGoBack(goBackAction)}
+              >
+                <ArrowBackIcon />
+              </button>
+            )}
             <h1 className={classes.title}>{title || ''}</h1>
-            {subtitle && <h4 className={classes.subtitle}>{subtitle}</h4>}
+            {closeAction && (
+              <button
+                className={clsx({
+                  [classes.buttonBase]: true,
+                  [classes.closeButton]: true
+                })}
+                onClick={() => onClose(closeAction)}
+              >
+                <CloseIcon />
+              </button>
+            )}
           </div>
-          {closeAction && (
-            <button
-              className={clsx({
-                [classes.buttonBase]: true,
-                [classes.closeButton]: true
-              })}
-              onClick={() => onClose(closeAction)}
-            >
-              <CloseIcon />
-            </button>
-          )}
+          {subtitle && <h4 className={classes.subtitle}>{subtitle}</h4>}
         </div>
       </Container>
     </header>