fix(header): appends login component to items end (#189)

Author: itofarina

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,32 +84,24 @@ const HeaderDesktop: FC<HeaderProps> = ({
           </Grid>
           <Grid
             item
-            xs={3}
-            xl={2}
+            xs={4}
             container
             justify="flex-end"
             alignContent="center"
           >
             {
               !!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>

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>
           )}