From 74e905a2c3f3b6c121bda6a28fd542134416708f Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sun, 4 Mar 2018 17:21:27 +0100
Subject: [PATCH] Improved support page

---
 pages/support/support.pixy               | 35 +++++++++++++++++++++++-
 pages/support/support.scarlet            | 22 +++++++++++----
 patches/add-shop-items/add-shop-items.go | 16 +++--------
 styles/include/config.scarlet            |  3 +-
 4 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/pages/support/support.pixy b/pages/support/support.pixy
index ee4877a3..229e8bac 100644
--- a/pages/support/support.pixy
+++ b/pages/support/support.pixy
@@ -29,4 +29,37 @@ component Support(user *arn.User)
 				RawIcon("star")
 			
 			.feature-card-text
-				p You'll receive PRO account status allowing you to unlock extra features!
\ No newline at end of file
+				p You'll receive PRO account status allowing you to unlock extra features!
+	
+	h1.mountable How does it work?
+
+	.feature-cards.feature-cards-alternative-color
+		a.feature-card.mountable.ajax(href="/charge")
+			.feature-card-icon
+				RawIcon("diamond")
+			
+			p.feature-card-text First, you need to charge up the balance on your account.
+
+		a.feature-card.mountable.ajax(href="/shop")
+			.feature-card-icon
+				RawIcon("shopping-cart")
+			
+			p.feature-card-text Afterwards, go to the shop and buy the item you like.
+
+		a.feature-card.mountable.ajax(href="/inventory")
+			.feature-card-icon
+				RawIcon("briefcase")
+			
+			p.feature-card-text Lastly, activate the freshly bought item in your inventory.
+
+		a.feature-card.mountable.ajax(href="/+" + user.Nick)
+			.feature-card-icon
+				RawIcon("user-circle")
+			
+			p.feature-card-text Confirm the PRO status by visiting your profile.
+	
+	.buttons.support-button-container
+		a.button.support-button.mountable.ajax(href="/charge")
+			Icon("heart")
+			span Support us!
+	
\ No newline at end of file
diff --git a/pages/support/support.scarlet b/pages/support/support.scarlet
index 71676cd1..b3fe6664 100644
--- a/pages/support/support.scarlet
+++ b/pages/support/support.scarlet
@@ -1,22 +1,23 @@
 .feature-cards
-	horizontal
+	horizontal-wrap
 	justify-content space-around
 	max-width 1200px
-	margin 0 auto
-	margin-top content-padding
+	margin content-padding auto
 
 .feature-card
 	vertical
-	flex-basis 250px
+	flex-basis 240px
 	border-radius 5px
 	overflow hidden
 	background ui-background
 	box-shadow shadow-light
 	border 1px solid ui-border-color
+	margin calc(content-padding / 2)
 	default-transition
 
 	:hover
 		box-shadow shadow-medium
+		text-shadow none
 
 .feature-card-icon,
 .feature-card-text
@@ -33,4 +34,15 @@
 	color feature-card-icon-color
 
 .feature-card-text
-	//
\ No newline at end of file
+	color text-color
+
+.feature-cards-alternative-color
+	.feature-card-icon
+		background feature-card-alternative-color
+
+.support-button-container
+	margin-top content-padding
+
+.support-button
+	font-size 2rem
+	padding 1rem 2rem
diff --git a/patches/add-shop-items/add-shop-items.go b/patches/add-shop-items/add-shop-items.go
index 9047070c..3f9bcda9 100644
--- a/patches/add-shop-items/add-shop-items.go
+++ b/patches/add-shop-items/add-shop-items.go
@@ -13,12 +13,10 @@ var items = []*arn.Item{
 
 Includes:
 
-* Browser extension for quick list access
 * Dark theme for the site and extension
 * Special highlight on the forums
-* Access to the VIP channel on Discord
 * PRO star on your profile
-* High priority for your suggestions
+* Access to the VIP channel on Discord
 * Early access to new features`,
 		Icon:       "star",
 		Rarity:     arn.ItemRaritySuperior,
@@ -35,12 +33,10 @@ Includes:
 
 Includes:
 
-* Browser extension for quick list access
 * Dark theme for the site and extension
 * Special highlight on the forums
-* Access to the VIP channel on Discord
 * PRO star on your profile
-* High priority for your suggestions
+* Access to the VIP channel on Discord
 * Early access to new features`,
 		Icon:       "star",
 		Rarity:     arn.ItemRarityRare,
@@ -57,12 +53,10 @@ Includes:
 
 Includes:
 
-* Browser extension for quick list access
 * Dark theme for the site and extension
 * Special highlight on the forums
-* Access to the VIP channel on Discord
 * PRO star on your profile
-* High priority for your suggestions
+* Access to the VIP channel on Discord
 * Early access to new features`,
 		Icon:       "star",
 		Rarity:     arn.ItemRarityUnique,
@@ -79,12 +73,10 @@ Includes:
 
 Includes:
 
-* Browser extension for quick list access
 * Dark theme for the site and extension
 * Special highlight on the forums
-* Access to the VIP channel on Discord
 * PRO star on your profile
-* High priority for your suggestions
+* Access to the VIP channel on Discord
 * Early access to new features`,
 		Icon:       "star",
 		Rarity:     arn.ItemRarityLegendary,
diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet
index 0ee584c7..2853242b 100644
--- a/styles/include/config.scarlet
+++ b/styles/include/config.scarlet
@@ -72,7 +72,8 @@ anime-list-item-name-color = link-color
 table-width-normal = 900px
 
 // Feature cards
-feature-card-color = crimson
+feature-card-color = hsl(348, 83%, 47%)
+feature-card-alternative-color = hsl(203, 83%, 47%)
 feature-card-icon-color = white
 
 // Loading animation