bugfix: corrigiu outros bugs relacionados ao escobo global de css

caronae · May 25, 2024 · 059b682 · 059b682
1 parent e2f92c7
commit 059b682
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/src/components/ComoOAppFunciona/ComoOAppFunciona.module.css b/src/components/ComoOAppFunciona/ComoOAppFunciona.module.css
@@ -1,14 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-* {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    color: rgba(255, 255, 255, 1);
-}
-
 .mainContainer {
     position: relative;
     display: flex;
@@ -22,28 +14,29 @@
     padding: 80px;
 }
 
+
 .listContainer {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 50px;
-    counter-reset: counter;
+    counter-reset: cafCounter;
 }
 
-ol {
+.listContainer ol {
     position: relative;
     list-style: none;
 }
 
-ol li {
-    counter-increment: counter;
+.listContainer ol li {
+    counter-increment: cafCounter;
     margin-top: 20px;
     margin-bottom: 20px;
     margin-left: 80px;
 }
 
 .listContainer h2::before {
-    content: counter(counter) "";
+    content: counter(cafCounter);
     display: inline-block;
     position: absolute;
     left: 0px;
@@ -56,27 +49,28 @@ ol li {
     font-weight: 900;
     text-align: center;
     line-height: 50px;
+    color: rgba(255, 255, 255, 1);
 }
 
-h1, h2 {
+.listContainer h1, .listContainer h2 {
     font-family: "Poppins", sans-serif;
+    color: rgba(255, 255, 255, 1);
 }
 
-h1 {
+.listContainer h1 {
     font-weight: 700;
     font-size: 32px;
 }
 
-h2 {
+.listContainer h2 {
     font-weight: 500;
     font-size: 24px;
 }
 
-p {
+.listContainer p {
     font-family: "DM Sans", sans-serif;
     font-size: 14px;
     font-weight: 400;
     text-justify: justify;
+    color: rgba(255, 255, 255, 1);
 }
-
-
diff --git a/src/components/ComoOAppFunciona/index.jsx b/src/components/ComoOAppFunciona/index.jsx
@@ -6,28 +6,28 @@ const ComoOAppFunciona = () => {
     <div className={ styles.mainContainer }>
 
       <div className={ styles.listContainer }>
-        <h1>Como o app funciona?</h1>
-        <ol className={ styles.instructions }>
+        <h1 className= {styles.listTitle }>Como o app funciona?</h1>
+        <ol>
 
           <li>
-            <h2><span className={ styles.counter }/>Baixe o aplicativo</h2>
-            <p>
+            <h2 className={ styles.listItem }>Baixe o aplicativo</h2>
+            <p className={ styles.listText }>
               Baixe o aplicativo Caronaê na loja de aplicativos do seu
               dispositivo móvel (disponível para iOS e Android);
             </p>
           </li>
 
           <li>
-            <h2><span className={ styles.counter }/>Faça seu cadastro</h2>
-            <p>
+            <h2 className={ styles.listItem }>Faça seu cadastro</h2>
+            <p className={ styles.listText }>
               Faça o seu cadastro no aplicativo, seja como motorista ou
               passageiro, preenchendo suas informações de contato;
             </p>
           </li>
 
           <li>
-            <h2><span className={ styles.counter }/>Peça ou crie uma carona</h2>
-            <p>
+            <h2 className={ styles.listItem }>Peça ou crie uma carona</h2>
+            <p className={ styles.listText }>
               Para pedir uma carona, insira o ponto de partida e destino e o
               app sugere caronas. Para motoristas, defina o trajeto, horários
               e combine local e horário com o passageiro.