Add appearance section in settings (#17433)

* Add appearance section in settings

* Fix lint

* Fix lint

* Apply suggestions from code review

Co-authored-by: Lauris BH <lauris@nix.lv>

Co-authored-by: Lauris BH <lauris@nix.lv>

4 files changed, 77 insertions, 52 deletions

diff --git a/templates/user/settings/account.tmpl b/templates/user/settings/account.tmpl
index 9ed5d3a6dd..3753a77cec 100644
--- a/templates/user/settings/account.tmpl
+++ b/templates/user/settings/account.tmpl
@@ -130,44 +130,6 @@
 			</form>
 		</div>
 
-		<h4 class="ui top attached header">
-			{{.i18n.Tr "settings.manage_themes"}}
-		</h4>
-		<div class="ui attached segment">
-			<div class="ui email list">
-				<div class="item">
-					{{.i18n.Tr "settings.theme_desc"}}
-				</div>
-
-			<form class="ui form" action="{{.Link}}/theme" method="post">
-				{{.CsrfTokenHtml}}
-					<div class="field">
-						<label for="ui">{{.i18n.Tr "settings.ui"}}</label>
-						<div class="ui selection dropdown" id="ui">
-							<input name="theme" type="hidden" value="{{.SignedUser.Theme}}">
-							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-							<div class="text">
-								{{range $i,$a := .AllThemes}}
-									{{if eq $.SignedUser.Theme $a}}{{$a}}{{end}}
-								{{end}}
-							</div>
-
-							<div class="menu">
-							{{range $i,$a := .AllThemes}}
-								<div class="item{{if eq $.SignedUser.Theme $a}} active selected{{end}}" data-value="{{$a}}">
-									{{$a}}
-								</div>
-							{{end}}
-							</div>
-						</div>
-					</div>
-
-				<div class="field">
-					<button class="ui green button">{{$.i18n.Tr "settings.update_theme"}}</button>
-				</div>
-			</form>
-			</div>
-		</div>
 		<h4 class="ui top attached error header">
 			{{.i18n.Tr "settings.delete_account"}}
 		</h4>
diff --git a/templates/user/settings/appearance.tmpl b/templates/user/settings/appearance.tmpl
new file mode 100644
index 0000000000..777b89c750
--- /dev/null
+++ b/templates/user/settings/appearance.tmpl
@@ -0,0 +1,74 @@
+{{template "base/head" .}}
+<div class="page-content user settings sshkeys">
+	{{template "user/settings/navbar" .}}
+	<div class="ui container">
+		{{template "base/alert" .}}
+
+		<!-- Theme -->
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.manage_themes"}}
+		</h4>
+		<div class="ui attached segment">
+			<div class="ui email list">
+				<div class="item">
+					{{.i18n.Tr "settings.theme_desc"}}
+				</div>
+
+			<form class="ui form" action="{{.Link}}/theme" method="post">
+				{{.CsrfTokenHtml}}
+					<div class="field">
+						<label for="ui">{{.i18n.Tr "settings.ui"}}</label>
+						<div class="ui selection dropdown" id="ui">
+							<input name="theme" type="hidden" value="{{.SignedUser.Theme}}">
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+							<div class="text">
+								{{range $i,$a := .AllThemes}}
+									{{if eq $.SignedUser.Theme $a}}{{$a}}{{end}}
+								{{end}}
+							</div>
+
+							<div class="menu">
+							{{range $i,$a := .AllThemes}}
+								<div class="item{{if eq $.SignedUser.Theme $a}} active selected{{end}}" data-value="{{$a}}">
+									{{$a}}
+								</div>
+							{{end}}
+							</div>
+						</div>
+					</div>
+
+				<div class="field">
+					<button class="ui green button">{{$.i18n.Tr "settings.update_theme"}}</button>
+				</div>
+			</form>
+			</div>
+		</div>
+
+		<!-- Language -->
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.language"}}
+		</h4>
+		<div class="ui attached segment">
+			<form class="ui form" action="{{.Link}}/language" method="post">
+				{{.CsrfTokenHtml}}
+				<div class="field">
+					<div class="ui language selection dropdown" id="language">
+						<input name="language" type="hidden" value="{{.SignedUser.Language}}">
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						<div class="text">{{range .AllLangs}}{{if eq $.SignedUser.Language .Lang}}{{.Name}}{{end}}{{end}}</div>
+						<div class="menu">
+						{{range .AllLangs}}
+							<div class="item{{if eq $.SignedUser.Language .Lang}} active selected{{end}}" data-value="{{.Lang}}">{{.Name}}</div>
+						{{end}}
+						</div>
+					</div>
+				</div>
+				<div class="field">
+					<button class="ui green button">{{$.i18n.Tr "settings.update_language"}}</button>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
+
+{{template "base/footer" .}}
diff --git a/templates/user/settings/navbar.tmpl b/templates/user/settings/navbar.tmpl
index 7255819374..3477a5949b 100644
--- a/templates/user/settings/navbar.tmpl
+++ b/templates/user/settings/navbar.tmpl
@@ -6,6 +6,9 @@
 		<a class="{{if .PageIsSettingsAccount}}active{{end}} item" href="{{AppSubUrl}}/user/settings/account">
 			{{.i18n.Tr "settings.account"}}
 		</a>
+		<a class="{{if .PageIsSettingsAppearance}}active{{end}} item" href="{{AppSubUrl}}/user/settings/appearance">
+			{{.i18n.Tr "settings.appearance"}}
+		</a>
 		<a class="{{if .PageIsSettingsSecurity}}active{{end}} item" href="{{AppSubUrl}}/user/settings/security">
 			{{.i18n.Tr "settings.security"}}
 		</a>
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index 1f1585a787..0b14e3c0d3 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -47,20 +47,6 @@
 					<input id="location" name="location"  value="{{.SignedUser.Location}}">
 				</div>
 
-				<div class="field">
-					<label for="language">{{.i18n.Tr "settings.language"}}</label>
-					<div class="ui language selection dropdown" id="language">
-						<input name="language" type="hidden" value="{{.SignedUser.Language}}">
-						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-						<div class="text">{{range .AllLangs}}{{if eq $.SignedUser.Language .Lang}}{{.Name}}{{end}}{{end}}</div>
-						<div class="menu">
-						{{range .AllLangs}}
-							<div class="item{{if eq $.SignedUser.Language .Lang}} active selected{{end}}" data-value="{{.Lang}}">{{.Name}}</div>
-						{{end}}
-						</div>
-					</div>
-				</div>
-
 				<div class="ui divider"></div>
 				<!-- private block -->