📱 responsiving

src/components/banner/BannerView.ts

@@ -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%;
   }
+
 `

src/components/buttons/loginButton/LoginButtonView.ts

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

src/components/graph/Chart.tsx

@@ -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}

src/components/graph/LineChart.tsx

@@ -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>
+  )
+}

src/components/graph/SingleBar.tsx

@@ -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>
+  )
+}

src/components/graph/graphCard/ChartCard.tsx

@@ -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>
   )
 }

src/components/graph/graphCard/ChartCardView.ts

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

src/components/mapCard/MapCard.tsx

@@ -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>
                 </>
                 :

src/components/mapCard/MapCardView.ts

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

src/components/pageTitle/PageTitleView.ts

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

src/components/sidebar/Sidebar.tsx

@@ -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>

src/components/sidebar/SidebarView.ts

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

src/pages/areaTest.tsx

@@ -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' /> */}
+    </>
   )
 }

src/pages/dashboard.tsx

@@ -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>
   )

src/pages/forgotPassword.tsx

@@ -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>

src/pages/index.tsx

@@ -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>

src/pages/pld/index.tsx

@@ -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>

src/pages/verifyEmail.tsx

@@ -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>

src/styles/layouts/dashboard/DashboardView.ts

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

src/styles/layouts/forgotPassword/ForgotPasswordView.ts

@@ -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;
+    }
+  }
 `;

src/styles/layouts/forgotPassword/verifyEmail.ts

@@ -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;
+    }
+  }
 `;

src/styles/layouts/login/LoginView.ts

@@ -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;
+    }
+  }
 `;