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

📱 responsiving

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-17 09:53:35 -03:00
parent c0ee73db29
commit b64d680409
22 changed files with 449 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/banner/BannerView.ts
View File

@ -7,12 +7,12 @@ export const BannerView = styled.div`
align-items: center;
width: 100%;
height: 19rem;
height: 20%;
.gradient {
position: absolute;
width: 100%;
height: 19rem;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(7, 23, 100, 0.6);
opacity: 0.9;
@ -20,6 +20,10 @@ export const BannerView = styled.div`
z-index: 1;
}
h1 {
font-size: 18px;
}
.text {
position: relative;
margin: 0 0 0 20px;
@ -34,7 +38,7 @@ export const BannerView = styled.div`
overflow: hidden;
p {
font-size: 30px;
font-size: 70%;
}
* {
@ -42,7 +46,12 @@ export const BannerView = styled.div`
}
}
@media (max-width: 1640px) {
font-size: 10px;
}
@media (max-width: 1008px) {
font-size: 170%;
}
`

5
src/components/buttons/loginButton/LoginButtonView.ts
View File

@ -20,4 +20,9 @@ export const LoginButtonView = styled.button`
cursor: pointer;
color: #FFFFFF;
@media (max-width: 1640px) {
font-size: 18px;
width: 90%;
}
`

11
src/components/graph/Chart.tsx
View File

@ -13,6 +13,7 @@ import {
import faker from 'faker'
import { ChartView } from './ChartView';
import RenderIf from '../../utils/renderIf';
ChartJS.register(
CategoryScale,
@ -25,9 +26,11 @@ ChartJS.register(
interface ChartInterface {
title: string,
data?: any,
single?: any
}
export default function Chart({ title }: ChartInterface) {
export default function Chart({ title, single, data }: ChartInterface) {
const [ graphData, setGraphData ] = useState({
labels: [],
datasets: [],
@ -68,6 +71,12 @@ export default function Chart({ title }: ChartInterface) {
return (
<ChartView>
<RenderIf isTrue={single? true : false} >
<Bar
options={options}
data={graphData}
/>
</RenderIf>
<Bar
options={options}
data={graphData}

149
src/components/graph/LineChart.tsx Normal file
View File

@ -0,0 +1,149 @@
import React, { useState, useEffect } from 'react'
import { Bar, Line } from 'react-chartjs-2';
// import {
// Chart as ChartJS,
// CategoryScale,
// LinearScale,
// BarElement,
// Title,
// Tooltip,
// Legend,
// PointElement,
// registerables
// } from 'chart.js'
// import Chart from 'chart.js/auto'
// import faker from 'faker'
import { ChartView } from './ChartView';
// ChartJS.register(
// CategoryScale,
// LinearScale,
// BarElement,
// Title,
// Tooltip,
// Legend,
// PointElement,
// )
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
ScatterDataPoint,
} from 'chart.js';
// import { Line } from 'react-chartjs-2';
import faker from 'faker';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
interface ChartInterface {
title: string,
data: any
}
export default function LineChart({ title, data }: ChartInterface) {
// const [ graphData, setGraphData ] = useState({
// labels: [],
// datasets: [],
// })
// const options = {
// responsive: true,
// plugins: {
// legend: {
// position: 'bottom' as const,
// },
// title: {
// display: true,
// text: title,
// },
// },
// };
// const labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'];
// useEffect(() => {
// setGraphData({
// labels,
// datasets: [
// {
// label: '2020',
// data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
// backgroundColor: '#C2D5FB',
// },
// {
// label: '2021',
// data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
// backgroundColor: '#255488',
// },
// ],
// })
// }, [])
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Chart.js Line Chart',
},
},
};
const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',];
// const data = {
// labels,
// datasets: [
// // {
// // label: 'Dataset 1',
// // data: [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
// // borderColor: 'rgb(53, 162, 235)',
// // backgroundColor: 'rgba(53, 162, 235, 0.5)',
// // },
// // {
// // label: 'Dataset 2',
// // data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
// // borderColor: 'rgb(255, 114, 32)',
// // backgroundColor: 'rgba(255, 145, 0, 0.5)',
// // },
// {
// label: 'Dataset 3',
// data: [1, 2, 3, 5, 7, 8, 9, 8, 9, 7, 8, 6, 4, 3, 2, 3, 3, 4, 4, 5, 5, 5, 6, 6, 7, 7, 9, 10, 11, 12, 12, 14, 15, 17, 20, 21, 18, 15, 14, 12, 11, 10, 8, 6, 7, 8, 7, 9],
// borderColor: 'rgb(109, 109, 109)',
// backgroundColor: 'rgba(90, 90, 90, 0.5)',
// },
// // {
// // label: 'Dataset4',
// // data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
// // borderColor: 'rgb(255, 166, 0)',
// // backgroundColor: 'rgba(255, 187, 0, 0.5)',
// // },
// ],
// };
return (
<ChartView>
<Line options={options} data={data} />
</ChartView>
)
}

56
src/components/graph/SingleBar.tsx Normal file
View File

@ -0,0 +1,56 @@
import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import faker from 'faker';
import { ChartView } from './ChartView';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Chart.js Bar Chart',
},
},
};
const labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'];
export const data = {
labels,
datasets: [
{
label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
backgroundColor: '#255488',
},
],
};
export function SingleBar() {
return (
<ChartView>
<Bar options={options} data={data} />
</ChartView>
)
}

53
src/components/graph/graphCard/ChartCard.tsx
View File

@ -7,15 +7,20 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { ChartCardView } from './ChartCardView';
import Chart from '../Chart';
import ButtonGroup from '../../buttonGroup/ButtonGroup';
import RenderIf from '../../../utils/renderIf';
import LineChart from '../LineChart';
import { SingleBar } from '../SingleBar';
interface ChartCardInterface {
title: string,
subtitle: string,
consumption?: number,
className?: string
className?: string,
line?: boolean | undefined,
singleBar?: any
}
export default function ChartCard({ title, subtitle, consumption, className }: ChartCardInterface) {
export default function ChartCard({ title, subtitle, consumption, className, line, singleBar }: ChartCardInterface) {
const [timeCourse, setTimeCourse] = React.useState<string | null>('left');
const handleAlignment = (
@ -25,6 +30,39 @@ export default function ChartCard({ title, subtitle, consumption, className }: C
setTimeCourse(newAlignment);
};
const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',];
const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: [1, 2, 3, 5, 7, 8, 9, 8, 9, 7, 8, 6, 4, 3, 2, 3, 3, 4, 4, 5, 5, 5, 6, 6, 7, 7, 9, 10, 11, 12, 12, 14, 15, 17, 20, 21, 18, 15, 14, 12, 11, 10, 8, 6, 7, 8, 7, 9],
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
// {
// label: 'Dataset 2',
// data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
// borderColor: 'rgb(255, 114, 32)',
// backgroundColor: 'rgba(255, 145, 0, 0.5)',
// },
// {
// label: 'Dataset 3',
// data: [1, 2, 3, 5, 7, 8, 9, 8, 9, 7, 8, 6, 4, 3, 2, 3, 3, 4, 4, 5, 5, 5, 6, 6, 7, 7, 9, 10, 11, 12, 12, 14, 15, 17, 20, 21, 18, 15, 14, 12, 11, 10, 8, 6, 7, 8, 7, 9],
// borderColor: 'rgb(109, 109, 109)',
// backgroundColor: 'rgba(90, 90, 90, 0.5)',
// },
// {
// label: 'Dataset4',
// data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
// borderColor: 'rgb(255, 166, 0)',
// backgroundColor: 'rgba(255, 187, 0, 0.5)',
// },
],
};
return (
<ChartCardView className={className} >
<div className='content' >
@ -49,7 +87,18 @@ export default function ChartCard({ title, subtitle, consumption, className }: C
<></>
}
</div>
<RenderIf isTrue={line? true : false}>
<LineChart title='' data={data}/>
</RenderIf>
<RenderIf isTrue={line? false : true}>
<RenderIf isTrue={singleBar? true : false}>
<SingleBar/>
</RenderIf>
<RenderIf isTrue={singleBar? false : true}>
<Chart title='' />
</RenderIf>
</RenderIf>
</ChartCardView>
)
}

9
src/components/graph/graphCard/ChartCardView.ts
View File

@ -104,4 +104,13 @@ export const ChartCardView = styled.article`
}
}
@media (max-width: 1640px) {
font-size: 13px;
min-height: 28rem;
.info {
max-width: 4rem;
}
}
`

4
src/components/mapCard/MapCard.tsx
View File

@ -14,7 +14,7 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
return (
<MapCardView>
<Image src={imgSource} width={110} height={110}/>
<Image src={imgSource} width={90} height={90}/>
<div>
<h4>{title}</h4>
<span>{subtitle}</span>
@ -22,7 +22,7 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
{
statistic?
<>
<Image src="/graphLineIcon.svg" width={20} height={20} />
<Image src="/graphLineIcon.svg" width={14} height={14} />
<p>{statistic}</p>
</>
:

5
src/components/mapCard/MapCardView.ts
View File

@ -29,4 +29,9 @@ export const MapCardView = styled.figure`
display: flex;
}
}
@media (max-width: 1640px) {
margin-right: 0px;
font-size: 14px;
}
`

4
src/components/pageTitle/PageTitleView.ts
View File

@ -24,4 +24,8 @@ p {
color: #969BA0;
}
@media (max-width: 1640px) {
font-size: 15px;
}
`

2
src/components/sidebar/Sidebar.tsx
View File

@ -26,7 +26,7 @@ export default function Sidebar() {
</div>
<ul>
<Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia'}</li>
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
<div className='economiaDrawer drawer' >
<Link href='/grossSavings'><li>Economia Bruta</li></Link>
<Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>

9
src/components/sidebar/SidebarView.ts
View File

@ -180,4 +180,13 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
display: none;
}
}
@media (max-width: 1640px) {
font-size: 14px;
ul {
li {
height: 3.5rem;
}
}
}
`

9
src/pages/areaTest.tsx
View File

@ -13,6 +13,7 @@ import InputAdornment from '@mui/material/InputAdornment';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import LineChart from '../components/graph/LineChart'
@ -42,7 +43,8 @@ export default function areaTest() {
};
return (
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<>
{/* <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor="outlined-ad
ornment-password">Password</InputLabel>
<OutlinedInput
@ -64,7 +66,8 @@ export default function areaTest() {
}
label="Password"
/>
</FormControl>
</FormControl> */}
{/* <LineChart title='title' /> */}
</>
)
}

5
src/pages/dashboard.tsx
View File

@ -9,6 +9,7 @@ import PageTitle from '../components/pageTitle/PageTitle'
import Link from 'next/link'
export default function Dashboard() {
return (
<DashboardView>
<Header name='' />
@ -24,9 +25,9 @@ export default function Dashboard() {
</Link>
<section className='dashboard'>
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} line />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' />
<GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' singleBar />
</section>
</DashboardView>
)

25
src/pages/forgotPassword.tsx
View File

@ -5,6 +5,8 @@ import { useRouter } from 'next/router'
import LoginButton from '../components/buttons/loginButton/LoginButton';
import TextField from '@mui/material/TextField';
import { ForgotPasswordContainer, ForgotPasswordView } from '../styles/layouts/forgotPassword/ForgotPasswordView';
import RenderIf from '../utils/renderIf';
import Alert from '@mui/material/Alert';
export default function ForgotPassword() {
const router = useRouter()
@ -12,15 +14,34 @@ export default function ForgotPassword() {
const [password, setPassword] = useState<string>('')
const [confirmPassword, setConfirmPassword] = useState<string>('')
const [same, setSame] = useState<boolean>(false)
useEffect(() => {
setPassword('')
setConfirmPassword('')
setSame(false)
}, [rota])
function handleChangePassword() {
if (same) {
router.push('/')
} else {
null
}
}
useEffect(() => {
if (password == confirmPassword && password != '') {
setSame(false)
} else {
setSame(true)
}
}, [password])
return (
<ForgotPasswordView auth={rota} >
<Image src='/assets/marca1.svg' width={500} height={500} />
<Image src='/assets/marca1.svg' width={350} height={350} />
<ForgotPasswordContainer>
<h1>Bem-Vindo</h1>
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
@ -28,7 +49,7 @@ export default function ForgotPassword() {
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }} value={password} label="Senha" onChange={value => setPassword(value.target.value)} variant="outlined"/>
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }} value={confirmPassword} label="Confirmar Senha" onChange={value => setConfirmPassword(value.target.value)} variant="outlined"/>
<LoginButton title='Redefinir Senha' onClick={() => router.push('/')} />
<LoginButton title='Redefinir Senha' onClick={() => handleChangePassword()} />
<fieldset className="line">
<legend className="text">Ou</legend>

2
src/pages/index.tsx
View File

@ -43,7 +43,7 @@ export default function Home() {
return (
<LoginView auth={rota} >
<Image src='/assets/marca1.svg' width={500} height={500} />
<Image src='/assets/marca1.svg' width={350} height={350} />
<LoginContainer>
<h1>Bem-Vindo</h1>
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>

36
src/pages/pld/index.tsx
View File

@ -12,6 +12,7 @@ import BasicButton from '../../components/buttons/basicButton/BasicButton';
import Chart from '../../components/graph/Chart';
import PageTitle from '../../components/pageTitle/PageTitle';
import Link from 'next/link';
import LineChart from '../../components/graph/LineChart';
export default function region() {
const router = useRouter()
@ -28,6 +29,39 @@ export default function region() {
console.log(page)
}, [page])
const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',];
const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
{
label: 'Dataset 2',
data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
borderColor: 'rgb(255, 114, 32)',
backgroundColor: 'rgba(255, 145, 0, 0.5)',
},
{
label: 'Dataset 3',
data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
borderColor: 'rgb(109, 109, 109)',
backgroundColor: 'rgba(90, 90, 90, 0.5)',
},
{
label: 'Dataset4',
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
borderColor: 'rgb(255, 166, 0)',
backgroundColor: 'rgba(255, 187, 0, 0.5)',
},
],
};
return (
<main style={{
width: '100%',
@ -208,7 +242,7 @@ export default function region() {
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
<BasicButton title='Download (csv)' />
</section>
<Chart title='' />
<LineChart title='' data={data}/>
</PldGraphView>
</RenderIf>
</main>

4
src/pages/verifyEmail.tsx
View File

@ -32,7 +32,7 @@ export default function VerifyEmail() {
function verifyConfirmationCode() {
if (code === '0000') {
setTimeout(() => {
router.push('/')
router.push('/forgotPassword')
}, 2500);
setCodeStatus(true)
} else {
@ -42,7 +42,7 @@ export default function VerifyEmail() {
return (
<VerifyEmailView auth={rota} >
<Image src='/assets/marca1.svg' width={500} height={500} />
<Image src='/assets/marca1.svg' width={350} height={350} />
<VerifyEmailContainer>
<h1>Bem-Vindo</h1>
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>

1
src/styles/layouts/dashboard/DashboardView.ts
View File

@ -75,4 +75,5 @@ export const DashboardView = styled.main`
width: 100%;
}
}
`

22
src/styles/layouts/forgotPassword/ForgotPasswordView.ts
View File

@ -22,6 +22,17 @@ export const ForgotPasswordView = styled.main<{auth: string}>`
padding: 100px;
}
@media (max-width: 1640px) {
font-size: 80%;
h2 {
font-size: 16px;
}
input {
height: 1.5rem;
}
}
`;
export const ForgotPasswordContainer = styled.section`
@ -98,4 +109,15 @@ export const ForgotPasswordContainer = styled.section`
width: 100%;
margin: 0;
}
@media (max-width: 1640px) {
font-size: 80%;
h2 {
font-size: 16px;
}
input {
height: 1.5rem;
}
}
`;

11
src/styles/layouts/forgotPassword/verifyEmail.ts
View File

@ -98,4 +98,15 @@ export const VerifyEmailContainer = styled.section`
width: 100%;
margin: 0;
}
@media (max-width: 1640px) {
font-size: 80%;
h2 {
font-size: 16px;
}
input {
height: 1.5rem;
}
}
`;

10
src/styles/layouts/login/LoginView.ts
View File

@ -98,4 +98,14 @@ export const LoginContainer = styled.section`
width: 100%;
margin: 0;
}
@media (max-width: 1640px) {
font-size: 80%;
h2 {
font-size: 16px;
}
input {
height: 1.5rem;
}
}
`;