From 0e3cf4161d7b88fba7e8d7f432609b99aa47bb0c Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Tue, 10 May 2022 15:14:26 -0300 Subject: [PATCH 1/6] :sparkles: add Operation Summary Page --- pages/resumoOperacao.tsx | 4 ++++ styles/layouts/ResumoOperacao/ResumoOperacaoView.ts | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/pages/resumoOperacao.tsx b/pages/resumoOperacao.tsx index cd2c42a..57dc56a 100644 --- a/pages/resumoOperacao.tsx +++ b/pages/resumoOperacao.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import BasicButton from '../src/components/buttons/basicButton/BasicButton'; import Sidebar from '../src/components/sidebar/Sidebar'; import { TableView} from '../styles/layouts/resumoOperacao/ResumoOperacaoView'; @@ -77,8 +78,11 @@ export default function ResumoOperacao() { + +

Mostando de 1 a 10 de 30 Entradas

+ ) } diff --git a/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts b/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts index 1b5cef3..a9a4233 100644 --- a/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts +++ b/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' export const TableView = styled.div` -display: flex; + display: flex; padding: 2.5rem; justify-content: center; flex-direction: column; @@ -138,4 +138,9 @@ h1{ font-size: 15px; margin-top: 5rem; } + p{ + margin-top: 4rem; + } + + `; From 28d68c0fd9c77db4afff288ff80a43493e4fecdc Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 11 May 2022 08:59:42 -0300 Subject: [PATCH 2/6] :tada: add page files --- pages/commonQuestions.tsx | 0 styles/layouts/commonQuestions/CommonQuestions.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 pages/commonQuestions.tsx create mode 100644 styles/layouts/commonQuestions/CommonQuestions.ts diff --git a/pages/commonQuestions.tsx b/pages/commonQuestions.tsx new file mode 100644 index 0000000..e69de29 diff --git a/styles/layouts/commonQuestions/CommonQuestions.ts b/styles/layouts/commonQuestions/CommonQuestions.ts new file mode 100644 index 0000000..e69de29 From 175af9af1d0ec829041bff2599f92aedaf036658 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 11 May 2022 11:07:13 -0300 Subject: [PATCH 3/6] :sparkles: add faq page --- pages/commonQuestions.tsx | 0 pages/faq.tsx | 26 +++++++++++++ public/assets/less-icon.svg | 3 ++ public/assets/plus-icon.svg | 4 ++ .../commonQuestionsCard/FaqQuestionsCard.tsx | 23 +++++++++++ .../FaqQuestionsCardView.ts | 38 +++++++++++++++++++ src/components/sidebar/Sidebar.tsx | 2 +- .../commonQuestions/CommonQuestions.ts | 0 styles/layouts/commonQuestions/FaqView.ts | 36 ++++++++++++++++++ 9 files changed, 131 insertions(+), 1 deletion(-) delete mode 100644 pages/commonQuestions.tsx create mode 100644 pages/faq.tsx create mode 100644 public/assets/less-icon.svg create mode 100644 public/assets/plus-icon.svg create mode 100644 src/components/commonQuestionsCard/FaqQuestionsCard.tsx create mode 100644 src/components/commonQuestionsCard/FaqQuestionsCardView.ts delete mode 100644 styles/layouts/commonQuestions/CommonQuestions.ts create mode 100644 styles/layouts/commonQuestions/FaqView.ts diff --git a/pages/commonQuestions.tsx b/pages/commonQuestions.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/pages/faq.tsx b/pages/faq.tsx new file mode 100644 index 0000000..a81e156 --- /dev/null +++ b/pages/faq.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import CommonQuestionsCard from '../src/components/commonQuestionsCard/FaqQuestionsCard' +import Header from '../src/components/header/Header' +import { FaqView } from '../styles/layouts/commonQuestions/FaqView' + +export default function commonQuestions() { + return ( + +
+

Perguntas Frequentes

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +
+ +
+ +
+ +
+ +
+
+ + ) +} diff --git a/public/assets/less-icon.svg b/public/assets/less-icon.svg new file mode 100644 index 0000000..1e98ed9 --- /dev/null +++ b/public/assets/less-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/plus-icon.svg b/public/assets/plus-icon.svg new file mode 100644 index 0000000..03a43ea --- /dev/null +++ b/public/assets/plus-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/commonQuestionsCard/FaqQuestionsCard.tsx b/src/components/commonQuestionsCard/FaqQuestionsCard.tsx new file mode 100644 index 0000000..343e749 --- /dev/null +++ b/src/components/commonQuestionsCard/FaqQuestionsCard.tsx @@ -0,0 +1,23 @@ +import React, { useState } from 'react' +import Image from 'next/image' + +import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } from './FaqQuestionsCardView' + +export default function CommonsQuestionsCard() { + const [ showCardBody, setShowCardBody ] = useState(false) + return ( + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

+ setShowCardBody(!showCardBody)} /> + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Consequat porta faucibus elementum pharetra varius +

+ + + ) +} diff --git a/src/components/commonQuestionsCard/FaqQuestionsCardView.ts b/src/components/commonQuestionsCard/FaqQuestionsCardView.ts new file mode 100644 index 0000000..396f619 --- /dev/null +++ b/src/components/commonQuestionsCard/FaqQuestionsCardView.ts @@ -0,0 +1,38 @@ +import styled from "styled-components"; + +export const CommonQuestionsCardView = styled.article` +` + +export const FaqQuestionsCardHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + flex-direction: row; + + margin-top: 53px; + + width: 100%; + + img { + cursor: pointer; + } +` +interface CardBodyInterface { + showCardBody: boolean; +} +export const FaqQuestionsCardBody = styled.div` + display: ${props => props.showCardBody? 'flex' : 'none'}; + + margin-bottom: 20px; + + p { + font-weight: 400; + font-size: 14px; + line-height: 12px; + + letter-spacing: 0.5px; + + color: rgba(0, 0, 0, 0.6); + } +` diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 78cc0ca..629035e 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -37,7 +37,7 @@ export default function Sidebar() {
  • {'Notícias >'}
  • {'Info Setorial >'}
    • -
  • {'SAQ >'}
    • +
  • {'FAQ >'}
  • {'Sobre Nós >'}
  • {'Notificação >'}
  • {'Telemetria >'}
    • diff --git a/styles/layouts/commonQuestions/CommonQuestions.ts b/styles/layouts/commonQuestions/CommonQuestions.ts deleted file mode 100644 index e69de29..0000000 diff --git a/styles/layouts/commonQuestions/FaqView.ts b/styles/layouts/commonQuestions/FaqView.ts new file mode 100644 index 0000000..37b4a7b --- /dev/null +++ b/styles/layouts/commonQuestions/FaqView.ts @@ -0,0 +1,36 @@ +import styled from "styled-components"; + +export const FaqView = styled.main` + display: flex; + align-items: center; + + flex-direction: column; + + width: 100%; + + h1 { + font-weight: 700; + font-size: 48px; + line-height: 72px; + text-align: center; + letter-spacing: 0.5px; + } + + p { + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-align: center; + letter-spacing: 0.5px; + + color: #AAAAAA; + } + + .CommonQuestionsSection { + width: 80%; + } + + hr { + border: 1px solid #DDDDDD; + } +` From 3c51cdbc54610647f2e0062b75095372dfcfea46 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 11 May 2022 12:46:42 -0300 Subject: [PATCH 4/6] :iphone: responsiving pages --- pages/aboutUs.tsx | 14 ++++++------ pages/faq.tsx | 2 +- src/components/banner/BannerView.ts | 20 ++++++++++++++++- .../buttons/basicButton/BasicButtonView.ts | 2 +- .../FaqQuestionsCard.tsx | 0 .../FaqQuestionsCardView.ts | 11 ++++++++-- src/components/header/Header.tsx | 2 +- src/components/header/HeaderView.ts | 2 +- src/components/pageTitle/PageTitleView.ts | 2 +- src/components/sidebar/Sidebar.tsx | 4 ++-- src/components/sidebar/SidebarView.ts | 22 +++++++++---------- styles/app/AppView.ts | 2 +- styles/layouts/aboutUs/AboutUsView.ts | 14 +++++++++++- styles/layouts/commonQuestions/FaqView.ts | 4 ++-- 14 files changed, 68 insertions(+), 33 deletions(-) rename src/components/{commonQuestionsCard => faqQuestionsCard}/FaqQuestionsCard.tsx (100%) rename src/components/{commonQuestionsCard => faqQuestionsCard}/FaqQuestionsCardView.ts (84%) diff --git a/pages/aboutUs.tsx b/pages/aboutUs.tsx index d59ebc2..cef1d84 100644 --- a/pages/aboutUs.tsx +++ b/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.

      -
    • Informação
      • -
    • Economia
      • -
    • Gestão de Energia
      • -
    • Imparcialidade
      • -
    • Previsão de Custos
      • -
    • Experiência
      • -
    • Relacionamento
      • +
    • {'Informação'}
      • +
    • {'Economia'}
      • +
    • {'Gestão de Energia'}
      • +
    • {'Imparcialidade'}
      • +
    • {'Previsão de Custos'}
      • +
    • {'Experiência'}
      • +
    • {'Relacionamento'}
    diff --git a/pages/faq.tsx b/pages/faq.tsx index a81e156..164eae9 100644 --- a/pages/faq.tsx +++ b/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' diff --git a/src/components/banner/BannerView.ts b/src/components/banner/BannerView.ts index 6054c72..7f46aff 100644 --- a/src/components/banner/BannerView.ts +++ b/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%; } ` diff --git a/src/components/buttons/basicButton/BasicButtonView.ts b/src/components/buttons/basicButton/BasicButtonView.ts index 5c66b88..2492db7 100644 --- a/src/components/buttons/basicButton/BasicButtonView.ts +++ b/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 */ diff --git a/src/components/commonQuestionsCard/FaqQuestionsCard.tsx b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx similarity index 100% rename from src/components/commonQuestionsCard/FaqQuestionsCard.tsx rename to src/components/faqQuestionsCard/FaqQuestionsCard.tsx diff --git a/src/components/commonQuestionsCard/FaqQuestionsCardView.ts b/src/components/faqQuestionsCard/FaqQuestionsCardView.ts similarity index 84% rename from src/components/commonQuestionsCard/FaqQuestionsCardView.ts rename to src/components/faqQuestionsCard/FaqQuestionsCardView.ts index 396f619..91d16dd 100644 --- a/src/components/commonQuestionsCard/FaqQuestionsCardView.ts +++ b/src/components/faqQuestionsCard/FaqQuestionsCardView.ts @@ -28,11 +28,18 @@ export const FaqQuestionsCardBody = styled.div` p { font-weight: 400; - font-size: 14px; - line-height: 12px; + font-size: 99%; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.6); + + text-align: left; + } + + @media (max-width: 1008px) { + p { + text-align: left; + } } ` diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 34c865b..4bc5ffb 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) { />
    - +
    olá, {'josé'}
    diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts index 8b87195..d217c5e 100644 --- a/src/components/header/HeaderView.ts +++ b/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; diff --git a/src/components/pageTitle/PageTitleView.ts b/src/components/pageTitle/PageTitleView.ts index e903e9e..3013202 100644 --- a/src/components/pageTitle/PageTitleView.ts +++ b/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; diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 629035e..282ce6f 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -19,7 +19,7 @@ export default function Sidebar() { return (
    setViewModal(!viewModal)} > - +
    @@ -28,7 +28,7 @@ export default function Sidebar() {
  • {'Visão Geral'}
  • {'Consumo'}
  • {'Resumo de Op. '}
    • -
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
    • +
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia'}
  • Economia Bruta
  • Economia Acumulada
    • diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts index 7440f24..d2d2df8 100644 --- a/src/components/sidebar/SidebarView.ts +++ b/src/components/sidebar/SidebarView.ts @@ -15,6 +15,7 @@ export const SidebarView = styled.nav` flex-direction: column; width: 20%; + min-width: 15rem; margin: 0; padding: 0; @@ -27,16 +28,7 @@ export const SidebarView = styled.nav` 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` font-style: normal; font-weight: 500; - font-size: 16px; line-height: 27px; color: #969BA0; @@ -131,7 +122,7 @@ export const SidebarView = styled.nav` 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` 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; diff --git a/styles/app/AppView.ts b/styles/app/AppView.ts index fcfaa67..f52d117 100644 --- a/styles/app/AppView.ts +++ b/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; } diff --git a/styles/layouts/aboutUs/AboutUsView.ts b/styles/layouts/aboutUs/AboutUsView.ts index 3feabdd..d53880e 100644 --- a/styles/layouts/aboutUs/AboutUsView.ts +++ b/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; + } + } ` diff --git a/styles/layouts/commonQuestions/FaqView.ts b/styles/layouts/commonQuestions/FaqView.ts index 37b4a7b..32d9b16 100644 --- a/styles/layouts/commonQuestions/FaqView.ts +++ b/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; From be1e8ad57b097608e02189d67d9b43347591ce0b Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 11 May 2022 12:51:34 -0300 Subject: [PATCH 5/6] :iphone: responsiving pages --- src/txt.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/txt.txt diff --git a/src/txt.txt b/src/txt.txt new file mode 100644 index 0000000..e69de29 From d76992f98de0130492c71a92530d12b04793ecac Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 11 May 2022 13:13:25 -0300 Subject: [PATCH 6/6] :sparkles: add telemetry page --- src/txt.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/txt.txt diff --git a/src/txt.txt b/src/txt.txt deleted file mode 100644 index e69de29..0000000