From ba6c7fbd27752c4b08c581bb8b5ccefba87fdf6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alvaro=20Fari=C3=B1a?= <farinalvaro@gmail.com>
Date: Fri, 13 Nov 2020 18:25:53 -0300
Subject: [PATCH] fix(header): appends login component to items end

---
 .../organisms/Header/HeaderDesktop.tsx        | 28 ++++++++-----------
 .../organisms/Header/HeaderMobile.tsx         | 28 ++++++++++---------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/components/organisms/Header/HeaderDesktop.tsx b/src/components/organisms/Header/HeaderDesktop.tsx
index 25e9917e..59b40b56 100644
--- a/src/components/organisms/Header/HeaderDesktop.tsx
+++ b/src/components/organisms/Header/HeaderDesktop.tsx
@@ -36,6 +36,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     // this height needs to be equal to the marginTop of PageTemplate
     height: theme.spacing(globalConstants.headerHeight),
   },
+  itemsEnd: {
+    alignItems: 'center',
+  },
 }))
 
 const HeaderDesktop: FC<HeaderProps> = ({
@@ -57,8 +60,7 @@ const HeaderDesktop: FC<HeaderProps> = ({
           </Grid>
           <Grid
             item
-            xs={6}
-            xl={8}
+            xs={7}
             container
             justify="flex-start"
           >
@@ -82,8 +84,7 @@ const HeaderDesktop: FC<HeaderProps> = ({
           </Grid>
           <Grid
             item
-            xs={3}
-            xl={2}
+            xs={4}
             container
             justify="flex-end"
             alignContent="center"
@@ -91,23 +92,16 @@ const HeaderDesktop: FC<HeaderProps> = ({
             {
               !!itemsEnd?.length
               && itemsEnd.map(({ icon, ...rest }: ActionHeaderItemProps) => (
-                <ListItemIcon key={icon.key} {...rest}>
+                <ListItemIcon
+                  key={icon.key}
+                  className={classes.itemsEnd}
+                  {...rest}
+                >
                   {icon}
                 </ListItemIcon>
               ))
             }
-          </Grid>
-          <Grid
-            item
-            container
-            xs={2}
-            xl={1}
-            justify="flex-end"
-            alignContent="center"
-          >
-            <div>
-              <Login />
-            </div>
+            <Login />
           </Grid>
         </Grid>
       </Toolbar>
diff --git a/src/components/organisms/Header/HeaderMobile.tsx b/src/components/organisms/Header/HeaderMobile.tsx
index ea365dd8..87303f20 100644
--- a/src/components/organisms/Header/HeaderMobile.tsx
+++ b/src/components/organisms/Header/HeaderMobile.tsx
@@ -60,6 +60,9 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
   mobileNavLinkActive: {
     color: `${colors.primary} !important`,
   },
+  itemsEnd: {
+    alignItems: 'center',
+  },
 }))
 
 const HeaderMobile: FC<HeaderProps> = ({
@@ -111,26 +114,25 @@ const HeaderMobile: FC<HeaderProps> = ({
               </Grid>
               <Grid
                 item
-                md={6}
-                sm={5}
-                xs={4}
+                xs={8}
                 container
                 justify="flex-end"
                 alignContent="center"
               >
                 {
                   !!itemsEnd?.length
-                  && itemsEnd.map(({ icon, ...rest }: ActionHeaderItemProps) => (
-                    <ListItemIcon key={icon.key} {...rest}>
-                      {icon}
-                    </ListItemIcon>
-                  ))
+                  && itemsEnd
+                    .map(({ icon, ...rest }: ActionHeaderItemProps) => (
+                      <ListItemIcon
+                        key={icon.key}
+                        className={classes.itemsEnd}
+                        {...rest}
+                      >
+                        {icon}
+                      </ListItemIcon>
+                    ))
                 }
-              </Grid>
-              <Grid item md={2} sm={3} xs={4} container justify="flex-end" alignContent="center">
-                <div>
-                  <Login />
-                </div>
+                <Login />
               </Grid>
             </Grid>
           )}