feat: ocupacao select register

ctrlmais · Apr 7, 2022 · f71a453 · f71a453
1 parent 4fa09e0
commit f71a453
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 12 deletions.
diff --git a/src/components/Ocupacao/Ocupacao.module.scss b/src/components/Ocupacao/Ocupacao.module.scss
@@ -14,8 +14,23 @@
 }
 
 .active {
-  color: var(--orange) !important;
-  text-decoration: underline;
+  border-bottom: 2px solid var(--orange);
+  width: 8rem;
+
+  p {
+    color: var(--orange) !important;
+    margin-bottom: 5px;
+  }
+}
+
+.none {
+  border-bottom: 2px solid var(--gray);
+  width: 8rem;
+
+  p {
+    color: var(--gray) !important;
+    margin-bottom: 5px;
+  }
 }
 
 @media screen and (min-width: 839px) {
@@ -35,7 +50,12 @@
   }
 
   .active {
-    color: var(--orange) !important;
-    text-decoration: underline;
+    border-bottom: 2px solid var(--orange);
+    width: 8rem;
+
+    p {
+      color: var(--orange) !important;
+      margin-bottom: 5px;
+    }
   }
 }
diff --git a/src/components/Ocupacao/index.tsx b/src/components/Ocupacao/index.tsx
@@ -8,19 +8,23 @@ export function Ocupacao() {
   return (
     <div className={styles.ocupacao}>
       {ocupacao === 'cliente' ? (
-        <p className={styles.active} onClick={() => setOcupacao('cliente')}>
-          Sou cliente
-        </p>
+        <div className={styles.active} onClick={() => setOcupacao('cliente')}>
+          <p>Sou cliente</p>
+        </div>
       ) : (
-        <p onClick={() => setOcupacao('cliente')}>Sou cliente</p>
+        <div onClick={() => setOcupacao('cliente')} className={styles.none}>
+          <p>Sou cliente</p>
+        </div>
       )}
 
       {ocupacao === 'barbeiro' ? (
-        <p className={styles.active} onClick={() => setOcupacao('barbeiro')}>
-          Sou barbeiro
-        </p>
+        <div className={styles.active} onClick={() => setOcupacao('barbeiro')}>
+          <p>Sou barbeiro</p>
+        </div>
       ) : (
-        <p onClick={() => setOcupacao('barbeiro')}>Sou barbeiro</p>
+        <div onClick={() => setOcupacao('barbeiro')} className={styles.none}>
+          <p>Sou barbeiro</p>
+        </div>
       )}
     </div>
   );