From 0790f7973ad32e3f4115fbb675d14a1f8af59f87 Mon Sep 17 00:00:00 2001
From: Alex Santos <alex.santos@klupp.tech>
Date: Tue, 10 May 2022 15:18:39 -0300
Subject: [PATCH 1/5] login

---
 pages/index.tsx | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 100e637..aafc9f7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,32 +1,50 @@
 import React, { useState, useEffect } 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 { truncateSync } from 'fs';
 
 interface HomeInterface {
   auth: any
+
 }
 
+
+
 export default function Home({ auth }: HomeInterface) {
 
+  const [state, setstate]=useState(false);
+   const toggleBtn = ()=> {
+      setstate(prevState => !prevState);
+   }
+
   const router = useRouter()
   const rota = router.pathname
 
   return (
     <LoginView auth={rota} >
-      <Image src='/assets/marca1.svg' width={600} height={700}/>
+      <Image src='/assets/marca1.svg' width={500} height={600}/>
       <section className="container">
         <h1>Bem-Vindo</h1>
-        <h2>Estratégias Inteligentes em Gestão de Energia</h2>
+        <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
         <input type="text" placeholder='Login'/>
-        <input type="text" placeholder='Senha'/>
+
+        <input className="password-field" type={state?"text":"password"} placeholder= "Senha" />
+       <button className='btnInput' onClick={toggleBtn}>
+         {state ? <AiOutlineEyeInvisible /> :
+           <AiOutlineEye />
+         }
+       </button>
+
         <span>Esqueceu a senha ?</span>
         <Link href='/dashboard' >
-          <button>ENTRAR</button>
+          <button className='button'>ENTRAR</button>
         </Link>
 
         <fieldset>
@@ -40,3 +58,5 @@ export default function Home({ auth }: HomeInterface) {
     </LoginView>
   )
 }
+
+

From b8d75d436b497e78a4dfbe48a947c79cfeae166b Mon Sep 17 00:00:00 2001
From: Alex Santos <alex.santos@klupp.tech>
Date: Tue, 10 May 2022 15:28:16 -0300
Subject: [PATCH 2/5] :sparkles: Add login

---
 styles/layouts/Login/LoginView.ts | 76 ++++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 16 deletions(-)

diff --git a/styles/layouts/Login/LoginView.ts b/styles/layouts/Login/LoginView.ts
index 90c3819..e597daa 100644
--- a/styles/layouts/Login/LoginView.ts
+++ b/styles/layouts/Login/LoginView.ts
@@ -9,6 +9,8 @@ export const LoginView = styled.main<{auth: string}>`
   min-height: fit-content;
   height: 100vh;
   background-color: #f9f9f9;
+  padding: 0;
+  overflow: hidden;
 
   display: ${props => props.auth == '/'? null : 'none'};
 
@@ -21,10 +23,8 @@ export const LoginView = styled.main<{auth: string}>`
     text-align: center;
     border-radius: 4px;
     width: 100%;
-    max-width: 30rem;
-    padding-left: 50px;
-    padding-right: 50px;
-    margin-left: 8rem;
+    max-width: 34rem;
+    margin-left: 13rem;
   }
 
   @media screen and (max-width: 1008px) {
@@ -46,41 +46,57 @@ export const LoginView = styled.main<{auth: string}>`
     color: #092C4C;
   }
   input{
-
-    width: 100%;
-    height: 15rem;
+    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;
   }
 
 
-  button{
-    width: 100%;
-    height: 18rem;
+  .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;
+
+
   }
 
-  input::placeholder {
-    color: #ABB3BB;
-    font-size: 12px;
-  }
+
 
   span {
     font-size: 12px;
     color: #254F7F;
+    margin-left: 23rem;
+    cursor: pointer;
   }
 
   p {
     color:#8B8B8B;
     font-size: 12px;
-    margin-bottom: 22px;
+    margin-top: 3px;
   }
 
   fieldset {
@@ -90,7 +106,7 @@ export const LoginView = styled.main<{auth: string}>`
     border-right: none;
     display: block;
     text-align: center;
-    width: 100%;
+    width: 90%;
   }
 
   fieldset legend {
@@ -98,4 +114,32 @@ export const LoginView = styled.main<{auth: string}>`
       color: #ABB3BB;
       font-size: 14px;
   }
+  .input-element-wrapper{
+    display:flex;
+    margin-top: 5px;
+  }
+
+  .password-field{
+      padding: 0.5rem 1rem;
+      font-size: 1rem;
+
+
+  }
+    .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;
+
+      }
+
+
+
 `;

From ca49939a66e14011c7ba69c0411729321e19025f Mon Sep 17 00:00:00 2001
From: Alex Santos <alex.santos@klupp.tech>
Date: Tue, 10 May 2022 15:29:34 -0300
Subject: [PATCH 3/5] page login

---
 pages/index.tsx | 47 +++++++++++++++++------------------------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index aafc9f7..618b8cd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,48 +1,35 @@
-import React, { useState, useEffect } from 'react'
+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 { LoginView} from  '../styles/layouts/login/LoginView';
-import { truncateSync } from 'fs';
-
-interface HomeInterface {
-  auth: any
-
-}
-
-
-
-export default function Home({ auth }: HomeInterface) {
+export default function Home() {
 
   const [state, setstate]=useState(false);
-   const toggleBtn = ()=> {
-      setstate(prevState => !prevState);
-   }
-
+  const toggleBtn = ()=> {
+    setstate(prevState => !prevState);
+  }
   const router = useRouter()
   const rota = router.pathname
 
   return (
     <LoginView auth={rota} >
       <Image src='/assets/marca1.svg' width={500} height={600}/>
-      <section className="container">
-        <h1>Bem-Vindo</h1>
-        <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
-        <input type="text" placeholder='Login'/>
+        <section className="container">
+          <h1>Bem-Vindo</h1>
+          <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
 
-        <input className="password-field" type={state?"text":"password"} placeholder= "Senha" />
-       <button className='btnInput' onClick={toggleBtn}>
-         {state ? <AiOutlineEyeInvisible /> :
-           <AiOutlineEye />
-         }
-       </button>
-
-        <span>Esqueceu a senha ?</span>
+          <input type="text" placeholder='Login'/>
+          <input className="password-field" type={state?"text":"password"} placeholder= "Senha" />
+          <button className='btnInput' onClick={toggleBtn}>
+              {state ? <AiOutlineEyeInvisible /> :
+                <AiOutlineEye />
+              }
+          </button>
+          <span>Esqueceu a senha ?</span>
         <Link href='/dashboard' >
           <button className='button'>ENTRAR</button>
         </Link>

From c9f197db7018fd28c5ec371d8853d2e857dba483 Mon Sep 17 00:00:00 2001
From: Alex Santos <alex.santos@klupp.tech>
Date: Tue, 10 May 2022 15:33:21 -0300
Subject: [PATCH 4/5] login

---
 package.json               |   6 +-
 pages/_app.tsx             |   1 +
 pages/areaTest.tsx         |  63 ++++++++++++-
 public/eye-svgrepo-com.svg |  57 ++++++++++++
 yarn.lock                  | 184 ++++++++++++++++++++++++++++++++++++-
 5 files changed, 303 insertions(+), 8 deletions(-)
 create mode 100644 public/eye-svgrepo-com.svg

diff --git a/package.json b/package.json
index 3d05cea..6dc05f4 100644
--- a/package.json
+++ b/package.json
@@ -17,15 +17,17 @@
     ]
   },
   "dependencies": {
-    "faker": "5.5.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@mui/material": "^5.6.4",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "chart.js": "^3.7.1",
     "eslint-plugin-react": "^7.29.4",
     "eslit": "^6.0.0",
+    "faker": "5.5.3",
     "next": "12.1.6",
     "react": "18.1.0",
     "react-chartjs-2": "^4.1.0",
@@ -34,8 +36,8 @@
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@types/faker": "5.5.3",
     "@types/chartjs": "^0.0.31",
+    "@types/faker": "5.5.3",
     "@types/node": "^17.0.31",
     "@types/react": "^18.0.8",
     "@types/styled-components": "^5.1.25",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 9e1b497..b49262f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,6 +9,7 @@ import { GlobalStyle } from '../styles/globals'
 import { AppView } from '../styles/app/AppView'
 import Home from '.'
 
+
 function MyApp({ Component, pageProps }: AppProps) {
   const [ auth, setAuth ] = useState(false)
 
diff --git a/pages/areaTest.tsx b/pages/areaTest.tsx
index 4b24121..623d784 100644
--- a/pages/areaTest.tsx
+++ b/pages/areaTest.tsx
@@ -1,9 +1,70 @@
 import React from 'react'
 import BasicButton from '../src/components/buttons/basicButton/BasicButton'
+import Image from 'next/image';
 import Graph from '../src/components/graph/Chart'
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import FilledInput from '@mui/material/FilledInput';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import InputAdornment from '@mui/material/InputAdornment';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import TextField from '@mui/material/TextField';
+
+
+
+
 
 export default function areaTest() {
+
+  const [values, setValues] = React.useState({
+    amount: '',
+    password: '',
+    weight: '',
+    weightRange: '',
+    showPassword: false,
+  });
+  const handleChange =
+    (prop) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      setValues({ ...values, [prop]: event.target.value });
+    };
+  const handleClickShowPassword = () => {
+    setValues({
+      ...values,
+      showPassword: !values.showPassword,
+    });
+  };
+ const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
   return (
-    <Graph title='Indicador de custo' />
+    // <Graph title='Indicador de custo' />
+    <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
+          <InputLabel htmlFor="outlined-ad
+          ornment-password">Password</InputLabel>
+          <OutlinedInput
+            id="outlined-adornment-password"
+            type={values.showPassword ? 'text' : 'password'}
+            value={values.password}
+            onChange={handleChange('password')}
+            endAdornment={
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                  edge="end"
+                >
+                  {values.showPassword ? <Image src="/eye-svgrepo-com.svg" width={50} height={10}/> : <Image src="/eye-svgrepo-com.svg" width={50} height={10} />}
+                </IconButton>
+              </InputAdornment>
+            }
+            label="Password"
+          />
+        </FormControl>
+
   )
 }
diff --git a/public/eye-svgrepo-com.svg b/public/eye-svgrepo-com.svg
new file mode 100644
index 0000000..045a9b3
--- /dev/null
+++ b/public/eye-svgrepo-com.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="442.04px" height="442.04px" viewBox="0 0 442.04 442.04" style="enable-background:new 0 0 442.04 442.04;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M221.02,341.304c-49.708,0-103.206-19.44-154.71-56.22C27.808,257.59,4.044,230.351,3.051,229.203
+			c-4.068-4.697-4.068-11.669,0-16.367c0.993-1.146,24.756-28.387,63.259-55.881c51.505-36.777,105.003-56.219,154.71-56.219
+			c49.708,0,103.207,19.441,154.71,56.219c38.502,27.494,62.266,54.734,63.259,55.881c4.068,4.697,4.068,11.669,0,16.367
+			c-0.993,1.146-24.756,28.387-63.259,55.881C324.227,321.863,270.729,341.304,221.02,341.304z M29.638,221.021
+			c9.61,9.799,27.747,27.03,51.694,44.071c32.83,23.361,83.714,51.212,139.688,51.212s106.859-27.851,139.688-51.212
+			c23.944-17.038,42.082-34.271,51.694-44.071c-9.609-9.799-27.747-27.03-51.694-44.071
+			c-32.829-23.362-83.714-51.212-139.688-51.212s-106.858,27.85-139.688,51.212C57.388,193.988,39.25,211.219,29.638,221.021z"/>
+	</g>
+	<g>
+		<path d="M221.02,298.521c-42.734,0-77.5-34.767-77.5-77.5c0-42.733,34.766-77.5,77.5-77.5c18.794,0,36.924,6.814,51.048,19.188
+			c5.193,4.549,5.715,12.446,1.166,17.639c-4.549,5.193-12.447,5.714-17.639,1.166c-9.564-8.379-21.844-12.993-34.576-12.993
+			c-28.949,0-52.5,23.552-52.5,52.5s23.551,52.5,52.5,52.5c28.95,0,52.5-23.552,52.5-52.5c0-6.903,5.597-12.5,12.5-12.5
+			s12.5,5.597,12.5,12.5C298.521,263.754,263.754,298.521,221.02,298.521z"/>
+	</g>
+	<g>
+		<path d="M221.02,246.021c-13.785,0-25-11.215-25-25s11.215-25,25-25c13.786,0,25,11.215,25,25S234.806,246.021,221.02,246.021z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/yarn.lock b/yarn.lock
index 43e7547..285b3ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -163,7 +163,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
   dependencies:
@@ -344,6 +344,77 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@material-ui/core@^4.12.4":
+  version "4.12.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
+  integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.11.5"
+    "@material-ui/system" "^4.12.2"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.3"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
+
+"@material-ui/icons@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.3.tgz#b0693709f9b161ce9ccde276a770d968484ecff1"
+  integrity sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
+"@material-ui/styles@^4.11.5":
+  version "4.11.5"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
+  integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.3"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.5.1"
+    jss-plugin-camel-case "^10.5.1"
+    jss-plugin-default-unit "^10.5.1"
+    jss-plugin-global "^10.5.1"
+    jss-plugin-nested "^10.5.1"
+    jss-plugin-props-sort "^10.5.1"
+    jss-plugin-rule-value-function "^10.5.1"
+    jss-plugin-vendor-prefixer "^10.5.1"
+    prop-types "^15.7.2"
+
+"@material-ui/system@^4.12.2":
+  version "4.12.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
+  integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.3"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
+"@material-ui/types@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
+  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@mui/base@5.0.0-alpha.79":
   version "5.0.0-alpha.79"
   resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.79.tgz#1994a6382a162b52ec93b66f3c74d193820d2365"
@@ -542,7 +613,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.4":
+"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.4":
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
   dependencies:
@@ -864,7 +935,7 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
-clsx@^1.1.1:
+clsx@^1.0.4, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
 
@@ -940,6 +1011,19 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    is-in-browser "^1.0.2"
+
+csstype@^2.5.2:
+  version "2.6.20"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
+  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
+
 csstype@^3.0.11, csstype@^3.0.2:
   version "3.0.11"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
@@ -1504,6 +1588,11 @@ husky@^7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
 
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 ignore@^5.1.8, ignore@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
@@ -1593,6 +1682,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
   dependencies:
     is-extglob "^2.1.1"
 
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
 is-negative-zero@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
@@ -1682,6 +1776,76 @@ json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
 
+jss-plugin-camel-case@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz#4921b568b38d893f39736ee8c4c5f1c64670aaf7"
+  integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.9.0"
+
+jss-plugin-default-unit@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991"
+  integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+
+jss-plugin-global@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f"
+  integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+
+jss-plugin-nested@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3"
+  integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d"
+  integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+
+jss-plugin-rule-value-function@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67"
+  integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a"
+  integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.9.0"
+
+jss@10.9.0, jss@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b"
+  integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz#e624f259143b9062c92b6413ff92a164c80d3ccb"
@@ -2011,6 +2175,11 @@ pidtree@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.5.0.tgz#ad5fbc1de78b8a5f99d6fbdd4f6e4eee21d1aca1"
 
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
 postcss-value-parser@^4.0.2:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
@@ -2066,11 +2235,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
 
-react-is@^17.0.2:
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
 
-react-transition-group@^4.4.2:
+react-transition-group@^4.4.0, react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
   dependencies:
@@ -2358,6 +2527,11 @@ through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"

From 25e254e9f776e088eca65efb90c1542491a9c3e5 Mon Sep 17 00:00:00 2001
From: Alex Santos <alex.santos@klupp.tech>
Date: Wed, 11 May 2022 16:27:18 -0300
Subject: [PATCH 5/5] 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 {
             <link rel="preconnect" href="https://fonts.googleapis.com"/>
             <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />
             <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
+            <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
+            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Lobster&family=Poppins:ital,wght@0,500;0,600;0,800;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
           </Head>
           <body>
             <Main />
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 (
     <LoginView auth={rota} >
-      <Image src='/assets/marca1.svg' width={500} height={600}/>
-        <section className="container">
-          <h1>Bem-Vindo</h1>
-          <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
+      <Image src='/assets/marca1.svg' width={500} height={500} />
+      <LoginContainer>
+        <h1>Bem-Vindo</h1>
+        <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
+
+        <TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Login" variant="outlined" />
+        <FormControl sx={{ m: 1, width: '90%' }} variant="outlined">
+          <InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
+          <OutlinedInput
+            id="outlined-adornment-password"
+            type={values.showPassword ? 'text' : 'password'}
+            value={values.password}
+            onChange={handleChange('password')}
+            endAdornment={
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                  edge="end"
+                >
+                  {values.showPassword ? <AiOutlineEye /> : <AiOutlineEyeInvisible />}
+                </IconButton>
+              </InputAdornment>
+            }
+            label="Password"
+          />
+        </FormControl>
+        <span>Esqueceu a senha ?</span>
 
-          <input type="text" placeholder='Login'/>
-          <input className="password-field" type={state?"text":"password"} placeholder= "Senha" />
-          <button className='btnInput' onClick={toggleBtn}>
-              {state ? <AiOutlineEyeInvisible /> :
-                <AiOutlineEye />
-              }
-          </button>
-          <span>Esqueceu a senha ?</span>
         <Link href='/dashboard' >
-          <button className='button'>ENTRAR</button>
+          <LoginButton title='ENTRAR' />
         </Link>
 
-        <fieldset>
-          <legend>Ou</legend>
+        <fieldset className="line">
+          <legend className="text">Ou</legend>
         </fieldset>
 
-        <p>+55(41) 3012-5900
-        <br /> www.energiasmart.com.br</p>
+        <p>+55(41) 3012-5900<br/>www.energiasmart.com.br</p>
 
-      </section>
+      </LoginContainer>
     </LoginView>
   )
 }
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;
-
-      }
-
-
 
 `;