Merge branch 'feature/loginStyledComponents' into 'dev'

Adicionado Reponsividade no login

See merge request kluppsoftware/smart-energia-web!13

package.json

@@ -29,6 +29,7 @@
     "react": "18.1.0",
     "react-chartjs-2": "^4.1.0",
     "react-dom": "18.1.0",
+    "react-icons": "^4.3.1",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {

pages/index.tsx

@@ -1,10 +1,49 @@
 import React from 'react'
 import Image from 'next/image';
 
+
+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 { LoginView} from  '../styles/layouts/Login/LoginView';
 
 
 export default function Home() {
+  // interface State {
+  //   amount: string;
+  //   password: string;
+  //   weight: string;
+  //   weightRange: string;
+  //   showPassword: boolean;
+  // }
+  // const [values, setValues] = React.useState<State>({
+  //   amount: '',
+  //   password: '',
+  //   weight: '',
+  //   weightRange: '',
+  //   showPassword: false,
+  // });
+
+  // const handleChange =
+  //   (prop: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
+  //     setValues({ ...values, [prop]: event.target.value });
+  //   };
+
+  // const handleClickShowPassword = () => {
+  //   setValues({
+  //     ...values,
+  //     showPassword: !values.showPassword,
+  //   });
+  // };
+
   return (
     <LoginView>
       <Image src='/assets/marca1.svg' width={600} height={700}/>

pages/resumoOperacao.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import Sidebar from '../src/components/sidebar/Sidebar';
+
+import { TableView} from  '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
+
+
+
+export default function ResumoOperacao() {
+  return(
+
+
+    <TableView>
+      <Sidebar />
+      <h1>Resumo de Operaçoes</h1>
+      <h2>Operações detalhadas</h2>
+      <h3>Seletor Mês</h3>
+      <table className='tg' >
+        <colgroup>
+          <col style={{width: "106px"}}/>
+          <col style={{width: "16px"}}/>
+          <col style={{width: "119px"}}/>
+          <col style={{width: "334px"}}/>
+          <col style={{width: "111px"}}/>
+          <col style={{width: "146px"}}/>
+        </colgroup>
+
+        <thead>
+          <tr>
+            <th className='tg-baqh'>Unidade</th>
+            <th className='tg-baqh'>Operação</th>
+            <th className='tg-baqh'>Montante(MWh)</th>
+            <th className='tg-baqh'>Contraparte</th>
+            <th className='tg-baqh'>Preço(R$/MWh)</th>
+            <th className='tg-0lax'>Valor NF/Crédito (R$)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className='tg-womg'>Unidade-19888</td>
+            <td className='tg-womg'>comprar</td>
+            <td className='tg-womg'>122.269</td>
+            <td className='tg-womg'>COPEL COM I5</td>
+            <td className='tg-womg'>234,67</td>
+            <td className='tg-womg'>38.257,15</td>
+          </tr>
+          <tr>
+            <th className='tg-baqh'>Unidade-19888</th>
+            <th className='tg-baqh'>Comprar</th>
+            <th className='tg-baqh'>122.269</th>
+            <th className='tg-baqh'>PACTO COMERCIALIZADORA I5</th>
+            <th className='tg-baqh'>234,67</th>
+            <th className='tg-baqh'>38.257,15</th>
+          </tr>
+
+          <tr>
+            <td className='tg-womg'>Unidade-19888</td>
+            <td className='tg-womg'>Comprar</td>
+            <td className='tg-womg'>122.269</td>
+            <td className='tg-womg'>PACTO COMERCIALIZADORA I5</td>
+            <td className='tg-womg'>234,67</td>
+            <td className='tg-womg'>38.257,15</td>
+          </tr>
+
+          <tr>
+            <td className='tg-baqh'>Unidade-19888</td>
+            <td className='tg-baqh'>Comprar</td>
+            <td className='tg-baqh'>122.269</td>
+            <td className='tg-baqh'>PACTO COMERCIALIZADORA I5</td>
+            <td className='tg-baqh'>234,67</td>
+            <td className='tg-baqh'>38.257,15</td>
+          </tr>
+
+          <tr>
+            <td className='tg-womg'>Unidade-19888</td>
+            <td className='tg-womg'>Comprar</td>
+            <td className='tg-womg'>122.269</td>
+            <td className='tg-womg'>PACTO COMERCIALIZADORA I5</td>
+            <td className='tg-womg'>234,67</td>
+            <td className='tg-womg'>38.257,15</td>
+          </tr>
+
+
+        </tbody>
+
+
+        </table >
+
+    </TableView>
+
+  )
+}

pages/telemetria.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Image from 'next/image';
+import BasicButton from '../src/components/buttons/basicButton/BasicButton'
+
+import { TelemetriaView} from  '../styles/layouts/Telemetria/TelemetriaView';
+
+
+
+export default function Telemetria() {
+  return(
+    <TelemetriaView>
+
+        <section className="container">
+        <Image src='/assets/graphical.png' width={970} height={200} layout='fixed'/>
+
+
+        </section>
+        <BasicButton title='texto'/>
+
+
+
+
+
+
+    </TelemetriaView>
+
+
+
+  )
+}

styles/layouts/Login/LoginView.ts

@@ -3,24 +3,37 @@ import styled from 'styled-components';
 export const LoginView = styled.main`
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
-  margin-left: 10rem;
+  flex-wrap: wrap;
+  width: 100%;
+  min-height: fit-content;
+  height: 100vh;
+  background-color: #f9f9f9;
+
+
 
   .container{
     display: flex;
-    justify-content: center;
     align-items: center;
     flex-direction: column;
-    background-color: #F9F9F9;
+    background-color: #FFFFFF;
-    height: 34rem;
+    height: 33rem;
-    width: 49rem;
-    margin-left: 10rem;
-    margin-top:4rem;
-    color: #092C4C;
     text-align: center;
     border-radius: 4px;
+    width: 100%;
+    max-width: 30rem;
+    padding-left: 50px;
+    padding-right: 50px;
+    margin-left: 8rem;
+
 
   }
+  @media screen and (max-width: 1008px) {
+   justify-content: center;
+  .container {
+    margin: 0;
+  }
+}
   h1{
     margin-bottom:5px;
     color: #092C4C;
@@ -32,17 +45,18 @@ export const LoginView = styled.main`
     color: #092C4C;
   }
   input{
-    width: 30rem;
+
+    width: 100%;
     height: 15rem;
     border-radius: 5px;
     margin-bottom: 10px;
     border-style: none;
     border: solid #D0D0D0 1px;
-
   }
 
+
   button{
-    width: 30rem;
+    width: 100%;
     height: 18rem;
     background-image: linear-gradient(to right, #254F7F 10%, #888888 100%);
     color: white;
@@ -55,8 +69,10 @@ export const LoginView = styled.main`
     color: #ABB3BB;
     font-size: 12px;
   }
+
+
   span{
-    margin-left: 23rem;
+
     font-size: 12px;
     color: #254F7F;
 
@@ -79,7 +95,7 @@ export const LoginView = styled.main`
     border-right: none;
     display: block;
     text-align: center;
-    width: 30rem;
+    width: 100%;
 
 
   }
@@ -88,17 +104,26 @@ export const LoginView = styled.main`
       color: #ABB3BB;
       font-size: 14px;
   }
-  img{
+
-    /* background-color: black; */
+
-    display: none;
+
-  }
+
-
+
-
+/* .app {
-
+  display: grid;
-  @media (max-width: 1150px) {
+  place-items: center;
-  img{visibility:hidden }
+  min-height: 100vh;;
+}
+.password-field{
+     padding: 0.5rem 1rem;
   }
 
+  .btnClick{
+    padding: 1px;
+    font-size: 1.2rem;
+    outline: none;
+    border: none;
+  } */
 
 
 

styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components'
+
+
+export const TableView = styled.div`
+    display: flex;
+    padding: 2.5rem;
+    justify-content: center;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    height: 100%;
+.tg{
+  border-collapse:collapse;
+  border-spacing:0;
+
+
+}
+.tg td{
+  border-color:black;
+  border-style:solid;
+  border-width:1px;
+  font-family:Arial, sans-serif;
+  font-size:14px;
+  overflow:hidden;
+  padding:10px 5px;
+  word-break:normal;
+
+}
+.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
+  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
+
+.tg .tg-baqh{text-align:center;vertical-align:top}
+.tg .tg-0lax{text-align:left;vertical-align:top}
+.tg .tg-womg{background-color:#dddfe1;text-align:center;vertical-align:top}
+
+h1{
+
+    color: #000;
+    font-family: Poppins;
+    font-size: 15px;
+
+
+  }
+  h2{
+
+    color: #969BA0;
+    font-family: Poppins;
+    font-size: 11px;
+    font-weight: 400;
+    margin-top: 1px;
+
+
+  }
+
+
+    h3{
+
+    color: #254F7F;
+    font-family: Poppins;
+    font-size: 15px;
+    }
+`;

styles/layouts/Telemetria/TelemetriaView.ts

@@ -0,0 +1,42 @@
+
+import styled from 'styled-components';
+
+
+export const TelemetriaView = styled.div`
+    display: flex;
+    padding-left: 11rem;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: #000;
+    height: 100vh;
+    width: 100%;
+
+  .container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    background-image: linear-gradient(to right, #254F7F 10%, #888888 100%);
+    width: 60rem;
+
+
+  }
+
+
+  .main{
+    display: flex;
+    justify-content: flex-start;
+    width: 70%;
+
+
+
+
+
+    margin-top: 25rem;
+
+  }
+
+
+
+`;

yarn.lock

@@ -2375,6 +2375,11 @@ react-dom@18.1.0:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 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"