tmp new icons

Author: sebastientromp

libs/website/profile/src/lib/achievements/website-profile-achievements-overview.component.ts

@@ -9,6 +9,9 @@ import { getAchievementCategories } from '../+state/website/profile.selectors';
 	selector: 'website-profile-achievements-overview',
 	styleUrls: [`./website-profile-achievements-overview.component.scss`],
 	template: `
+	<div class="card achievement-points">
+
+	</div>
 		<div class="card achievement" *ngFor="let category of categories$ | async">
 			<achievement-category-view
 				[empty]="category.empty"

libs/website/profile/src/lib/collection/website-profile-collection-overview.component.scss

@@ -12,15 +12,35 @@
 	padding: 20px;
 
 	.title {
-		font-size: 24px;
+		color: var(--default-title-color);
+		text-align: center;
+		position: relative;
+		margin: auto;
+		flex-grow: 0;
+		flex-shrink: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin-right: 20px;
+		margin-left: 20px;
+		max-width: calc(100% - 40px);
+	}
+
+	.icon {
+		height: 100px;
+		width: 101px;
+		flex-grow: 0;
+		flex-shrink: 0;
+		margin-bottom: 5px;
+		color: var(--default-title-color);
+		--icon-color: var(--default-title-color);
 	}
 
 	.progress-container {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
-
 	}
 
 	.progress {
@@ -30,7 +50,6 @@
 
 		&.golden {
 			color: var(--default-title-color);
-
 		}
 	}
 }

libs/website/profile/src/lib/collection/website-profile-collection-overview.component.ts

@@ -7,6 +7,7 @@ import { ExtendedProfileSet } from '../+state/website/profile.models';
 	template: `
 		<div class="mode standard">
 			<div class="title">{{ title }}</div>
+			<img class="icon" [src]="setIcon" />
 			<div class="progress-container">
 				<div class="progress normal">{{ progressNormal() }}</div>
 				<div class="progress golden">{{ progressGolden() }}</div>
@@ -18,6 +19,10 @@ import { ExtendedProfileSet } from '../+state/website/profile.models';
 export class WebsiteProfileCollectionOverviewComponent {
 	@Input() sets: readonly ExtendedProfileSet[] | null;
 	@Input() title: string;
+	@Input() set mode(value: 'standard' | 'wild') {
+		this.setIcon = `https://static.zerotoheroes.com/hearthstone/asset/firestone/images/collection/collection_${value}.webp`;
+	}
+	setIcon: string;
 
 	progressNormal(): string {
 		const totalCollected =

libs/website/profile/src/lib/overview/website-profile-overview.component.ts

@@ -15,13 +15,19 @@ import { getSets } from '../+state/website/profile.selectors';
 				<div class="card collection standard">
 					<website-profile-collection-overview
 						class="mode standard"
+						[mode]="'standard'"
 						[title]="'Standard'"
 						[sets]="standardSets$ | async"
 					>
 					</website-profile-collection-overview>
 				</div>
 				<div class="card collection wild">
-					<website-profile-collection-overview class="mode wild" [title]="'Wild'" [sets]="wildSets$ | async">
+					<website-profile-collection-overview
+						class="mode wild"
+						[mode]="'wild'"
+						[title]="'Wild'"
+						[sets]="wildSets$ | async"
+					>
 					</website-profile-collection-overview>
 				</div>
 				<website-profile-achievements-overview></website-profile-achievements-overview>