edit style login component #64

GSG-G10 · Nov 8, 2021 · 539594c · 539594c
1 parent 7e54ab3
commit 539594c
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 34 deletions.
diff --git a/client/src/assets/Iconfacebook.png b/client/src/assets/Iconfacebook.png
diff --git a/client/src/assets/Icongoogle.png b/client/src/assets/Icongoogle.png
diff --git a/client/src/components/Navbar/index.js b/client/src/components/Navbar/index.js
@@ -24,9 +24,9 @@ function NavBar() {
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    width: 800,
+    width: 650,
     bgcolor: 'background.paper',
-    // border: '2px solid #000',
+    borderRadius: 3,
     boxShadow: 24,
     p: 4,
   };
@@ -72,11 +72,9 @@ function NavBar() {
             marginRight: '30px', alignSelf: 'center', backgroundColor: '#3781CB', color: '#FFFFFF', textTransform: 'none',
           }}
           >
-            {' '}
-            {/* <Link to="/login" className="btn-host"> */}
-            {/* <ListItemText primary="Host my House" style={{ color: '#fff' }} /> */}
-            <Button onClick={handleOpen}>Open modal</Button>
-            {/* </Link> */}
+
+            <Button onClick={handleOpen} style={{ color: '#fff', textTransform: 'none' }}>Login</Button>
+
           </Button>
           {logged ? (
             <Link to="/">

diff --git a/client/src/components/login/index.jsx b/client/src/components/login/index.jsx
@@ -1,17 +1,15 @@
 /* eslint-disable no-unused-vars */
-/* eslint-disable no-console */
 import { useState } from 'react';
 import {
   Grid, Paper, Avatar, TextField, Button, Typography,
 } from '@mui/material';
 import { useHistory, Link } from 'react-router-dom';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
 import PropTypes from 'prop-types';
 import axios from 'axios';
+import Facebook from '../../assets/Iconfacebook.png';
+import Google from '../../assets/Icongoogle.png';
 
 const Login = ({ handleClose, setLogged }) => {
-  // console.log(handleClose);
   const history = useHistory();
   const [data, setData] = useState({ email: '', password: '' });
   const [error, setError] = useState({ email: false, password: false });
@@ -21,21 +19,42 @@ const Login = ({ handleClose, setLogged }) => {
   const { email, password } = data;
 
   const marginBtm = { marginBottom: 10 };
-  const avatarStyle = { backgroundColor: '#1bbd7e' };
   const btnstyle = {
     margin: '8px 0',
     backgroundColor: '#CBA41B',
   };
-  const btnTopstyle = {
+  const loginWithSocialMedia = {
     margin: '8px ',
     backgroundColor: '#2E72DB',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    textTransform: 'none',
   };
-  const box = {
-    border: '1px solid red',
+  const loginWithEmail = {
     width: '50%',
     display: 'flex',
     flexDirection: 'column',
 
+  };
+  const Container = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    boxShadow: 'none',
+
+  };
+  const containerBtn = {
+    width: '90%',
+    display: 'flex',
+    alignItems: 'center',
+
+  };
+  const avatar = {
+    borderRadius: 0,
+    width: '30px',
+    height: '30px',
+
   };
 
   const handleError = (callback) => {
@@ -57,7 +76,6 @@ const Login = ({ handleClose, setLogged }) => {
   };
 
   const handleSubmit = (e) => {
-    // console.log('yes');
     e.preventDefault();
     handleError(() => {
       axios.post('/api/v1/user/login', {
@@ -76,24 +94,28 @@ const Login = ({ handleClose, setLogged }) => {
   };
   return (
     <Grid>
-      <Paper>
+      <Paper style={Container}>
         <Grid align="center">
           <h2>Welcome Back</h2>
         </Grid>
-        <Grid display="flex" justifyContent="space-between">
-          <Button type="submit" color="primary" variant="contained" style={btnTopstyle} fullWidth>
-            Sign in with Google
-            {' '}
+        <Grid style={containerBtn} display="flex" justifyContent="space-between">
+          <Button type="submit" color="primary" variant="contained" style={loginWithSocialMedia} fullWidth>
+            <Avatar alt="Remy Sharp" style={avatar} src={Google} />
 
+            Sign in with Google
           </Button>
-          <Button type="submit" color="primary" variant="contained" style={btnTopstyle} fullWidth>
+          <Button type="submit" color="primary" variant="contained" style={loginWithSocialMedia} fullWidth>
+            <Avatar alt="Remy Sharp" style={avatar} src={Facebook} />
             Sign in with Facebook
-
           </Button>
 
         </Grid>
-        <Grid align="center" style={box}>
-
+        <Grid align="center">
+          <Typography style={{ color: '#696969' }}>
+            OR
+          </Typography>
+        </Grid>
+        <Grid style={loginWithEmail}>
           <TextField
             label="email"
             placeholder="Enter email"
@@ -111,7 +133,6 @@ const Login = ({ handleClose, setLogged }) => {
             placeholder="Enter password"
             type="password"
             name="password"
-            fullWidth
             required
             error={!!error.password}
             onChange={handleChange}
@@ -121,17 +142,15 @@ const Login = ({ handleClose, setLogged }) => {
           <Typography style={{ color: 'red' }}>
             {LoginError}
           </Typography>
-          {/* <Link to="/"> */}
           <Button type="submit" color="primary" variant="contained" style={btnstyle} onClick={handleSubmit} fullWidth>Sign in</Button>
-          {/* </Link> */}
-          <Typography>
-            <Link to="/">
-              Forgot password ?
-            </Link>
-          </Typography>
+          {/* <Typography> */}
+          <Link to="/" style={{ color: '#696969', textDecoration: 'none' }}>
+            Forgot password ?
+          </Link>
+          {/* </Typography> */}
           <Typography>
             Do you have an account ?
-            <Link to="/singup">
+            <Link to="/singup" style={{ textDecoration: 'none' }}>
               Sign Up
             </Link>
           </Typography>