Merge branch 'responsiving' of https://gitlab.com/kluppsoftware/smart-energia-web into dev

pages/aboutUs.tsx

@@ -24,13 +24,13 @@ export default function aboutUs() {
           aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de
           contratação de energia.</p>
         <ul>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Informação</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Informação'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Economia</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Economia'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Gestão de Energia</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Gestão de Energia'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Imparcialidade</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Imparcialidade'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Previsão de Custos</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Previsão de Custos'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Experiência</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Experiência'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Relacionamento</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Relacionamento'}</li>
         </ul>
 
         <article>

pages/faq.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import CommonQuestionsCard from '../src/components/commonQuestionsCard/FaqQuestionsCard'
+import CommonQuestionsCard from '../src/components/faqQuestionsCard/FaqQuestionsCard'
 import Header from '../src/components/header/Header'
 import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
 

src/components/banner/BannerView.ts

@@ -2,6 +2,10 @@ import styled from 'styled-components'
 
 export const BannerView = styled.div`
   position: relative;
+
+  display: flex;
+  align-items: center;
+
   width: 100%;
   height: 19rem;
 
@@ -18,7 +22,7 @@ export const BannerView = styled.div`
 
   .text {
     position: relative;
-    margin: 82px 0 0 20px;
+    margin: 0 0 0 20px;
 
     font-family: 'Poppins';
     font-style: normal;
@@ -26,5 +30,19 @@ export const BannerView = styled.div`
     color: white;
 
     z-index: 2;
+
+    overflow: hidden;
+
+    p {
+      font-size: 30px;
+    }
+
+    * {
+      margin: 0;
+    }
+  }
+
+  @media (max-width: 1008px) {
+    font-size: 170%;
   }
 `

src/components/buttons/basicButton/BasicButtonView.ts

@@ -13,7 +13,7 @@ export const BasicButtonView = styled.button`
   border-style: none;
 
   font-family: 'Poppins';
-  font-size: 16px;
+  font-size: 90%;
   /* identical to box height */
 
 

src/components/faqQuestionsCard/FaqQuestionsCardView.ts

@@ -28,11 +28,18 @@ export const FaqQuestionsCardBody = styled.div<CardBodyInterface>`
 
   p {
     font-weight: 400;
-    font-size: 14px;
+    font-size: 99%;
-    line-height: 12px;
 
     letter-spacing: 0.5px;
 
     color: rgba(0, 0, 0, 0.6);
+
+    text-align: left;
+  }
+
+  @media (max-width: 1008px) {
+    p {
+      text-align: left;
+    }
   }
 `

src/components/header/Header.tsx

@@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) {
         />
       </section>
       <section>
-        <Image src='/assets/png/copel.png' width={150} height={50} />
+        <Image src='/assets/png/copel.png' width={170} height={50} />
         <div className='icon' >
           olá, {'josé'}
         </div>

src/components/header/HeaderView.ts

@@ -14,7 +14,7 @@ export const HeaderView = styled.header`
 
     :last-child {
       display: flex;
-      justify-content: center;
+      justify-content: flex-end;
       align-items: flex-start;
 
       height: fit-content;

src/components/pageTitle/PageTitleView.ts

@@ -19,7 +19,7 @@ p {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 400;
-  font-size: 18px;
+  font-size: 99%;
   line-height: 27px;
 
   color: #969BA0;

src/components/sidebar/Sidebar.tsx

@@ -19,7 +19,7 @@ export default function Sidebar() {
   return (
     <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
       <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
-        <Image src='/assets/hamburgerModal.svg' width={25} height={25} />
+        <Image src='/assets/hamburgerModal.svg' width={60} height={60} />
       </div>
       <div className='imageNext'>
         <Image src='/assets/logo.svg' width={100} height={100} />
@@ -28,7 +28,7 @@ export default function Sidebar() {
         <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>
         <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link>
         <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</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

@@ -15,6 +15,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
   flex-direction: column;
 
   width: 20%;
+  min-width: 15rem;
 
   margin: 0;
   padding: 0;
@@ -27,16 +28,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     border-left: #254F7F solid 8px;
     background-color: #FAFBFF;
 
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 27px;
-
     color: #254F7F;
-
-    stop-color: #254F7F;
-    .svg {
-      background-color: red;
-    }
   }
 
   ul {
@@ -64,7 +56,6 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
 
       font-style: normal;
       font-weight: 500;
-      font-size: 16px;
       line-height: 27px;
 
       color: #969BA0;
@@ -131,7 +122,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     display: none;
   }
 
-  @media (max-width: 1548px) {
+  @media (max-width: 1008px) {
     align-items: flex-start;
 
     width: 100%;
@@ -150,15 +141,22 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
       cursor: pointer;
 
       z-index: 2;
+
+      height: 5rem;
     }
     .imageNext {
       display: none;
     }
     ul {
       display: ${props => props.modalOpen? 'block' : 'none'};
-      min-height: 100vh;
+      min-height: 85vh;
 
       background-color: #FFF;
+
+      li {
+        height: 7rem;
+        font-size: 170%;
+      }
     }
     aside {
       display: none;

styles/app/AppView.ts

@@ -6,7 +6,7 @@ export const AppView = styled.main`
   margin: 0 0 10rem 0;
   padding: 0;
 
-  @media (max-width: 1548px) {
+  @media (max-width: 1008px) {
     flex-direction: column;
     margin: 0;
   }

styles/layouts/aboutUs/AboutUsView.ts

@@ -7,7 +7,7 @@ export const AboutUsView = styled.main`
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 300;
-    font-size: 17px;
+    font-size: 80%;
     line-height: 26px;
   }
 
@@ -17,6 +17,8 @@ export const AboutUsView = styled.main`
     li {
       display: flex;
       margin-bottom: 8px;
+
+      font-size: 98.98%;
     }
   }
 
@@ -37,4 +39,14 @@ export const AboutUsView = styled.main`
       }
     }
   }
+
+  @media (max-width: 1008px) {
+    li {
+      font-size: 170%!important;
+    }
+
+    img {
+      width: 200px;
+    }
+  }
 `

styles/layouts/commonQuestions/FaqView.ts

@@ -10,7 +10,7 @@ export const FaqView = styled.main`
 
   h1 {
     font-weight: 700;
-    font-size: 48px;
+    font-size: calc(90% + 2rem);
     line-height: 72px;
     text-align: center;
     letter-spacing: 0.5px;
@@ -18,7 +18,7 @@ export const FaqView = styled.main`
 
   p {
     font-weight: 400;
-    font-size: 14px;
+    font-size: 99.98%;
     line-height: 21px;
     text-align: center;
     letter-spacing: 0.5px;