From 25e254e9f776e088eca65efb90c1542491a9c3e5 Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Wed, 11 May 2022 16:27:18 -0300 Subject: [PATCH] finished login --- pages/_document.tsx | 2 + pages/index.tsx | 89 +++++++--- .../buttons/loginButton/LoginButtonView.ts | 17 +- src/components/graph/Chart.tsx | 4 +- styles/layouts/Login/LoginView.ts | 160 ++++++------------ 5 files changed, 139 insertions(+), 133 deletions(-) diff --git a/pages/_document.tsx b/pages/_document.tsx index a05c9c1..28441e4 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -40,6 +40,8 @@ export default class MyDocument extends Document { + +
diff --git a/pages/index.tsx b/pages/index.tsx index 618b8cd..71ee5f1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,47 +1,94 @@ import React, { useState } from 'react' -import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai'; import Image from 'next/image'; import Link from 'next/link'; import { useRouter } from 'next/router' -import { LoginView} from '../styles/layouts/Login/LoginView'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import InputLabel from '@mui/material/InputLabel'; +import InputAdornment from '@mui/material/InputAdornment'; +import LoginButton from '../src/components/buttons/loginButton/LoginButton'; +import FormControl from '@mui/material/FormControl'; +import IconButton from '@mui/material/IconButton'; +import TextField from '@mui/material/TextField'; + +import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai'; + +import { LoginView, LoginContainer} from '../styles/layouts/Login/LoginView'; export default function Home() { - const [state, setstate]=useState(false); const toggleBtn = ()=> { setstate(prevState => !prevState); } + const [values, setValues] = React.useState({ + amount: '', + password: '', + weight: '', + weightRange: '', + showPassword: false, + }); + const router = useRouter() const rota = router.pathname + const handleChange = (prop) => (event) => { + setValues({ ...values, [prop]: event.target.value }); + }; + + const handleClickShowPassword = () => { + setValues({ + ...values, + showPassword: !values.showPassword, + }); + }; + + const handleMouseDownPassword = (event) => { + event.preventDefault(); + }; + return ( - -
-

Bem-Vindo

-

Estratégias Inteligentes em
Gestão de Energia

+ + +

Bem-Vindo

+

Estratégias Inteligentes em
Gestão de Energia

+ + + + Password + + + {values.showPassword ? : } + + + } + label="Password" + /> + + Esqueceu a senha ? - - - - Esqueceu a senha ? - + -
- Ou +
+ Ou
-

+55(41) 3012-5900 -
www.energiasmart.com.br

+

+55(41) 3012-5900
www.energiasmart.com.br

-
+ ) } diff --git a/src/components/buttons/loginButton/LoginButtonView.ts b/src/components/buttons/loginButton/LoginButtonView.ts index 337672b..35e9fb7 100644 --- a/src/components/buttons/loginButton/LoginButtonView.ts +++ b/src/components/buttons/loginButton/LoginButtonView.ts @@ -1,19 +1,24 @@ import styled from 'styled-components' export const LoginButtonView = styled.button` - width: 100%; - height: 95px; + width: 90%; + height:100%; + min-height: 4rem; + + border-radius: 8px; - background: linear-gradient(88.75deg, #254F7F 0.18%, #888888 99.28); + background: rgb(2,0,36); + background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(37,79,127,1) 35%, rgba(136,136,136,1) 100%); font-family: 'Nunito Sans'; - font-style: normal; font-weight: 700; - font-size: 32px; + font-size: calc(99.98% + 10px); line-height: 44px; text-align: center; - letter-spacing: 0.03em; + border: none; + cursor: pointer; color: #FFFFFF; + ` diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx index 9478286..0fbd3e4 100644 --- a/src/components/graph/Chart.tsx +++ b/src/components/graph/Chart.tsx @@ -54,12 +54,12 @@ export default function Chart({ title }: ChartInterface) { { label: '2020', data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), - backgroundColor: 'rgba(53, 162, 235, 5)', + backgroundColor: '#C2D5FB', }, { label: '2021', data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), - backgroundColor: 'rgba(0, 81, 255, 1)', + backgroundColor: '#255488', }, ], }) diff --git a/styles/layouts/Login/LoginView.ts b/styles/layouts/Login/LoginView.ts index e597daa..edc63de 100644 --- a/styles/layouts/Login/LoginView.ts +++ b/styles/layouts/Login/LoginView.ts @@ -1,38 +1,47 @@ + import styled from 'styled-components'; export const LoginView = styled.main<{auth: string}>` display: flex; - align-items: center; - justify-content: flex-end; - flex-wrap: wrap; - width: 100%; - min-height: fit-content; - height: 100vh; - background-color: #f9f9f9; - padding: 0; - overflow: hidden; - display: ${props => props.auth == '/'? null : 'none'}; + justify-content: flex-end; + align-items: center; - .container{ - display: flex; - align-items: center; + width: 100%; + height: 100vh; + + background-color: #f9f9f9; + + padding: 0; + + @media (max-width: 1196px) { flex-direction: column; - background-color: #FFFFFF; - height: 33rem; - text-align: center; - border-radius: 4px; - width: 100%; - max-width: 34rem; - margin-left: 13rem; - } - - @media screen and (max-width: 1008px) { justify-content: center; - .container { - margin: 0; - } + align-items: center; + + height: 100%; + + padding: 20px; + + } +`; + +export const LoginContainer = styled.section` + display: flex; + justify-content: center; + align-items: center; + + flex-direction: column; + + width: 40%; + margin-left: 60px; + + /* padding: 0 0 px 0; */ + + border-radius: 10px; + + background-color: #FFF; h1{ margin-bottom:5px; @@ -44,62 +53,11 @@ export const LoginView = styled.main<{auth: string}>` font-size: 21px; margin-bottom: 3rem; color: #092C4C; - } - input{ - font-size: 1rem; - width: 90%; - height: 18rem; - border-radius: 5px; - margin-bottom: 10px; - border-style: none; - border: solid #D0D0D0 1px; - padding: 9px 20px; - - } - input::placeholder { - color: #ABB3BB; - font-size: 12px; - padding: 10px; - } - input:hover - { - border: 1px solid #254F7F; - } - .IconButton{ - width: 10px; + font-weight: 300; + text-align: center; } - - .button{ - width: 90%; - height: 24rem; - background-image: linear-gradient(to right, #254F7F 10%, #888888 100%); - color: white; - font-size: 15px; - border-radius: 5px; - border: 0; - margin-top: 2.5rem; - cursor: pointer; - - - } - - - - span { - font-size: 12px; - color: #254F7F; - margin-left: 23rem; - cursor: pointer; - } - - p { - color:#8B8B8B; - font-size: 12px; - margin-top: 3px; - } - - fieldset { + .line { border-top: 0.7px solid #E1E1E1; border-bottom: none; border-left: none; @@ -109,37 +67,31 @@ export const LoginView = styled.main<{auth: string}>` width: 90%; } - fieldset legend { + .line .text { padding: 19px 56px; color: #ABB3BB; font-size: 14px; } - .input-element-wrapper{ - display:flex; - margin-top: 5px; + span{ + display: flex; + align-self: flex-end; + margin-right: 5%; + justify-content: flex-end; + cursor: pointer; + } + p{ + color: #8B8B8B; + text-align: center; + margin-top: 1px; } - .password-field{ - padding: 0.5rem 1rem; - font-size: 1rem; - + @media (max-width: 1196px) { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + margin: 0; } - .btnInput{ - color: #ABB3BB; - font-size: 20px; - background-color: transparent; - border: none; - display: flex; - position: absolute; - justify-content: center; - height: 64px; - margin-left: 26rem; - margin-top: 16rem; - cursor: pointer; - - } - - `;