fix: fixed achievement widget

fix: fixed progress component colors to work with new color system
dval-in · Jan 20, 2024 · 139d630 · 139d630
1 parent 7116474
commit 139d630
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 43 deletions.
diff --git 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
@@ -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>