From 6f64243671724f9a0666f5ae8c38188f96ebdbc1 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Sat, 19 Feb 2022 17:05:09 -0800
Subject: [PATCH] Settings: rename user settings -> account

---
 .../Settings/{User.vue => Account.vue}        |  0
 client/components/Settings/Navigation.vue     | 20 +++++++++++++++----
 client/components/Windows/Settings.vue        |  2 ++
 client/js/router.js                           |  8 ++++----
 4 files changed, 22 insertions(+), 8 deletions(-)
 rename client/components/Settings/{User.vue => Account.vue} (100%)

diff --git a/client/components/Settings/User.vue b/client/components/Settings/Account.vue
similarity index 100%
rename from client/components/Settings/User.vue
rename to client/components/Settings/Account.vue
diff --git a/client/components/Settings/Navigation.vue b/client/components/Settings/Navigation.vue
index 32d21964..b89e0c45 100644
--- a/client/components/Settings/Navigation.vue
+++ b/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>
diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index 3cb838f4..f24dedec 100644
--- a/client/components/Windows/Settings.vue
+++ b/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>
diff --git a/client/js/router.js b/client/js/router.js
index 9d25b8ca..85efb055 100644
--- a/client/js/router.js
+++ b/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",
-					path: "user",
-					component: UserSettings,
+					name: "Account",
+					path: "account",
+					component: AccountSettings,
 				},
 				{
 					name: "Notifications",