style: improve contrast errors, missing headers

Hugomndez · Aug 21, 2022 · bd6bc70 · bd6bc70
1 parent b5629bf
commit bd6bc70
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 19 deletions.
diff --git a/src/components/Exchange/Exchange.module.css b/src/components/Exchange/Exchange.module.css
@@ -33,7 +33,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.6rem;
-  color: #757575;
+  color: var(--subtitle);
 }
 
 .tables {
@@ -96,14 +96,14 @@
   font-size: 1.6rem;
   font-weight: 500;
   line-height: 1.9rem;
-  color: #b5b0ac;
+  color: var(--table-name);
 }
 
 .tableRight {
   font-size: 1.4rem;
   font-weight: normal;
   line-height: 1.7rem;
-  color: #757575;
+  color: var(--subtitle);
 }
 
 .tableTopLeft {

diff --git a/src/components/Exchange/Exchange.tsx b/src/components/Exchange/Exchange.tsx
@@ -25,7 +25,7 @@ const Exchange = () => {
       </div>
       <section className={styles.tables}>
         <div className={styles.currencyTable}>
-          <p className={styles.currencyTableTitle}>{t('coins')}</p>
+          <h3 className={styles.currencyTableTitle}>{t('coins')}</h3>
           <div className={styles.currencyTableContainer}>
             <table className={styles.table}>
               <tbody>
@@ -101,7 +101,7 @@ const Exchange = () => {
           </div>
         </div>
         <div className={styles.comisionesTable}>
-          <p className={styles.comisionesTableTitle}>{t('commissions')}</p>
+          <h3 className={styles.comisionesTableTitle}>{t('commissions')}</h3>
           <div className={styles.comisionesTableContainer}>
             <table className={styles.table}>
               <tbody>

diff --git a/src/components/Plans/Plans.module.css b/src/components/Plans/Plans.module.css
@@ -25,7 +25,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.8rem;
-  color: #757575;
+  color: var(--subtitle);
 }
 .sliderContainer {
   display: flex;
@@ -102,7 +102,7 @@
   font-size: 1.2rem;
   font-style: normal;
   font-weight: 500;
-  color: #757575;
+  color: var(--subtitle);
 }
 .cardCta {
   width: 150px;

diff --git a/src/components/Plans/Plans.tsx b/src/components/Plans/Plans.tsx
@@ -16,9 +16,9 @@ const Plans = () => {
         <article className={styles.cardContainer}>
           <div>
             <h3 className={styles.cardTitle}>{t('plans.0.payment')}</h3>
-            <p className={styles.cardPrice}>
+            <h4 className={styles.cardPrice}>
               <span>$</span> {t('plans.0.price')}
-            </p>
+            </h4>
             <p className={styles.cardSaving}>* {t('plans.0.description')}</p>
             <button className={styles.cardCta}>
               {t('plans.0.callToAction')}
@@ -36,9 +36,9 @@ const Plans = () => {
           <p className={styles.recommended}>{t('recommended')}</p>
           <div>
             <h3 className={styles.cardTitle}>{t('plans.1.payment')}</h3>
-            <p className={styles.cardPrice}>
+            <h4 className={styles.cardPrice}>
               <span>$</span> {t('plans.1.price')}
-            </p>
+            </h4>
             <p className={styles.cardSaving}>* {t('plans.1.description')}</p>
             <button className={styles.cardCta}>
               {t('plans.1.callToAction')}
@@ -55,9 +55,9 @@ const Plans = () => {
         <article className={styles.cardContainer}>
           <div>
             <h3 className={styles.cardTitle}>{t('plans.2.payment')}</h3>
-            <p className={styles.cardPrice}>
+            <h4 className={styles.cardPrice}>
               <span>$</span> {t('plans.2.price')}
-            </p>
+            </h4>
             <p className={styles.cardSaving}>* {t('plans.2.description')}</p>
             <button className={styles.cardCta}>
               {t('plans.2.callToAction')}

diff --git a/src/components/ProductDetails/ProductDetails.module.css b/src/components/ProductDetails/ProductDetails.module.css
@@ -33,7 +33,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.8rem;
-  color: #808080;
+  color: var(--card-subtitle);
 }
 .card {
   width: 90%;
@@ -64,7 +64,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.8rem;
-  color: #808080;
+  color: var(--card-text);
 }
 
 @media screen and (min-width: 1000px) {

diff --git a/src/components/ProductDetails/ProductDetails.tsx b/src/components/ProductDetails/ProductDetails.tsx
@@ -28,7 +28,7 @@ const ProductDetails = () => {
             height={20}
             className={styles.cardIcon}
           />
-          <p className={styles.cardTitle}>{t('details.0.name')}</p>
+          <h3 className={styles.cardTitle}>{t('details.0.name')}</h3>
           <p className={styles.cardBody}>{t('details.0.description')}</p>
         </article>
         <article className={styles.card}>
@@ -39,7 +39,7 @@ const ProductDetails = () => {
             height={20}
             className={styles.cardIcon}
           />
-          <p className={styles.cardTitle}>{t('details.1.name')}</p>
+          <h3 className={styles.cardTitle}>{t('details.1.name')}</h3>
           <p className={styles.cardBody}>{t('details.1.description')}</p>
         </article>
         <article className={styles.card}>
@@ -50,7 +50,7 @@ const ProductDetails = () => {
             height={20}
             className={styles.cardIcon}
           />
-          <p className={styles.cardTitle}>{t('details.2.name')}</p>
+          <h3 className={styles.cardTitle}>{t('details.2.name')}</h3>
           <p className={styles.cardBody}>{t('details.2.description')}</p>
         </article>
         <article className={styles.card}>
@@ -61,7 +61,7 @@ const ProductDetails = () => {
             height={20}
             className={styles.cardIcon}
           />
-          <p className={styles.cardTitle}>{t('details.3.name')}</p>
+          <h3 className={styles.cardTitle}>{t('details.3.name')}</h3>
           <p className={styles.cardBody}>{t('details.3.description')}</p>
         </article>
       </section>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -7,6 +7,10 @@
   --warm-black: #201e1c;
   --black: #282623;
   --grey: #bababa;
+  --subtitle: #717171; /*#757575*/
+  --table-name: #787572; /*#b5b0ac*/
+  --card-subtitle: #878787; /*#808080*/
+  --card-text: #8e8e8e; /*#808080*/
   --off-white: #faf8f7;
   --just-white: #ffffff;