From 6401a7e42eedf0cfea4ca910a1ad6a7eb77eb673 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sat, 17 Nov 2018 00:07:12 +0900
Subject: [PATCH] Show benefits for supporters

---
 pages/shop/shop.pixy    | 33 +++++++++++++++++++++++++++++++++
 pages/shop/shop.scarlet | 33 ++++++++++++++++++++++++++++++++-
 scripts/Actions/Shop.ts | 12 ++++++++++++
 3 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/pages/shop/shop.pixy b/pages/shop/shop.pixy
index ee5dcdbb..953409b3 100644
--- a/pages/shop/shop.pixy
+++ b/pages/shop/shop.pixy
@@ -6,6 +6,39 @@ component Shop(items []*arn.ShopItem, itemPopularity map[string]int, user *arn.U
 	.shop-items
 		each item in items
 			ShopItem(item, itemPopularity[item.ID])
+	
+	#pro-benefits-footer.buttons.mountable
+		button.pro-benefits-button.action(data-action="toggleFade", data-trigger="click", data-element-id="pro-benefits")
+			RawIcon("question-circle")
+			p View benefits of PRO accounts
+	
+	#pro-benefits.fade.fade-out
+		h3.pro-benefits-header.mountable PRO accounts let you...
+
+		ul
+			li.pro-benefit.mountable
+				Icon("check")
+				span Access the dark theme
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span Customize your cover image
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span Secure a spot on the supporters page
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span Show a star near your avatar
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span Receive the supporter role on the Discord server
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span ...and many more luxury features in the future.
 
 component ShopTabs(user *arn.User)
 	.tabs
diff --git a/pages/shop/shop.scarlet b/pages/shop/shop.scarlet
index 063bd709..35def9a9 100644
--- a/pages/shop/shop.scarlet
+++ b/pages/shop/shop.scarlet
@@ -59,4 +59,35 @@ const item-color-anime-support-ticket = hsl(217, 64%, 50%)
 
 	.icon-diamond
 		margin-left 0.3rem
-		margin-right 0
\ No newline at end of file
+		margin-right 0
+
+#pro-benefits-footer
+	margin-top 3rem
+
+.pro-benefits-button
+	vertical
+	color hsla(text-color-h, text-color-s, text-color-l, 0.5)
+	background transparent
+	border none
+	font-size 0.8rem
+
+	:hover
+		background transparent
+		border none
+		color link-hover-color
+
+#pro-benefits
+	margin 0 auto
+	margin-top 2rem
+	width 100%
+	max-width 400px
+
+.pro-benefits-header
+	text-align center
+	margin-bottom 1rem
+
+.pro-benefit
+	list-style-type none
+
+	.icon
+		color like-color
\ No newline at end of file
diff --git a/scripts/Actions/Shop.ts b/scripts/Actions/Shop.ts
index c650efeb..9fa9b4e0 100644
--- a/scripts/Actions/Shop.ts
+++ b/scripts/Actions/Shop.ts
@@ -33,6 +33,18 @@ export function chargeUp(arn: AnimeNotifier, button: HTMLElement) {
 	.then(() => arn.loading(false))
 }
 
+// Toggle fade
+export function toggleFade(arn: AnimeNotifier, button: HTMLElement) {
+	let elementId = button.dataset.elementId
+	let element = document.getElementById(elementId)
+
+	if(element.classList.contains("fade-out")) {
+		element.classList.remove("fade-out")
+	} else {
+		element.classList.add("fade-out")
+	}
+}
+
 // Buy item
 export function buyItem(arn: AnimeNotifier, button: HTMLElement) {
 	let itemId = button.dataset.itemId