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)
-		h3.widget-title.shop-item-name
+	.shop-item.mountable(data-item-id=item.ID)
+		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