Redesign

pages/settings/settings.pixy

@@ -1,3 +1,7 @@
+component SettingsTabs
+	.tabs
+		Tab("Personal", "user", "/settings/personal")
+
 component Settings(user *arn.User)
 	h1.page-title Settings
 	

pages/settings/settings.scarlet

@@ -1,5 +1,8 @@
 .settings
-	horizontal-wrap-center
+	vertical
+	margin 0 auto
+	width 100%
+	max-width 400px
 
 .widget-section > button,
 .widget-section > .button

pages/shop/history.pixy

@@ -4,7 +4,7 @@ component PurchaseHistory(purchases []*arn.Purchase, user *arn.User)
 	h1.page-title Purchase History
 
 	if len(purchases) == 0
-		p.text-center.mountable You haven't bought anything yet.
+		p.text-center.mountable You haven't bought any items yet.
 	else
 		table
 			thead

pages/shop/shop.pixy

@@ -15,8 +15,8 @@ component ShopTabs(user *arn.User)
 		Tab(strconv.Itoa(user.Balance), "diamond", "/charge")
 
 component ShopItem(item *arn.Item)
-	.widget.shop-item.mountable(data-item-id=item.ID)
+	.shop-item.mountable(data-item-id=item.ID)
-		h3.widget-title.shop-item-name
+		h3.shop-item-name
 			.item-icon
 				Icon(item.Icon)
 			span= item.Name
@@ -24,5 +24,5 @@ component ShopItem(item *arn.Item)
 		.shop-item-description!= markdown.Render(item.Description)
 		.buttons.shop-buttons
 			button.shop-button-buy.action(data-item-id=item.ID, data-item-name=item.Name, data-price=item.Price, data-trigger="click", data-action="buyItem")
-				span.shop-item-price= item.Price
+				span.shop-item-price= "Buy for " + toString(item.Price)
 				Icon("diamond")

pages/shop/shop.scarlet

@@ -2,7 +2,21 @@ item-color-pro-account = hsl(0, 100%, 71%)
 item-color-anime-support-ticket = hsl(217, 64%, 50%)
 
 .shop-items
-	// ...
+	horizontal-wrap
+	justify-content space-around
+
+.shop-item
+	ui-element
+	flex 1
+	flex-basis 380px
+	margin calc(content-padding / 2)
+	padding 0.5rem 1rem
+
+.shop-item-name
+	font-size 1.7rem
+	text-align center
+	padding 0.75rem 0
+	// border-bottom 1px solid rgba(0, 0, 0, 0.1)
 
 .item-icon
 	display inline-block

patches/add-shop-items/add-shop-items.go

@@ -7,7 +7,7 @@ var items = []*arn.Item{
 		ID:    "pro-account-3",
 		Name:  "PRO Account (1 season)",
 		Price: 900,
-		Description: `PRO account for 1 anime season (3 months).
+		Description: `PRO status for 1 anime season (3 months).
 
 1 month equals 300 gems.
 
@@ -28,9 +28,9 @@ Includes:
 		ID:    "pro-account-6",
 		Name:  "PRO Account (2 seasons)",
 		Price: 1600,
-		Description: `PRO account for 2 anime seasons (6 months).
+		Description: `PRO status for 2 anime seasons (6 months).
 
-11% less monthly costs compared to standard.
+11% less monthly costs compared to 1 season.
 
 Includes:
 
@@ -49,9 +49,9 @@ Includes:
 		ID:    "pro-account-12",
 		Name:  "PRO Account (4 seasons)",
 		Price: 3000,
-		Description: `PRO account for 4 anime seasons (12 months).
+		Description: `PRO status for 4 anime seasons (12 months).
 
-16% less monthly costs compared to standard.
+16% less monthly costs compared to 1 season.
 
 Includes:
 
@@ -70,9 +70,9 @@ Includes:
 		ID:    "pro-account-24",
 		Name:  "PRO Account (8 seasons)",
 		Price: 5900,
-		Description: `PRO account for 8 anime seasons (24 months).
+		Description: `PRO status for 8 anime seasons (24 months).
 
-18% less monthly costs compared to standard.
+18% less monthly costs compared to 1 season.
 
 Includes:
 

styles/include/dark.scarlet

@@ -1,37 +1,37 @@
-// Dark theme
+// // Dark theme
 
-// Main color
+// // Main color
-hue = 45
+// hue = 45
-saturation = 100%
+// saturation = 100%
 
-// Main
+// // Main
-text-color = hsl(0, 0%, 90%)
+// text-color = hsl(0, 0%, 90%)
-bg-color = hsl(0, 0%, 24%)
+// bg-color = hsl(0, 0%, 24%)
-link-color = hsl(hue, saturation, 66%)
+// link-color = hsl(hue, saturation, 66%)
-link-hover-color = hsl(hue, saturation, 76%)
+// link-hover-color = hsl(hue, saturation, 76%)
-link-hover-text-shadow = 0 0 8px hsla(hue, saturation, 66%, 0.5)
+// link-hover-text-shadow = 0 0 8px hsla(hue, saturation, 66%, 0.5)
-ui-background = hsla(0, 0%, 8%, 0.3)
+// ui-background = hsla(0, 0%, 8%, 0.3)
-sidebar-background = rgba(0, 0, 0, 0.2)
+// sidebar-background = rgba(0, 0, 0, 0.2)
-sidebar-opaque-background = ui-background
+// sidebar-opaque-background = ui-background
-table-row-hover-background = hsla(0, 0%, 100%, 0.01)
+// table-row-hover-background = hsla(0, 0%, 100%, 0.01)
 
-// White/black
+// // White/black
-theme-white = bg-color
+// theme-white = bg-color
-theme-black = text-color
+// theme-black = text-color
 
-main-color = link-color
+// main-color = link-color
-link-active-color = link-hover-color
+// link-active-color = link-hover-color
-button-hover-color = link-hover-color
+// button-hover-color = link-hover-color
-button-hover-background = hsla(0, 0%, 12%, 0.5)
+// button-hover-background = hsla(0, 0%, 12%, 0.5)
-tab-background = hsla(0, 0%, 0%, 0.1)
+// tab-background = hsla(0, 0%, 0%, 0.1)
-tab-hover-background = hsla(0, 0%, 0%, 0.2)
+// tab-hover-background = hsla(0, 0%, 0%, 0.2)
-tab-active-color = hsl(0, 0%, 95%)
+// tab-active-color = hsl(0, 0%, 95%)
-tab-active-background = hsla(0, 0%, 2%, 0.5)
+// tab-active-background = hsla(0, 0%, 2%, 0.5)
-loading-anim-color = link-color
+// loading-anim-color = link-color
-anime-alternative-title-color = hsla(0, 0%, 100%, 0.5)
+// anime-alternative-title-color = hsla(0, 0%, 100%, 0.5)
-anime-list-item-name-color = text-color
+// anime-list-item-name-color = text-color
 
-// Forum
+// // Forum
-post-like-color = link-color
+// post-like-color = link-color
-post-unlike-color = link-color
+// post-unlike-color = link-color
-post-permalink-color = link-color
+// post-permalink-color = link-color