Settings: rename user settings -> account

client/components/Settings/Navigation.vue

@@ -1,17 +1,23 @@
 <template>
 	<div class="tabs">
-		<h1 class="title">Settings</h1>
-
 		<ul role="navigation" aria-label="Settings tabs">
 			<SettingTabItem name="General" class-name="general" to="" />
 			<SettingTabItem name="Appearance" class-name="appearance" to="appearance" />
 			<SettingTabItem name="Notifications" class-name="notifications" to="notifications" />
-			<SettingTabItem name="User Settings" class-name="user" to="user" />
+			<SettingTabItem name="Account" class-name="account" to="account" />
 		</ul>
 	</div>
 </template>
 
 <style>
+.tabs {
+	position: relative;
+	margin: 0 auto;
+	/* to match the .container */
+	width: 480px;
+	padding: 0 15px;
+}
+
 .tabs ul {
 	padding: 0;
 	border-radius: 5px;
@@ -44,7 +50,7 @@
 	content: "\f1fc"; /* http://fontawesome.io/icon/paint-brush/ */
 }
 
-.tabs .user::before {
+.tabs .account::before {
 	content: "\f007"; /* http://fontawesome.io/icon/user/ */
 }
 
@@ -74,6 +80,12 @@
 	background-color: #303e4a;
 	cursor: default;
 }
+
+/* Float left on desktops */
+@media screen and (min-width: calc(768px + 220px + 400px)) {
+	.tabs {
+	}
+}
 </style>
 
 <script>

client/components/Windows/Settings.vue

@@ -3,7 +3,9 @@
 		<div class="header">
 			<SidebarToggle />
 		</div>
+
 		<div class="container">
+			<h1 class="title">Settings</h1>
 			<Navigation />
 
 			<form ref="settingsForm" autocomplete="off" @change="onChange" @submit.prevent>

client/js/router.js

@@ -19,7 +19,7 @@ import store from "./store";
 
 import AppearanceSettings from "../components/Settings/Appearance.vue";
 import GeneralSettings from "../components/Settings/General.vue";
-import UserSettings from "../components/Settings/User.vue";
+import AccountSettings from "../components/Settings/Account.vue";
 import NotificationSettings from "../components/Settings/Notifications.vue";
 
 const router = new VueRouter({
@@ -59,9 +59,9 @@ const router = new VueRouter({
 					component: AppearanceSettings,
 				},
 				{
-					name: "User Settings",
+					name: "Account",
-					path: "user",
+					path: "account",
-					component: UserSettings,
+					component: AccountSettings,
 				},
 				{
 					name: "Notifications",