From 0920abc9d8ce0f4cb2d3253fd18cdaf753313e2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Corte?= <josecarlos-corte@hotmail.com>
Date: Fri, 6 May 2022 19:25:16 -0300
Subject: [PATCH] :lipstick: modifing ui of dashboard

---
 pages/dashboard.tsx                       | 38 ++++++++-----------
 styles/layouts/Dashboard/DashboardView.ts | 45 ++++++++++++++---------
 2 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index f6312c7..7758e39 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -3,31 +3,25 @@ import React from 'react'
 import { DashboardView } from '../styles/layouts/Dashboard/DashboardView'
 import MapCard from '../src/components/mapCard/MapCard'
 import GraphCard from '../src/components/graph/graphCard/GraphCard'
-import Sidebar from '../src/components/sidebar/Sidebar'
 
 export default function Dashboard() {
   return (
-    <div style={{
-      'display': 'flex',
-      'flexDirection': 'row'
-    }}>
-      <Sidebar />
-      <DashboardView>
-        <h1>Visão Geral</h1>
-        <span>Bem Vindo a Smart Energia</span>
-        <section className="cardsSection" >
-          <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
-          <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-          <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-          <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-          <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-        </section>
+    <DashboardView>
+      <h1>Visão Geral</h1>
+      <span>Bem Vindo a Smart Energia</span>
+      <section className="cardsSection" >
+        <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
+        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+      </section>
 
-        <section className='dashboard'>
-          <GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} />
-          <GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
-        </section>
-      </DashboardView>
-    </div>
+      <section className='dashboard'>
+        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} />
+        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
+        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' />
+      </section>
+    </DashboardView>
   )
 }
diff --git a/styles/layouts/Dashboard/DashboardView.ts b/styles/layouts/Dashboard/DashboardView.ts
index 393083c..28837b2 100644
--- a/styles/layouts/Dashboard/DashboardView.ts
+++ b/styles/layouts/Dashboard/DashboardView.ts
@@ -16,10 +16,7 @@ export const DashboardView = styled.main`
 
   width: 100%;
 
-  margin: 0 0 0 20rem;
-
-  padding-left: 30px;
-  padding-right: 30px;
+  padding: 30px;
 
   span {
     font-family: 'Poppins';
@@ -72,34 +69,46 @@ export const DashboardView = styled.main`
   .dashboard {
     display: grid;
 
-    grid-template-columns: 50% 50%;
-    grid-template-rows: 100%;
+    grid-template-columns: 50% 50% 100%;
+    grid-template-rows: 50% 50%;
 
-    gap: 40px;
+    gap: 30px;
 
     width: 99%;
 
-    /* flex-wrap: wrap; */
+    padding-right: 20px;
+
+    .footerGraph {
+      grid-row-start: 2;
+
+      grid-column-start: 1;
+      grid-column-end: 3;
+    }
   }
 
   @media (max-width: 1195px) {
+    /* align-items: center; */
+    width: 100%;
+    padding: 30px;
     margin: 0;
-    margin-top: 80px;
-    margin-left: 20px;
-  }
 
-  @media (max-width: 1195px) {
     .dashboard {
-      display: grid;
+      display: flex;
 
-      grid-template-columns: 100%;
-      grid-template-rows: 50% 50%;
+      padding: 0;
+      margin: 0;
 
-      gap: 40px;
+      justify-content: center;
+      align-items: center;
+
+      flex-wrap: wrap;
+
+      grid-template-columns: 50% 50%;
+
+      grid-auto-rows: 1;
+      grid-auto-columns: 1;
 
       width: 100%;
-
-      /* flex-wrap: wrap; */
     }
   }
 `