From a81ae13afbef137cb5f28acdfcec1fd0537f692c Mon Sep 17 00:00:00 2001
From: blattersturm <peachypies@protonmail.ch>
Date: Sat, 14 Aug 2021 07:26:45 +0200
Subject: [PATCH] tweak(ext/cfx-ui): add tooltips explaining premium levels

---
 .../components/detail/servers-detail.component.html |  2 ++
 .../components/detail/servers-detail.component.ts   |  4 ++++
 .../list/servers-list-item.component.html           |  2 ++
 .../list/servers-list-item.component.scss           |  1 +
 .../components/list/servers-list-item.component.ts  |  4 ++++
 ext/cfx-ui/src/app/servers/servers.service.ts       | 13 +++++++++++++
 6 files changed, 26 insertions(+)

diff --git a/ext/cfx-ui/src/app/servers/components/detail/servers-detail.component.html b/ext/cfx-ui/src/app/servers/components/detail/servers-detail.component.html
index 3c276f568a..012c305040 100644
--- a/ext/cfx-ui/src/app/servers/components/detail/servers-detail.component.html
+++ b/ext/cfx-ui/src/app/servers/components/detail/servers-detail.component.html
@@ -44,6 +44,8 @@
 								[class.ag]="server.premium === 'ag'"
 								[class.au]="server.premium === 'au'"
 								[class.pt]="server.premium === 'pt'"
+								data-balloon-pos="right"
+								[attr.aria-label]="premiumName"
 							>
 								<span>{{ server.premium }}</span>
 							</div>
diff --git a/ext/cfx-ui/src/app/servers/components/detail/servers-detail.component.ts b/ext/cfx-ui/src/app/servers/components/detail/servers-detail.component.ts
index 4303527429..16871a942d 100644
--- a/ext/cfx-ui/src/app/servers/components/detail/servers-detail.component.ts
+++ b/ext/cfx-ui/src/app/servers/components/detail/servers-detail.component.ts
@@ -220,6 +220,10 @@ export class ServersDetailComponent implements OnInit, OnDestroy {
 		});
 	}
 
+	get premiumName() {
+		return this.serversService.getNameForPremium(this.server.premium);
+	}
+
 	apFeedInitialized = false;
 
 	private updateServer() {
diff --git a/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.html b/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.html
index 8dd7cc485c..1c03610924 100644
--- a/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.html
+++ b/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.html
@@ -25,6 +25,8 @@
 		[class.ag]="premium === 'ag'"
 		[class.au]="premium === 'au'"
 		[class.pt]="premium === 'pt'"
+		data-balloon-pos="right"
+		[attr.aria-label]="premiumName"
 	>
 		<span><div>{{ premium }}</div></span>
 	</div>
diff --git a/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.scss b/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.scss
index bdb356766c..5322d5e737 100644
--- a/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.scss
+++ b/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.scss
@@ -92,6 +92,7 @@
 		bottom: 2px;
 
 		width: var(--q4);
+		pointer-events: none;
 
 		z-index: 1;
 
diff --git a/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.ts b/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.ts
index c6065e5eb6..84333c1883 100644
--- a/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.ts
+++ b/ext/cfx-ui/src/app/servers/components/list/servers-list-item.component.ts
@@ -66,6 +66,10 @@ export class ServersListItemComponent implements OnInit, OnChanges, OnDestroy, A
 		return this.rawServer.data.vars.premium;
 	}
 
+	get premiumName() {
+		return this.serversService.getNameForPremium(this.premium);
+	}
+
 	public ngOnInit() {
 		this.hoverIntent = hoverintent(this.elementRef.nativeElement, () => {
 			this.serversService.getServer(this.rawServer.address, true);
diff --git a/ext/cfx-ui/src/app/servers/servers.service.ts b/ext/cfx-ui/src/app/servers/servers.service.ts
index 4f29190e8b..5f38051187 100644
--- a/ext/cfx-ui/src/app/servers/servers.service.ts
+++ b/ext/cfx-ui/src/app/servers/servers.service.ts
@@ -342,6 +342,19 @@ export class ServersService {
 			.catch(() => new PinConfig());
 	}
 
+	getNameForPremium(premium: string) {
+		switch (premium) {
+			case 'pt':
+				return 'Element Club Platinum';
+			case 'au':
+				return 'Element Club Aurum';
+			case 'ag':
+				return 'Element Club Argentum';
+		}
+
+		return '';
+	}
+
 	parseAddress(addr: string): [string, number] {
 		if (!addr) {
 			return null;