Settings page (visual only)

pages/dashboard/dashboard.pixy

@@ -1,78 +1,76 @@
 component Dashboard(posts []*arn.Post)
 	h2.page-title Dash
 	
-	.dashboard
+	.widgets
-		.dashboard-widget
+		.widget
-			h3 Schedule
+			h3.widget-title Schedule
 
 			for i := 1; i <= 5; i++
-				.dashboard-event
+				.widget-element
-					.dashboard-event-text
+					.widget-element-text
 						Icon("calendar-o")
 						span ...
 		
-		.dashboard-widget
+		.widget
-			h3 Forums
+			h3.widget-title Forums
 
 			each post in posts
-				a.dashboard-event.ajax(href=post.Link())
+				a.widget-element.ajax(href=post.Link())
-					//- .dashboard-event-author
+					.widget-element-text
-					//- 	AvatarNoLink(post.Author())
-					.dashboard-event-text
 						Icon(arn.GetForumIcon(post.Thread().Tags[0]))
 						span= post.Thread().Title
 		
-		.dashboard-widget
+		.widget
-			h3 Groups
+			h3.widget-title Groups
 
 			for i := 1; i <= 5; i++
-				.dashboard-event
+				.widget-element
-					.dashboard-event-text
+					.widget-element-text
 						Icon("group")
 						span ...
 
-		.dashboard-widget
+		.widget
-			h3 Messages
+			h3.widget-title Messages
 
 			for i := 1; i <= 5; i++
-				.dashboard-event
+				.widget-element
-					.dashboard-event-text
+					.widget-element-text
 						Icon("comment")
 						span ...
 		
-		.dashboard-widget
+		.widget
-			h3 Contacts
+			h3.widget-title Contacts
 
 			for i := 1; i <= 5; i++
-				.dashboard-event
+				.widget-element
-					.dashboard-event-text
+					.widget-element-text
 						Icon("address-card")
 						span ...
 		
-		.dashboard-widget
+		.widget
-			h3 Follow
+			h3.widget-title Follow
 
-			a.dashboard-event(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener")
+			a.widget-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener")
-				.dashboard-event-text
+				.widget-element-text
 					Icon("microphone")
 					span Discord
 			
-			a.dashboard-event(href="https://www.facebook.com/animenotifier", target="_blank", rel="noopener")
+			a.widget-element(href="https://www.facebook.com/animenotifier", target="_blank", rel="noopener")
-				.dashboard-event-text
+				.widget-element-text
 					Icon("facebook")
 					span Facebook
 			
-			a.dashboard-event(href="https://twitter.com/animenotifier", target="_blank", rel="noopener")
+			a.widget-element(href="https://twitter.com/animenotifier", target="_blank", rel="noopener")
-				.dashboard-event-text
+				.widget-element-text
 					Icon("twitter")
 					span Twitter
 			
-			a.dashboard-event(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", target="_blank", rel="noopener")
+			a.widget-element(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", target="_blank", rel="noopener")
-				.dashboard-event-text
+				.widget-element-text
 					Icon("google-plus")
 					span Google+
 			
-			a.dashboard-event(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener")
+			a.widget-element(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener")
-				.dashboard-event-text
+				.widget-element-text
 					Icon("github")
 					span GitHub

pages/settings/settings.pixy

@@ -1,3 +1,25 @@
 component Settings(user *arn.User)
 	h2.page-title Settings
-	input(type="text", value=user.Nick)
+	.widgets
+		.widget
+			h3.widget-title
+				Icon("user")
+				span Personal
+
+			InputText("nick", user.Nick, "Username", "Your username on notify.moe")
+			InputText("tagline", user.Tagline, "Tagline", "Text that appears below your username")
+			InputText("website", user.Website, "website", "Your homepage")
+
+		.widget
+			h3.widget-title
+				Icon("cubes")
+				span Accounts
+
+			InputText("accounts.anilist.nick", user.Accounts.AniList.Nick, "AniList", "Your username on anilist.co")
+			InputText("accounts.myanimelist.nick", user.Accounts.MyAnimeList.Nick, "MyAnimeList", "Your username on myanimelist.net")
+			InputText("accounts.kitsu.nick", user.Accounts.Kitsu.Nick, "Kitsu", "Your username on kitsu.io")
+
+component InputText(id string, value string, label string, placeholder string)
+	.widget-input
+		label(for=id)= label + ":"
+		input.widget-element(id=id, type="text", value=value, placeholder=placeholder)

styles/forms.scarlet

@@ -8,13 +8,15 @@ input, textarea, button, select
 
 input, textarea
 	border ui-border
-	background-color white
+	background white
 	box-shadow none
+
 	:focus
 		color black
-		border 1px solid main-color
+		border 1px solid main-color !important
 		// TODO: Replace with alpha(main-color, 20%) function
 		box-shadow 0 0 6px rgba(248, 165, 130, 0.2)
+	
 	:disabled
 		ui-disabled
 
@@ -32,6 +34,11 @@ button, select
 	// 	// box-shadow 0 0 6px alpha(mainColor, 20%)
 	// 	border 1px solid main-color
 
+label
+	width 100%
+	padding 0.5rem 0
+	text-align left
+
 // input[type="submit"]:hover,
 // button:hover
 // 	cursor pointer

styles/icons.scarlet

@@ -7,4 +7,7 @@
 	fill currentColor
 
 .raw-icon
+	width 1em
+	height 1em
+	min-width 1em
 	fill currentColor

styles/widgets.scarlet

@@ -1,15 +1,15 @@
-.dashboard
+.widgets
 	horizontal-wrap
 	justify-content space-around
 
-.dashboard-widget
+.widget
 	vertical
 	align-items center
 	width 100%
 	padding 0.25rem
 	max-width 600px
 
-.dashboard-event
+.widget-element
 	vertical-wrap
 	ui-element
 	margin-bottom 1rem
@@ -17,14 +17,16 @@
 	width 100%
 	max-width 700px
 
-.dashboard-event-author
+.widget-element-text
-	horizontal
-	justify-content center
-	width 100%
-
-.dashboard-event-text
 	horizontal
 	clip-long-text
 	justify-content flex-start
 	align-items center
 	width 100%
+
+.widget-input
+	vertical
+	width 100%
+
+.widget-title
+	//