Fixed up general layout of manage page + root + styled login page.

client/src/components/header/header.component.jsx

@@ -6,21 +6,22 @@ import Icon, {
   GlobalOutlined,
   HomeFilled,
   TeamOutlined,
+  UserOutlined
 } from "@ant-design/icons";
-import { Avatar, Col, Menu, Row, Layout } from "antd";
+import { Avatar, Col, Layout, Menu, Row } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { FaCalendarAlt, FaCarCrash } from "react-icons/fa";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import UserImage from "../../assets/User.svg";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import {
   selectBodyshop,
-  selectCurrentUser,
+  selectCurrentUser
 } from "../../redux/user/user.selectors";
+import "./header.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -37,6 +38,32 @@ const mapDispatchToProps = (dispatch) => ({
   signOutStart: () => dispatch(signOutStart()),
 });
 
+const logoSpan = {
+  xs: {
+    span: 0,
+  },
+  md: {
+    span: 1,
+  },
+  lg: {
+    span: 2,
+  },
+};
+
+const menuSpan = {
+  xs: {
+    span: 24,
+  },
+  md: {
+    span: 22,
+    offset: 1,
+  },
+  lg: {
+    span: 21,
+    offset: 1,
+  },
+};
+
 function Header({
   bodyshop,
   handleMenuClick,
@@ -47,12 +74,14 @@ function Header({
   setPaymentContext,
 }) {
   const { t } = useTranslation();
+  const { Header } = Layout;
 
   return (
-    <Layout.Header>
-      <Row align='middle'>
-        <Col span={4}>
+    <Header>
+      <Row>
+        <Col {...logoSpan}>
           <img
+            className='header-shop-logo'
             alt={bodyshop ? bodyshop.shopname : "ImEX Online Logo"}
             src={
               bodyshop && bodyshop.logo_img_path
@@ -61,8 +90,12 @@ function Header({
             }
           />
         </Col>
-        <Col span={16}>
-          <Menu mode='horizontal' onClick={handleMenuClick}>
+        <Col {...menuSpan}>
+          <Menu
+            mode='horizontal'
+            theme='dark'
+            className='header-main-menu'
+            onClick={handleMenuClick}>
             <Menu.Item key='home'>
               <Link to='/manage'>
                 <HomeFilled />
@@ -114,7 +147,6 @@ function Header({
                 </Link>
               </Menu.Item>
             </Menu.SubMenu>
-
             <Menu.SubMenu
               title={
                 <span>
@@ -141,7 +173,6 @@ function Header({
                 </Link>
               </Menu.Item>
             </Menu.SubMenu>
-
             <Menu.SubMenu
               title={
                 <span>
@@ -194,7 +225,6 @@ function Header({
                 </Link>
               </Menu.Item>
             </Menu.SubMenu>
-
             <Menu.SubMenu title={t("menus.header.shop")}>
               <Menu.Item key='shop'>
                 <Link to='/manage/shop'>{t("menus.header.shop_config")}</Link>
@@ -213,21 +243,26 @@ function Header({
                 <Link to='/manage/shop/csi'>{t("menus.header.shop_csi")}</Link>
               </Menu.Item>
             </Menu.SubMenu>
-          </Menu>
-        </Col>
-        <Col span={4}>
-          <Menu>
             <Menu.SubMenu
               title={
                 <div>
-                  <Avatar
-                    size='medium'
-                    alt='Avatar'
-                    src={
-                      currentUser.photoURL ? currentUser.photoURL : UserImage
-                    }
-                    style={{ margin: "10px" }}
-                  />
+                  {currentUser.photoURL ? (
+                    <Avatar
+                      src={currentUser.photoURL}
+                      style={{
+                        margin: "10px",
+                      }}
+                    />
+                  ) : (
+                    <Avatar
+                      style={{
+                        backgroundColor: "#87d068",
+                        margin: "10px",
+                      }}
+                      icon={<UserOutlined />}
+                    />
+                  )}
+
                   {currentUser.displayName || t("general.labels.unknown")}
                 </div>
               }>
@@ -260,7 +295,7 @@ function Header({
           </Menu>
         </Col>
       </Row>
-    </Layout.Header>
+    </Header>
   );
 }