fix: 🐛 ensure that icons have correctly bg

neopromic · Nov 12, 2024 · ec7672f · ec7672f
1 parent 2349d3e
commit ec7672f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/app/(authenticated)/dashboard/_components/percentage-item.tsx b/app/(authenticated)/dashboard/_components/percentage-item.tsx
@@ -9,7 +9,7 @@ const PercentageItem = ({ icon, title, value }: PercentageItemProps) => {
     <div className="flex items-center justify-between">
       {/* Icone */}
       <div className="flex items-center gap-2">
-        {icon}
+        <div className="rounded-lg bg-white bg-opacity-[3%] p-2">{icon}</div>
         <p>{title}</p>
       </div>
       <p className="text-sm font-bold">{value}%</p>

diff --git a/app/(authenticated)/dashboard/_components/summar-card.tsx b/app/(authenticated)/dashboard/_components/summar-card.tsx
@@ -1,6 +1,7 @@
 import AddTransactionButton from "@/app/_components/add-transaction-button";
 import { Card, CardContent, CardHeader } from "@/app/_components/ui/card";
 import { cn } from "@/app/_lib/utils";
+import formatCurrency from "@/app/_utils/currency";
 
 interface SummaryCardProps {
   title: string;
@@ -18,7 +19,7 @@ const SummaryCard = ({
   return (
     <Card className={`${size === "lg" ? "bg-white bg-opacity-10" : ""}`}>
       <CardHeader className="flex-row items-center gap-2">
-        {icon}
+        <div className="rounded-lg bg-white bg-opacity-[3%] p-2">{icon}</div>
         <p
           className={cn(
             "text-muted-foreground",
@@ -30,10 +31,7 @@ const SummaryCard = ({
       </CardHeader>
       <CardContent className="flex justify-between">
         <p className={`font-bold ${size === "sm" ? "text-2xl" : "text-4xl"}`}>
-          {Intl.NumberFormat("pt-BR", {
-            style: "currency",
-            currency: "BRL",
-          }).format(Number(amount))}
+          {formatCurrency(Number(amount))}
         </p>
         {size === "lg" && <AddTransactionButton />}
       </CardContent>