feat: update Cores page,

enhancing the readability through the css classes change, see also: #12
64J0 · Oct 23, 2021 · cc5944a · cc5944a
1 parent bca4893
commit cc5944a
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 46 deletions.
diff --git a/pages/cores/ColorSection/index.tsx b/pages/cores/ColorSection/index.tsx
@@ -22,14 +22,17 @@ const ColorSection: React.FC = () => {
   }, [liElement.current, pickedColor, pElement.current]);
 
   return (
-    <li ref={liElement}>
+    <li ref={liElement} className={styles['color-section']}>
       <button
         type="button"
-        className={styles.container}
+        className={styles['color-section__button']}
         onClick={handleBtnClick}
       >
-        <p ref={pElement}>{pickedColor}</p>
+        <p ref={pElement} className={styles['color-section__text']}>
+          {pickedColor}
+        </p>
         <input
+          className={styles['color-section__picker']}
           type="color"
           name="colorPicker"
           onChange={(e) => setPickedColor(e.target.value)}

diff --git a/pages/cores/ColorSection/styles.module.scss b/pages/cores/ColorSection/styles.module.scss
@@ -1,28 +1,31 @@
-.container {
+.color-section__button {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-
+  
   margin: 0;
   padding: 0;
   height: 6rem;
   width: 100%;
   cursor: pointer;
 
-  p {
-    font-family: monospace;
-    font-size: 2rem;
-    font-weight: bold;
-    padding: 0 1rem;
-    flex: 1;
-  }
+  border: none;
+  background-color: transparent;
+}
+
+.color-section__text {
+  font-family: monospace;
+  font-size: 2rem;
+  font-weight: bold;
+  padding: 0 1rem;
+  flex: 1;
+}
 
-  input[type="color"] {
-    margin: 0;
-    padding: 0;
-    visibility: hidden;
-    width: 0;
-    height: 0;
-  }
+.color-section__picker {
+  margin: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
 }
diff --git a/pages/cores/index.tsx b/pages/cores/index.tsx
@@ -21,18 +21,19 @@ const Cores: React.FC = () => {
         <title>Paleta de cores</title>
       </Head>
 
-      <div className={styles.container}>
+      <div className={styles['color']}>
         <h1>Paleta de cores</h1>
 
-        <ul>
-          {
-            childArray.map((element) => {
-              return (<ColorSection key={element} />);
-            })
-          }
+        <ul className={styles['color__list']}>
+          {childArray.map((element) => {
+            return (
+              <ColorSection key={element} />
+            );
+          })}
         </ul>
 
         <button
+          className={styles['color__button']}
           type="button"
           onClick={handleAddNewElement}
         >

diff --git a/pages/cores/styles.module.scss b/pages/cores/styles.module.scss
@@ -1,32 +1,31 @@
-.container {
+.color {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+}
 
-  ul {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    margin-bottom: 2rem;
-    padding: 0;
-    list-style: none;
-    width: 100%;
-  }
+.color__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  margin-bottom: 2rem;
+  padding: 0;
+  width: 100%;
+}
 
-  button[type="button"] {
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background-color: transparent;
+.color__button {
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: transparent;
 
-    svg {
-      cursor: pointer;
-      transition: transform 3s;
-    }
+  svg {
+    cursor: pointer;
+    transition: transform 3s;
   }
 
-  button[type="button"]:hover {
+  &:hover {
     svg {
       color: #333;
       transform: rotateZ(360deg);