feat: update Graficos page,

enhancing the readability through the changes in CSS class names, see also: #12
64J0 · May 8, 2021 · 48e5385 · 48e5385
1 parent 83652a6
commit 48e5385
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 49 deletions.
diff --git 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,17 +114,19 @@ const GraficosPage: React.FC = () => {
             />
           </div>
 
-          <div>
+          <div className={styles['graphic__form-section']}>
             <label htmlFor="vertical-data">Dados de y:</label>
             <textarea
               id="vertical-data"
               value={verticalData}
               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,20 +136,25 @@ const GraficosPage: React.FC = () => {
             />
           </div>
 
-          <div>
+          <div className={styles['graphic__form-section']}>
             <label htmlFor="horizontal-data">Dados de x:</label>
             <textarea
               id="horizontal-data"
               value={horizontalData}
               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
@@ -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;
   }