From 139d6308e290fbd322a882508af6038066760913 Mon Sep 17 00:00:00 2001
From: XenosG <x.e.n.o.s.s.g.g@gmail.com>
Date: Sat, 20 Jan 2024 19:46:08 +0200
Subject: [PATCH] fix: fixed achievement widget fix: fixed progress component
 colors to work with new color system

---
 .../components/ui/progress/progress.svelte    |  4 +-
 src/routes/homepage/+page.svelte              | 82 +++++++++----------
 2 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/ui/progress/progress.svelte b/src/lib/components/ui/progress/progress.svelte
index de5fcac7..e3555c90 100644
--- a/src/lib/components/ui/progress/progress.svelte
+++ b/src/lib/components/ui/progress/progress.svelte
@@ -11,11 +11,11 @@
 </script>
 
 <ProgressPrimitive.Root
-	class={cn('relative h-4 w-full overflow-hidden rounded-full bg-fill/20', className)}
+	class={cn('relative h-4 w-full overflow-hidden rounded-full bg-primary/20', className)}
 	{...$$restProps}
 >
 	<div
-		class="h-full w-full flex-1 bg-fill transition-all"
+		class="h-full w-full flex-1 bg-primary transition-all"
 		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
 	/>
 </ProgressPrimitive.Root>
diff --git a/src/routes/homepage/+page.svelte b/src/routes/homepage/+page.svelte
index 454204e5..67dde2b9 100644
--- a/src/routes/homepage/+page.svelte
+++ b/src/routes/homepage/+page.svelte
@@ -168,11 +168,11 @@ New Characters
 			</Card.Header>
 			<Card.Content>
 				<div class="flex flex-row justify-between">
-					<Text type="large">Latest achievement:</Text>
+					<Text type="p">Latest achievement:</Text>
 					<Text type="p">{mockAchievement.name}</Text>
 				</div>
 				<div class="flex flex-row justify-between mt-4">
-					<Text type="large">Overall progress:</Text>
+					<Text type="p">Overall progress:</Text>
 					<Text type="p">{achievementsDone}/{achievementsTotal}</Text>
 				</div>
 				<Progress value={(achievementsDone / achievementsTotal) * 100} class="mt-1.5"></Progress>
@@ -191,60 +191,60 @@ New Characters
 			</Card.Header>
 			<Card.Content>
 				<div class="flex flex-row justify-between items-center">
-					<Text type="large">Character Banner</Text>
+					<Text type="p">Character Banner</Text>
 					<div class="flex flex-row">
-						<div
-							class="text-amber-500 w-14 h-14 flex justify-center items-center rounded-md bg-fill/[.03] mr-5"
-						>
-							<Text type="large">
+						<Text type="p">
+							<div
+								class="text-amber-500 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03] mr-5"
+							>
 								{characterPity[0]}
-							</Text>
-						</div>
-						<div
-							class="text-violet-400 w-14 h-14 flex justify-center items-center rounded-md bg-fill/[.03]"
-						>
-							<Text type="large">
+							</div>
+						</Text>
+						<Text type="p">
+							<div
+								class="text-violet-400 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03]"
+							>
 								{characterPity[1]}
-							</Text>
-						</div>
+							</div>
+						</Text>
 					</div>
 				</div>
 				<div class="flex flex-row justify-between items-center mt-4">
-					<Text type="large">Weapon Banner</Text>
+					<Text type="p">Weapon Banner</Text>
 					<div class="flex flex-row">
-						<div
-							class="text-amber-500 w-14 h-14 flex justify-center items-center rounded-md bg-fill/[.03] mr-5"
-						>
-							<Text type="large">
+						<Text type="p">
+							<div
+								class="text-amber-500 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03] mr-5"
+							>
 								{weaponPity[0]}
-							</Text>
-						</div>
-						<div
-							class="text-violet-400 w-14 h-14 flex justify-center items-center rounded-md bg-fill/[.03]"
-						>
-							<Text type="large">
+							</div>
+						</Text>
+						<Text type="p">
+							<div
+								class="text-violet-400 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03]"
+							>
 								{weaponPity[1]}
-							</Text>
-						</div>
+							</div>
+						</Text>
 					</div>
 				</div>
 				<div class="flex flex-row justify-between items-center mt-4">
-					<Text type="large">Standart Banner</Text>
+					<Text type="p">Standart Banner</Text>
 					<div class="flex flex-row">
-						<div
-							class="text-amber-500 w-14 h-14 flex justify-center items-center rounded-md bg-fill/[.03] mr-5"
-						>
-							<Text type="large">
+						<Text type="p">
+							<div
+								class="text-amber-500 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03] mr-5"
+							>
 								{standartPity[0]}
-							</Text>
-						</div>
-						<div
-							class="text-violet-400 w-14 h-14 flex justify-center items-center rounded-md bg-fill/[.03]"
-						>
-							<Text type="large">
+							</div>
+						</Text>
+						<Text type="p">
+							<div
+								class="text-violet-400 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03]"
+							>
 								{standartPity[1]}
-							</Text>
-						</div>
+							</div>
+						</Text>
 					</div>
 				</div>
 			</Card.Content>