add modified and created components and pages

package.json

@@ -22,14 +22,17 @@
     "@mui/material": "^5.6.4",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
+    "chart.js": "^3.7.1",
     "eslint-plugin-react": "^7.29.4",
     "eslit": "^6.0.0",
     "next": "12.1.6",
     "react": "18.1.0",
+    "react-chartjs-2": "^4.1.0",
     "react-dom": "18.1.0",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
+    "@types/chartjs": "^0.0.31",
     "@types/node": "^17.0.31",
     "@types/react": "^18.0.8",
     "@types/styled-components": "^5.1.25",

pages/_app.tsx

@@ -1,13 +1,18 @@
 import React from 'react'
-import '../styles/globals.css'
+import '../styles/globals.ts'
 
 import { AppProps } from 'next/app'
+import Sidebar from '../src/components/sidebar/Sidebar'
+import { GlobalStyle } from '../styles/globals'
+import { AppView } from '../styles/app/AppView'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <>
+    <AppView>
+      <GlobalStyle />
+      <Sidebar />
       <Component {...pageProps} />
-    </>
+    </AppView>
   )
 }
 

pages/areaTest.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
+import BasicButton from '../src/components/buttons/basicButton/BasicButton'
+import Graph from '../src/components/graph/Graph'
 
 export default function areaTest() {
   return (
-    <div>areaTest</div>
+    // <Graph />
+    <BasicButton title='texto'/>
   )
 }

src/components/buttons/basicButton/BasicButtonView.ts

@@ -5,14 +5,15 @@ export const BasicButtonView = styled.button`
   justify-content: center;
   align-items: center;
 
+  width: 120px;
+  height: 45px;
+
   background: #254F7F;
   border-radius: 8px;
+  border-style: none;
 
   font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 600;
   font-size: 16px;
-  line-height: 24px;
   /* identical to box height */
 
 

src/components/mapCard/MapCard.tsx

@@ -13,7 +13,7 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
 
   return (
     <MapCardView>
-      <Image src={imgSource} width={125} height={125} />
+      <Image src={imgSource} width={110} height={110} />
       <div>
         <h4>{title}</h4>
         <span>{subtitle}</span>

src/components/sidebar/Sidebar.tsx

@@ -10,9 +10,11 @@ export default function Sidebar() {
   return (
     <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
       <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
-        <Image src='/assets/hamburgerModal.svg' width={100} height={100} />
+        <Image src='/assets/hamburgerModal.svg' width={25} height={25} />
+      </div>
+      <div className='imageNext'>
+        <Image src='/assets/logo.svg' width={100} height={100} />
       </div>
-      <Image src='/assets/logo.svg' width={100} height={100} className='imageNext' />
       <ul>
         <li>{'Visão Geral'}</li>
         <li>{'Consumo'}</li>

styles/app/AppView.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const AppView = styled.main`
+  display: flex;
+
+  @media (max-width: 1196px) {
+    flex-direction: column;
+  }
+`

styles/globals.css

@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}

styles/globals.ts

@@ -0,0 +1,28 @@
+import { createGlobalStyle } from 'styled-components'
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins';
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+`;
+
+// html,
+// body {
+//   padding: 0;
+//   margin: 0;
+//   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+//     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+// }
+
+

yarn.lock

@@ -575,6 +575,11 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0"
   integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==
 
+"@types/chartjs@^0.0.31":
+  version "0.0.31"
+  resolved "https://registry.yarnpkg.com/@types/chartjs/-/chartjs-0.0.31.tgz#b16a687eaad3ea3e5cd3e961aee5a28e47b57949"
+  integrity sha512-eF1AgrIO0qP9KJYwM2dTKL2pczTjiLa0hfmZdQfKiqFq5WIvFTKPn1gkgADitF5sT4byEyq4EFdMVvuPIk6zeQ==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -954,6 +959,11 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chart.js@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada"
+  integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -2352,6 +2362,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-chartjs-2@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz#2a123df16d3a987c54eb4e810ed766d3c03adf8d"
+  integrity sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==
+
 react-dom@18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"