From 57d15dddccf25ec7892a0c31655538e4bc8a5ce8 Mon Sep 17 00:00:00 2001
From: AdhamHaisami <adham9633@gmail.com>
Date: Wed, 21 Apr 2021 20:44:26 +0300
Subject: [PATCH] Fix Logo Position, enable BuyProduct Btn Fix #123

---
 client/src/component/header/index.js |  6 +++---
 client/src/component/header/style.js | 19 +++++++++++++++----
 client/src/pages/Home/index.js       |  3 ++-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/client/src/component/header/index.js b/client/src/component/header/index.js
index d6eeb0d..bdb0750 100644
--- a/client/src/component/header/index.js
+++ b/client/src/component/header/index.js
@@ -93,14 +93,14 @@ const Header = () => {
                 (role === 'guest' ? (
                   <>
                     <Button
-                      className={classes.logout}
+                      className={`${classes.logout} ${classes.rightBtn}`}
                       variant="outlined"
                       onClick={() => handleMenuClick('/signin')}
                     >
                       Log In
                     </Button>
                     <Button
-                      className={classes.signup}
+                      className={`${classes.signup} ${classes.rightBtn}`}
                       variant="contained"
                       onClick={() => handleMenuClick('/signup')}
                     >
@@ -130,7 +130,7 @@ const Header = () => {
                       <AccountCircle />
                     </IconButton>
                     <Button
-                      className={classes.logout}
+                      className={classes.rightBtn}
                       variant="outlined"
                       onClick={() => logOutClick()}
                     >
diff --git a/client/src/component/header/style.js b/client/src/component/header/style.js
index 3500e17..cba76d6 100644
--- a/client/src/component/header/style.js
+++ b/client/src/component/header/style.js
@@ -2,14 +2,15 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    flexGrow: 1,
+    // flexGrow: 1,
     [theme.breakpoints.up('sm')]: {
       marginTop: '5px',
     },
+    width: '90%',
   },
   header: {
     [theme.breakpoints.up('sm')]: {
-      flexGrow: 1,
+      // flexGrow: 1,
     },
     display: 'flex',
     flexDirection: 'row',
@@ -18,6 +19,7 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
   },
   title: {
+    // flexGrow: 1,
     display: 'block',
     fontSize: '2em',
     color: '#fff',
@@ -34,6 +36,16 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   headerLeftSide: {
+    // flexGrow: 1,
+    justifyContent: 'center',
+  },
+  headerRightSide: {
+    // flexGrow: 1,
+    // justifyContent: 'flex-end',
+    justifyContent: 'space-between',
+  },
+  RightSideElements: {
+    width: 'auto',
     justifyContent: 'space-between',
   },
 
@@ -50,7 +62,6 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: '#0e1717',
   },
   signup: {
-    marginLeft: '1em',
     color: '#fff',
     '&:hover': {
       color: 'f8f8ff',
@@ -58,7 +69,7 @@ const useStyles = makeStyles((theme) => ({
       boxShadow: '#888888',
     },
   },
-  logout: {
+  rightBtn: {
     marginLeft: '1em',
   },
   logoutMobile: {
diff --git a/client/src/pages/Home/index.js b/client/src/pages/Home/index.js
index 33e0561..150a6c0 100644
--- a/client/src/pages/Home/index.js
+++ b/client/src/pages/Home/index.js
@@ -14,7 +14,7 @@ import {
   Header,
 } from '../../component';
 
-import { BLOGS, BOOK } from '../../utils/router.constant';
+import { BLOGS, BOOK, PRODUCTS } from '../../utils/router.constant';
 
 import useStyles from './style';
 
@@ -60,6 +60,7 @@ const Home = () => {
             <ButtonComponent
               variant="contained"
               className={`${classes.button} ${classes.buyNowBtn}`}
+              onClick={() => history.push(PRODUCTS)}
             >
               BuyProduct
             </ButtonComponent>