Telemetry finished

pages/telemetria.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import Banner from '../src/components/banner/Banner';
- import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
+import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
+import GradientButton from '../src/components/buttons/gradientButton/GradientButton'
+import Header from '../src/components/header/Header';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
@@ -21,14 +23,14 @@ export default function Telemetria() {
   return(
 
     <TelemetriaView>
-
+<Header name='' />
       <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
               SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
               sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
               - Distribuidora.' imgSource='/assets/graphical.png' />
 
 
-      <FormControl  size="small" sx={{  width: 240,  mt:10 , pl:4 }} style={{}}>
+      <FormControl  size="small" sx={{  width: 300,  mt:10 , pl:7 }} style={{}}>
       <p className='title'>Unidade</p>
         <Select
           value={age}
@@ -46,7 +48,7 @@ export default function Telemetria() {
 
       </FormControl>
 
-      <FormControl size="small" sx={{ width: 260, mt:10 , pl:5}} >
+      <FormControl size="small" sx={{ width: 300, mt:10 , pl:7}} >
       <p className='title'>Data Inicial</p>
         <Select
           value={age}
@@ -63,7 +65,7 @@ export default function Telemetria() {
         </Select>
       </FormControl>
 
-      <FormControl size="small" sx={{ width: 260, mt:10 , pl:5, }} >
+      <FormControl size="small" sx={{ width: 300, mt:10 , pl:7, }} >
       <p className='title'>Data Final</p>
         <Select
           value={age}
@@ -80,7 +82,7 @@ export default function Telemetria() {
         </Select>
       </FormControl>
 
-      <FormControl  size="small" sx={{ width: 270, mt:10 , pl:5}} >
+      <FormControl  size="small" sx={{ width: 280, mt:10 , pl:5}} >
       <p className='title'>Discretização</p>
         <Select
           value={age}
@@ -98,9 +100,9 @@ export default function Telemetria() {
       </FormControl>
 
         <Buttons>
-          <button className='btnGrafico'> <p className='btnTitle'>GRÁFICOS</p> <br /> GERAR GRÁFICOS COM OS DADOS SELECIONADOS</button>
+        <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange />
-          <button className='btndownload'> <p>DOWNLOADS</p> <br /> DADOS BRUTOS SELECIONADOS</button>
+        <GradientButton title='DOWNLOADS' description='Gerar gráficos com os dados selecionados' purple />
-            <button className='btnDados'> <p>DADOS</p> <br /> HORÁRIOS DO MÊS ATUAL</button>
+        <GradientButton title='DADOS' description='Gerar gráficos com os dados selecionados' green />
         </Buttons>
     </TelemetriaView>
   )

src/components/banner/BannerView.ts

@@ -18,13 +18,16 @@ export const BannerView = styled.div`
 
   .text {
     position: relative;
-    margin: 82px 0 0 20px;
+    margin:  90px 30px;
-
     font-family: 'Poppins';
+    font-size:19px;
     font-style: normal;
-
     color: white;
-
+    padding-top:45px;
     z-index: 2;
   }
+
+
+
+
 `

src/components/buttons/basicButton/BasicButtonView.ts

@@ -7,7 +7,7 @@ export const BasicButtonView = styled.button`
 
   width: 120px;
   height: 45px;
-
+  cursor: pointer;
   background: #254F7F;
   border-radius: 8px;
   border-style: none;

src/components/buttons/gradientButton/GradientButtonView.ts

@@ -6,16 +6,19 @@ export const GradientButtonView = styled.button`
   align-items: center;
 
   flex-direction: column;
+  border-radius: 2px;
 
-  width: 30%;
+  width: 25%;
-  height: 150px;
+  height: 110px;
+  margin-bottom: 25px;
 
   font-family: 'Poppins';
+  font-size: 10px;
 
   color: #FFFFFF;
 
   background: ${ props => props.color==='orange'?
-  'linear-gradient(200.86deg, #F48665 8.03%, #F48665 91.97%, #FDA23F 91.97%), #FFFFFF'
+  'linear-gradient(200.86deg, #F48665 8.03%, #F48665  91.97%), #FFFFFF'
   :
   props.color === 'purple'?
   'linear-gradient(200.69deg, #9A56FF 8.53%, #D78AFD 91.47%), #FFFFFF'

styles/layouts/Telemetria/TelemetriaView.ts

@@ -37,10 +37,11 @@ export const Buttons = styled.div`
    min-width: 10rem;
    cursor: pointer;
    margin-top: 5rem;
+   padding: 1px 60px;
    justify-content: space-around;
    flex-direction: row;
    height: 6rem;
-   /* flex-direction: column; */
+
 /*
    .btnSucess{
      font-size: 10px;
@@ -49,7 +50,7 @@ export const Buttons = styled.div`
      border: none;
    } */
 
-   .btnGrafico {
+   /* .btnGrafico {
     box-shadow:inset 0px 34px 0px -15px #F48665;
 	background-color:#F48665;
 	border:none;
@@ -110,7 +111,7 @@ p{
 .myButton:active {
 	position:relative;
   /* justify-content: space-between; */
-	top:1px;
+	/* top:1px;
 
 
 }
@@ -119,8 +120,8 @@ p{
   box-shadow:inset 100% #23BDB8;
 	background-color:#23BDB8;
 	border:none;
-  border-radius: 2px;
+  border-radius: 2px; */
-	display:inline-block;
+	/* display:inline-block;
   width: 17rem;
 	cursor:pointer;
 	color:#ffffff;
@@ -140,9 +141,9 @@ p{
 }
 .myButton:active {
 	position:relative;
-  /* justify-content: space-between; */
+ justify-content: space-between;
-	top:1px;
+ top:1px;
-}
+ }  */
 
 
 `;