input styling, missing to finalize the buttons

pages/telemetria.tsx

@@ -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={{}}>
+      <FormControl  size="small" sx={{  width: 240,  mt:10 , pl:4 }} style={{}}>
-      <FormHelperText   style={{}}>Unidade</FormHelperText>
+      <p className='title'>Unidade</p>
         <Select
           value={age}
           onChange={handleChange}
           displayEmpty
           inputProps={{ 'aria-label': 'Without label' }}
         >
-          <MenuItem value="">
+          <MenuItem value="" style={{color:'primary'}}>
-            <em>Filial 3</em>
+           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}} >
+      <FormControl size="small" sx={{ width: 260, mt:10 , pl:5}} >
-        <FormHelperText>Data Final</FormHelperText>
+      <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}} >
+      <FormControl size="small" sx={{ width: 260, mt:10 , pl:5, }} >
-        <FormHelperText>Data Final</FormHelperText>
+      <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}} >
+      <FormControl  size="small" sx={{ width: 270, mt:10 , pl:5}} >
-        <FormHelperText  >Discretização</FormHelperText>
+      <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='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='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>

styles/layouts/Telemetria/TelemetriaView.ts

@@ -3,9 +3,23 @@ import styled from 'styled-components';
 
 
 export const TelemetriaView = styled.main`
-   padding: 20px ;
+  padding: 20px ;
-   width: 100%;
+  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 {