Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

input styling, missing to finalize the buttons

Browse Source
This commit is contained in:
Alex Santos 2022-05-10 16:36:14 -03:00
parent ff53d07abf
commit efb7075426
2 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
pages/telemetria.tsx
View File

@ -1,13 +1,7 @@
import React from 'react';
import Banner from '../src/components/banner/Banner';
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
import MenuItem from '@mui/material/MenuItem';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
@ -34,16 +28,16 @@ export default function Telemetria() {
- Distribuidora.' imgSource='/assets/graphical.png' />
<FormControl sx={{ width: 250, mt:10 , pl:8}} style={{}}>
<FormHelperText style={{}}>Unidade</FormHelperText>
<FormControl size="small" sx={{ width: 240, mt:10 , pl:4 }} style={{}}>
<p className='title'>Unidade</p>
<Select
value={age}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
>
<MenuItem value="">
<em>Filial 3</em>
<MenuItem value="" style={{color:'primary'}}>
teste
</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
@ -52,8 +46,8 @@ export default function Telemetria() {
</FormControl>
<FormControl sx={{ width: 240, mt:10 , pl:8}} >
<FormHelperText>Data Final</FormHelperText>
<FormControl size="small" sx={{ width: 260, mt:10 , pl:5}} >
<p className='title'>Data Inicial</p>
<Select
value={age}
onChange={handleChange}
@ -61,7 +55,7 @@ export default function Telemetria() {
inputProps={{ 'aria-label': 'Without label' }}
>
<MenuItem value="">
<em>07/09/2021</em>
07/09/2021
</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
@ -69,8 +63,8 @@ export default function Telemetria() {
</Select>
</FormControl>
<FormControl sx={{ width: 240, mt:10 , pl:8}} >
<FormHelperText>Data Final</FormHelperText>
<FormControl size="small" sx={{ width: 260, mt:10 , pl:5, }} >
<p className='title'>Data Final</p>
<Select
value={age}
onChange={handleChange}
@ -78,7 +72,7 @@ export default function Telemetria() {
inputProps={{ 'aria-label': 'Without label' }}
>
<MenuItem value="">
<em>07/09/2021</em>
07/09/2021
</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
@ -86,8 +80,8 @@ export default function Telemetria() {
</Select>
</FormControl>
<FormControl sx={{ width: 240, mt:10 , pl:8}} >
<FormHelperText >Discretização</FormHelperText>
<FormControl size="small" sx={{ width: 270, mt:10 , pl:5}} >
<p className='title'>Discretização</p>
<Select
value={age}
onChange={handleChange}
@ -95,7 +89,7 @@ export default function Telemetria() {
inputProps={{ 'aria-label': 'Without label' }}
>
<MenuItem value="">
<em>60 min</em>
60 min
</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
@ -104,8 +98,8 @@ export default function Telemetria() {
</FormControl>
<Buttons>
<button className='btnGrafico'> <p>GRÁFICOS</p> <br /> GERAR GRÁFICOS COM OS DADOS SELECIONADOS</button>
<button className='btndownload'> <p>DOWNLOADS</p> <br /> DADOS BRUTOS SELECIONADOS</button>
<button className='btnGrafico'> <p className='btnTitle'>GRÁFICOS</p> <br /> GERAR GRÁFICOS COM OS DADOS SELECIONADOS</button>
<button className='btndownload'> <p>DOWNLOADS</p> <br /> DADOS BRUTOS SELECIONADOS</button>
<button className='btnDados'> <p>DADOS</p> <br /> HORÁRIOS DO MÊS ATUAL</button>
</Buttons>
</TelemetriaView>

32
styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -3,9 +3,23 @@ import styled from 'styled-components';
export const TelemetriaView = styled.main`
padding: 20px ;
width: 100%;
padding: 20px ;
width: 100%;
.title{
color: black;
font-weight: 600;
font-size: 14px;
}
span{
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #667085;
}
`;
@ -14,10 +28,9 @@ export const Buttons = styled.div`
display: flex;
min-width: 10rem;
cursor: pointer;
margin-top: 8rem;
margin-top: 5rem;
justify-content: space-around;
flex-direction: row;
height: 6rem;
/* flex-direction: column; */
/*
@ -29,7 +42,7 @@ export const Buttons = styled.div`
} */
.btnGrafico {
box-shadow:inset 0px 34px 0px -15px #F48665;
box-shadow:inset 0px 34px 0px -15px #F48665;
background-color:#F48665;
border:none;
border-radius: 2px;
@ -45,7 +58,14 @@ export const Buttons = styled.div`
text-shadow:0px -1px 0px #7a2a1d;
}
p{
.btnTitle{
font-size: 15px;
margin-bottom: 1px;
}
.title{
font-size:20px;
}
.myButton:hover {