fixed login button covering the cfc title and home-view hero page (#102)

* fixed login button covering the whole cfc title and home-view hero page length

* revision 1: Add login to drawer

Author: Abhishek-kumar09

src/components/Hero/HeroWithLogo.js

@@ -61,12 +61,13 @@ function Hero({
   firstComponent,
   secondComponent,
   imageUrl,
+  className,
   ...rest
 }) {
   const classes = useStyles();
 
   return (
-    <div className={clsx(classes.root)} {...rest}>
+    <div className={clsx(classes.root, className)} {...rest}>
       <Container maxWidth="lg">
         <Grid container spacing={3}>
           <Grid item xs={12} md={6}>

src/layouts/MainLayout/TopBar/Account.js

@@ -2,11 +2,8 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useDispatch } from 'react-redux';
 import PersonIcon from '@material-ui/icons/Person';
-
 import {
   Typography,
-  Dialog,
-  DialogContent,
   Button,
   Box,
   Avatar,
@@ -16,8 +13,6 @@ import {
   CircularProgress,
   makeStyles
 } from '@material-ui/core';
-import authService from 'src/services/authService';
-import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
 import { login, dismissLogin, logout } from 'src/actions/accountActions';
 
 const useStyles = makeStyles(theme => ({
@@ -28,7 +23,6 @@ const useStyles = makeStyles(theme => ({
 
 function Account() {
   const user = useSelector(state => state.account.user);
-  const loginFlag = useSelector(state => state.account.login);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const dispatch = useDispatch();
   const classes = useStyles();
@@ -39,10 +33,6 @@ function Account() {
     dispatch(dismissLogin());
   };
 
-  const handleClose = () => {
-    dispatch(dismissLogin());
-  };
-
   const handleLoginOpen = () => {
     dispatch(login());
   };
@@ -143,53 +133,6 @@ function Account() {
             )}
           </Button>
         )}
-
-        <Dialog
-          open={!user && !!loginFlag}
-          onClose={handleClose}
-          aria-labelledby="form-dialog-title"
-        >
-          <DialogContent
-            style={{
-              background: '#E2E9FF'
-            }}
-          >
-            <Box
-              display="flex"
-              flexDirection="column"
-              alignItems="center"
-              justifyContent="center"
-              mt={2}
-              mb={2}
-            >
-              <Typography
-                variant="h3"
-                style={{
-                  marginBottom: '8px'
-                }}
-              >
-                Login / Sign Up
-              </Typography>
-
-              <Typography variant="body2">Explore learning with</Typography>
-
-              <Typography
-                variant="body2"
-                style={{
-                  marginBottom: '12px'
-                }}
-              >
-                Open Source
-              </Typography>
-
-              <StyledFirebaseAuth
-                uiConfig={authService.uiConfig}
-                firebaseAuth={authService.firebase.auth()}
-              />
-            </Box>
-          </DialogContent>
-        </Dialog>
-
         <Menu
           id="menu-appbar"
           anchorEl={anchorEl}

src/layouts/MainLayout/TopBar/LoginDialog.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+
+import { Typography, Dialog, DialogContent, Box } from '@material-ui/core';
+import authService from 'src/services/authService';
+import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
+import { dismissLogin } from 'src/actions/accountActions';
+
+function LoginDialog() {
+  const user = useSelector(state => state.account.user);
+  const loginFlag = useSelector(state => state.account.login);
+  const dispatch = useDispatch();
+
+  const handleClose = () => {
+    dispatch(dismissLogin());
+  };
+
+  return (
+    <Dialog
+      open={!user && !!loginFlag}
+      onClose={handleClose}
+      aria-labelledby="form-dialog-title"
+    >
+      <DialogContent
+        style={{
+          background: '#E2E9FF'
+        }}
+      >
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          mt={2}
+          mb={2}
+        >
+          <Typography
+            variant="h3"
+            style={{
+              marginBottom: '8px'
+            }}
+          >
+            Login / Sign Up
+          </Typography>
+
+          <Typography variant="body2">Explore learning with</Typography>
+
+          <Typography
+            variant="body2"
+            style={{
+              marginBottom: '12px'
+            }}
+          >
+            Open Source
+          </Typography>
+
+          <StyledFirebaseAuth
+            uiConfig={authService.uiConfig}
+            firebaseAuth={authService.firebase.auth()}
+          />
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default LoginDialog;

src/layouts/MainLayout/TopBar/index.js

@@ -20,6 +20,8 @@ import Drawer from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import { HashLink as Link } from 'react-router-hash-link';
+import LoginDialog from './LoginDialog';
+import { useSelector } from 'react-redux';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -55,6 +57,7 @@ const useStyles = makeStyles(theme => ({
 
 function TopBar({ className, onMobileNavOpen, ...rest }) {
   const classes = useStyles();
+  const user = useSelector(state => state.account.user);
   const [state, setState] = React.useState({
     top: false,
     left: false,
@@ -93,6 +96,13 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
             </Link>
           </ListItem>
         ))}
+        {!user ? (
+          <ListItem>
+            <Account />
+          </ListItem>
+        ) : (
+          <div />
+        )}
       </List>
     </div>
   );
@@ -146,6 +156,7 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
           ))}
           <Box ml={2} flexGrow={0.05} />
           <Box ml={2}>
+            <LoginDialog />
             <Account />
           </Box>
           <Box ml={2} flexGrow={0.05} />
@@ -157,8 +168,8 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
             alignItems="center"
             style={{ position: 'absolute', right: '0px' }}
           >
-            <Account />
-
+            <LoginDialog />
+            {user ? <Account /> : <div />}
             <IconButton
               edge="end"
               className={classes.menuButton}

src/views/pages/HomeView/Hero.js

@@ -1,17 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Typography } from '@material-ui/core';
+import { makeStyles, Typography } from '@material-ui/core';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 
 import HeroWithLogo from '../../../components/Hero/HeroWithLogo';
 import ButtonComponent from 'src/components/Button/ButtonComponent';
 
+const useStyles = makeStyles(theme => ({
+  root: {},
+  hero: {
+    height: '420px',
+    [theme.breakpoints.down('md')]: {
+      height: '100%'
+    }
+  }
+}));
+
 function Hero({ className, ...rest }) {
+  const classes = useStyles();
   return (
     <div className={className} {...rest}>
       <HeroWithLogo
-        style={{ height: '420px' }}
+        className={classes.hero}
         title="Learn for Cause"
         title2="Code for Cause"
         imageUrl="/static/home/codeforcause.svg"