fix: negative progress style

JorgePeniaranda · Feb 20, 2024 · 1619e13 · 1619e13
1 parent c50e62c
commit 1619e13
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/src/components/molecules/cards/stats-card/index.tsx b/src/components/molecules/cards/stats-card/index.tsx
@@ -20,7 +20,7 @@ export default function InfoCard ({ title, value, progress, classname, icon, ico
         <article>
             <h2>{title}</h2>
             <b>{value}</b>
-            <p className={style.indicator}><span className={spanClasses}>{progress}</span> desde ayer</p>
+            <p className={style.indicator}><span className={spanClasses}>{Math.abs(progress)}</span> desde ayer</p>
         </article>
         {
             icon !== undefined && (

diff --git a/src/components/molecules/cards/stats-card/styles.module.scss b/src/components/molecules/cards/stats-card/styles.module.scss
@@ -35,6 +35,9 @@
                 }
                 &.negative{
                     color: oklch(63.06% 0.226 21.66);
+                    &::before{
+                        content: '-';
+                    }
                 }
                 &::after{
                     content: '%';

diff --git a/src/components/templates/dashboard/money/index.tsx b/src/components/templates/dashboard/money/index.tsx
@@ -18,7 +18,7 @@ export default function MoneyTemplate ({ currentMoney, earnedMoney, spentMoney,
         <div className='flex flex-wrap gap-7'>
             <InfoCard title='Tu dinero' value={`${Currency}$${currentMoney}`} progress={10} classname='flex-1' icon={cardsIcons.Money.icon} iconBGColor={cardsIcons.Money.color}/>
             <InfoCard title='Tus ganancias' value={`${Currency}$${earnedMoney}`} progress={10} classname='flex-1' icon={cardsIcons.Graph.icon} iconBGColor={cardsIcons.Graph.color}/>
-            <InfoCard title='Dinero gastado' value={`${Currency}$${spentMoney}`} progress={10} classname='flex-1' icon={cardsIcons.Expenses.icon} iconBGColor={cardsIcons.Expenses.color}/>
+            <InfoCard title='Dinero gastado' value={`${Currency}$${spentMoney}`} progress={-10} classname='flex-1' icon={cardsIcons.Expenses.icon} iconBGColor={cardsIcons.Expenses.color}/>
         </div>
         <section className='flex gap-7 mt-7'>
             <article className='flex-[2] bg-white rounded-2xl shadow-[0_0_2rem_0_rgba(136,152,170,.15)] p-5 gap-10'>