Fix Logo Position, enable BuyProduct Btn

Fix #123
GSG-G9 · Apr 21, 2021 · 57d15dd · 57d15dd
1 parent 5baf0e9
commit 57d15dd
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -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,15 +62,14 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: '#0e1717',
   },
   signup: {
-    marginLeft: '1em',
     color: '#fff',
     '&:hover': {
       color: 'f8f8ff',
       transform: 'scale(1.1)',
       boxShadow: '#888888',
     },
   },
-  logout: {
+  rightBtn: {
     marginLeft: '1em',
   },
   logoutMobile: {

diff --git 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>