From cb9c309ef030152b17756282d3d7f320f4d45986 Mon Sep 17 00:00:00 2001
From: 64J0 <vinigaio97@gmail.com>
Date: Sat, 8 May 2021 17:37:06 -0300
Subject: [PATCH] feat: update Graficos page, enhancing the readability through
 the changes in CSS class names, see also: #12

---
 pages/graficos/index.tsx          | 32 +++++++++------
 pages/graficos/styles.module.scss | 66 +++++++++++++------------------
 2 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/pages/graficos/index.tsx b/pages/graficos/index.tsx
index 49b0d7d..399aba7 100644
--- a/pages/graficos/index.tsx
+++ b/pages/graficos/index.tsx
@@ -87,11 +87,14 @@ const GraficosPage: React.FC = () => {
         <title>Gráficos</title>
       </Head>
 
-      <div className={styles.container}>
+      <div className={styles.graphic}>
         <h1>Gere um Gráfico</h1>
 
-        <form onSubmit={(e) => e.preventDefault()}>
-          <div>
+        <form
+          className={styles['graphic__form']}
+          onSubmit={(e) => e.preventDefault()}
+        >
+          <div className={styles['graphic__form-section']}>
             <label htmlFor="graph-title">Título do gráfico:</label>
             <input
               id="graph-title"
@@ -101,7 +104,7 @@ const GraficosPage: React.FC = () => {
             />
           </div>
 
-          <div>
+          <div className={styles['graphic__form-section']}>
             <label htmlFor="vertical-name">Título vertical:</label>
             <input
               id="vertical-name"
@@ -111,7 +114,7 @@ const GraficosPage: React.FC = () => {
             />
           </div>
 
-          <div>
+          <div className={styles['graphic__form-section']}>
             <label htmlFor="vertical-data">Dados de y:</label>
             <textarea
               id="vertical-data"
@@ -119,9 +122,11 @@ const GraficosPage: React.FC = () => {
               onChange={(e) => setVerticalData(e.target.value)}
             />
           </div>
-          <span>Exemplo: 0.2, 1.3, 3, 4.123124</span>
+          <span className={styles['graphic__tips']}>
+            Exemplo: 0.2, 1.3, 3, 4.123124
+          </span>
 
-          <div>
+          <div className={styles['graphic__form-section']}>
             <label htmlFor="horizontal-name">Título horizontal:</label>
             <input
               id="horizontal-name"
@@ -131,7 +136,7 @@ const GraficosPage: React.FC = () => {
             />
           </div>
 
-          <div>
+          <div className={styles['graphic__form-section']}>
             <label htmlFor="horizontal-data">Dados de x:</label>
             <textarea
               id="horizontal-data"
@@ -139,12 +144,17 @@ const GraficosPage: React.FC = () => {
               onChange={(e) => setHorizontalData(e.target.value)}
             />
           </div>
-          <span>Exemplo: 0, 1, 3, 4</span>
+          <span className={styles['graphic__tips']}>
+            Exemplo: 0, 1, 3, 4
+          </span>
 
           <button
-            onClick={handleGraph}
+            className={styles['graphic__button']}
             type="button"
-          >Gerar!</button>
+            onClick={handleGraph}
+          >
+            Gerar!
+          </button>
         </form>
 
         <canvas ref={canvasRef}></canvas>
diff --git a/pages/graficos/styles.module.scss b/pages/graficos/styles.module.scss
index e2f0f73..3d93c98 100644
--- a/pages/graficos/styles.module.scss
+++ b/pages/graficos/styles.module.scss
@@ -1,53 +1,43 @@
-.container {
+.graphic {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+}
 
-  form {
-    width: 100%;
-  }
-
-  div {
-    display: flex;
-    flex-direction: row;
-
-    margin: 1rem auto;
-    width: 80%;
-  }
+.graphic__form {
+  width: 100%;
+}
 
-  label {
-    width: 10rem;
-  }
+.graphic__form-section {
+  display: grid;
+  grid-template-columns: 10rem 1fr;
 
-  input,
-  textarea {
-    flex: 1;
-  }
+  width: 80%;
+  margin: 1rem auto;
+}
 
-  span {
-    display: block;
-    margin: 1rem auto;
-    width: 80%;
-    text-align: right;
-    color: rgba(0, 0, 0, 0.6);
-  }
+.graphic__tips {
+  display: block;
+  margin: 1rem auto;
+  width: 80%;
+  text-align: right;
+}
 
-  button {
-    font-size: 1.2rem;
-    height: 3rem;
-    width: 8rem;
+.graphic__button {
+  font-size: 1.2rem;
+  height: 3rem;
+  width: 8rem;
 
-    border: none;
-    border-radius: 4px;
-    background-color: black;
-    transform: background-color 1s;
-    color: white;
+  border: none;
+  border-radius: 4px;
+  background-color: black;
+  transform: background-color 1s;
+  color: white;
 
-    margin-bottom: 1rem;
-  }
+  margin-bottom: 1rem;
 
-  button:hover {
+  &:hover {
     cursor: pointer;
     background-color: #222222;
   }