diff --git a/frontend/src/App.js b/frontend/src/App.js index daa7878..bf2a45d 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,12 +1,11 @@ import React from "react"; import Routes from "./routes"; import "react-toastify/dist/ReactToastify.css"; -import GlobalStyled from "./style/GlobalStyle"; + const App = () => { return ( <> - ); diff --git a/frontend/src/assets/icons/email.svg b/frontend/src/assets/icons/email.svg new file mode 100644 index 0000000..fca904f --- /dev/null +++ b/frontend/src/assets/icons/email.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/key.svg b/frontend/src/assets/icons/key.svg new file mode 100644 index 0000000..326b03e --- /dev/null +++ b/frontend/src/assets/icons/key.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/visibility.svg b/frontend/src/assets/icons/visibility.svg new file mode 100644 index 0000000..004f0c5 --- /dev/null +++ b/frontend/src/assets/icons/visibility.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/images/Logo.png b/frontend/src/assets/images/Logo.png new file mode 100644 index 0000000..16e0206 Binary files /dev/null and b/frontend/src/assets/images/Logo.png differ diff --git a/frontend/src/assets/videos/video.mp4 b/frontend/src/assets/videos/video.mp4 new file mode 100644 index 0000000..23baf11 Binary files /dev/null and b/frontend/src/assets/videos/video.mp4 differ diff --git a/frontend/src/components/Base/ContainerLogin.jsx b/frontend/src/components/Base/ContainerLogin.jsx index 5129a2f..38fb109 100644 --- a/frontend/src/components/Base/ContainerLogin.jsx +++ b/frontend/src/components/Base/ContainerLogin.jsx @@ -1,19 +1,8 @@ import React from "react"; -import styled from "styled-components"; - -const ContainerLoginStyled = styled.div` - width: 100%; - height: 100vh; - display: flex; - flex-direction: column; -`; +import ContainerLoginStyled from "./ContainerLogin.style"; const ContainerLogin = ({ children }) => { - return ( - <> - {children} - - ); + return {children}; }; export default ContainerLogin; diff --git a/frontend/src/components/Base/ContainerLogin.style.jsx b/frontend/src/components/Base/ContainerLogin.style.jsx new file mode 100644 index 0000000..63e2a06 --- /dev/null +++ b/frontend/src/components/Base/ContainerLogin.style.jsx @@ -0,0 +1,9 @@ +import styled from "styled-components"; +const ContainerLoginStyled = styled.div` + width: 100%; + height: 100vh; + display: flex; + flex-direction: row; + align-items: center; +`; +export default ContainerLoginStyled diff --git a/frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx new file mode 100644 index 0000000..c32d356 --- /dev/null +++ b/frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx @@ -0,0 +1,16 @@ +import styled from "styled-components"; +import logo from "../../../assets/images/Logo.png"; + +const AvatarBlock = styled.div` +display: flex; +justify-content: center; +background-image: url(${logo}); +background-size: contain; +background-repeat: no-repeat; +background-color: white; +border-radius: 50%; +width: 45px; +height: 45px; +`; + +export default AvatarBlock; \ No newline at end of file diff --git a/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx new file mode 100644 index 0000000..bdb0028 --- /dev/null +++ b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +import AvatarLoginStyle from "./AvatarLogin.style"; +import AvatarBlock from "./AvatarBlock.style"; +import H1Title from "./H1Title.style"; + +const AvatarLogin = () => { + return ( + + + OmniHit + + ); +}; + +export default AvatarLogin; + diff --git a/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx new file mode 100644 index 0000000..8cb97d9 --- /dev/null +++ b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx @@ -0,0 +1,10 @@ +import styled from "styled-components"; + +const AvatarLoginStyle = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; +`; + +export default AvatarLoginStyle; diff --git a/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx new file mode 100644 index 0000000..a3410d7 --- /dev/null +++ b/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx @@ -0,0 +1,8 @@ +import styled from "styled-components"; + +const H1Title = styled.h1` + font-size: 32px; + font-family: "HelveticaHeavy"; + text-transform: uppercase; +`; +export default H1Title \ No newline at end of file diff --git a/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx b/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx new file mode 100644 index 0000000..d9cfabe --- /dev/null +++ b/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Company = () => { + return ( +
Company
+ ) +} + +export default Company \ No newline at end of file diff --git a/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx new file mode 100644 index 0000000..a7ae3b7 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx @@ -0,0 +1,9 @@ +import React from "react"; +import BtnSubmitStyled from "./BtnSubmit.style"; + +const BtnSubmit = ({ submit }) => { + return Login; +}; + +export default BtnSubmit; + diff --git a/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx new file mode 100644 index 0000000..1ba7fb4 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx @@ -0,0 +1,20 @@ +import styled from "styled-components"; + +import { color } from "../../../../style/varibles"; + +const BtnSubmitStyled = styled.button` + cursor: pointer; + width: 342px; + padding: 12px; + margin-top: 16px; + background-color: ${color.complement.azulCielo}; + color: ${color.pricinpal.blanco}; + border: none; + border-radius: 6px; + font-size: 14px; + font-family: "HelveticaRoman"; + box-shadow: -1px 0px 8px 0px rgba(255,255,255,.25); +`; + +export default BtnSubmitStyled; + diff --git a/frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx new file mode 100644 index 0000000..a87f470 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx @@ -0,0 +1,19 @@ +import styled from "styled-components"; + +import { color } from "../../../../style/varibles"; + +const InputBlockStyled = styled.div` + width: 320px; + display: flex; + flex-direction: row; + background: ${color.complement.azulOscuro}; + color: ${color.complement.azulCielo}; + font-size: 11px; + margin: 8px 0; + padding: 12px; + border: none; + border-radius: 5px; + gap: 12px; +`; + +export default InputBlockStyled; \ No newline at end of file diff --git a/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx new file mode 100644 index 0000000..cb74ea7 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx @@ -0,0 +1,31 @@ +import React from "react"; + +import { ReactComponent as EmailIcon } from "../../../../assets/icons/email.svg"; +import { ReactComponent as KeyIcon } from "../../../../assets/icons/key.svg"; +import { ReactComponent as VisibilityIcon } from "../../../../assets/icons/visibility.svg"; + +import InputBlockStyled from "./InputBlock.style"; +import InputComponentStyled from "./InputComponent.style"; + +const InputComponent = ({ name, type, placeholder, icon, ...props }) => { + const [password, setPassword] = React.useState(true); + + if (name === "email") { + return ( + + + + + ); + } else { + return ( + + + + setPassword(!password)} /> + + ); + } +}; +export default InputComponent; + diff --git a/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx new file mode 100644 index 0000000..4e6c60d --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx @@ -0,0 +1,12 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +const InputComponentStyled = styled.input` + width: 100%; + background: transparent; + border: none; + color: ${color.complement.azulCielo}; +`; + +export default InputComponentStyled; + diff --git a/frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx b/frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx new file mode 100644 index 0000000..1d4f8c4 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx @@ -0,0 +1,9 @@ +import styled from "styled-components"; + +const LoginBlockStyled = styled.div` + width: 100%; + display: flex; + flex-direction: column; +`; +export default LoginBlockStyled; + diff --git a/frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx b/frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx new file mode 100644 index 0000000..1a3d0b2 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx @@ -0,0 +1,41 @@ +import React from "react"; + +import AvatarLogin from "../AvatarCompany/AvatarLogin"; +import BtnSubmit from "./Btn/BtnSubmit"; +import InputComponent from "./Inputs/InputComponent"; + +import LoginBlockStyled from "./LoginBlock.style"; +import LoginFormStyled from "./LoginForm.style"; + +const LoginForm = ({ user,password, handlSubmit, handleChangeInput }) => { + return ( + + + + + + {/*! Esqueceu a senha é relevante? */} + + + + ); +}; + +export default LoginForm; + diff --git a/frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx b/frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx new file mode 100644 index 0000000..980c06a --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx @@ -0,0 +1,8 @@ +import styled from "styled-components"; + +const LoginFormStyled = styled.form` + display: flex; + flex-direction: column; + margin-top: 16px; +`; +export default LoginFormStyled; diff --git a/frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx b/frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx new file mode 100644 index 0000000..950baad --- /dev/null +++ b/frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx @@ -0,0 +1,15 @@ +import React from "react"; + +import StyleVideo from "./VideoLogin.style"; +import bgvideo from "../../../assets/videos/video.mp4"; + +const VideoLogin = () => { + return ( + + + + ); +}; + +export default VideoLogin; + diff --git a/frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx b/frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx new file mode 100644 index 0000000..b3aac98 --- /dev/null +++ b/frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx @@ -0,0 +1,17 @@ +import styled from "styled-components"; + +const StyleVideo = styled.video` + width: 350px; + height: 100vh; + object-fit: cover; + filter: grayscale(1) brightness(.3); + margin-right: 60px; + @media screen and (max-width: 992px) { + display: none; + } +`; + + + +export default StyleVideo; + diff --git a/frontend/src/index.js b/frontend/src/index.js index b77db2b..4db0055 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -2,12 +2,14 @@ import React from "react"; import ReactDOM from "react-dom"; import CssBaseline from "@material-ui/core/CssBaseline"; +import GlobalStyled from "./style/GlobalStyle"; import App from "./App"; ReactDOM.render( - + <> + - , + , document.getElementById("root") ); diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js index 55aca92..af48738 100644 --- a/frontend/src/pages/Login/index.js +++ b/frontend/src/pages/Login/index.js @@ -1,8 +1,12 @@ import React from "react"; - +import { AuthContext } from "../../context/Auth/AuthContext"; import { i18n } from "../../translate/i18n"; import ContainerLogin from "../../components/Base/ContainerLogin"; +import VideoLogin from "../../components/LoginComponents/VideoTag/VideoLogin"; +import { Input } from "@mui/material"; +import AvatarLogin from "../../components/LoginComponents/AvatarCompany/AvatarLogin"; +import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm"; //! Can i Delete this comment above? // const Copyright = () => { @@ -39,104 +43,24 @@ import ContainerLogin from "../../components/Base/ContainerLogin"; // })); const Login = () => { - // const classes = useStyles(); + const [user, setUser] = React.useState({ email: "", password: "" }); + const [showPassword, setShowPassword] = React.useState(false); - // const [user, setUser] = useState({ email: "", password: "" }); - // const [showPassword, setShowPassword] = useState(false); + const { handleLogin } = React.useContext(AuthContext); - // const { handleLogin } = useContext(AuthContext); + const handleChangeInput = (e) => { + setUser({ ...user, [e.target.name]: e.target.value }); + }; - // const handleChangeInput = (e) => { - // setUser({ ...user, [e.target.name]: e.target.value }); - // }; - - // const handlSubmit = (e) => { - // e.preventDefault(); - // handleLogin(user); - // }; + const handlSubmit = (e) => { + e.preventDefault(); + handleLogin(user); + }; return ( - // - // - //
- - // - // - // - - // - // {i18n.t("login.title")} - // - //
- // - // - // setShowPassword((e) => !e)} - // > - // {showPassword ? : } - // - // - // ) - // }} - // /> - // - // - // - - // - // {/* {i18n.t("login.buttons.register")} */} - // - - // - // - // - //
- // {/* */} - // -

teste

-

teste

-

Teste paragraph

+ + ); }; diff --git a/frontend/src/style/GlobalStyle.jsx b/frontend/src/style/GlobalStyle.jsx index cb268e9..305a4dd 100644 --- a/frontend/src/style/GlobalStyle.jsx +++ b/frontend/src/style/GlobalStyle.jsx @@ -9,6 +9,50 @@ import HelveticaHeavy from "../assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf"; import HelveticaBlack from "../assets/fonts/Helvetica_Neue_LT_Pro-Black.otf"; const GlobalStyled = createGlobalStyle` +//RESET +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + //FONTS @font-face {