make admin pages prettier

templates/admin/categories/accessibility.html

@@ -3,9 +3,10 @@
 {% set access_link = 'active' %}
 {% block _content %}
 	<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
-		<h2 id="general" class="mb-3 fw-normal">Accessibility</h2>
+		<h2 id="general" class="mb-2 fw-normal">Accessibility</h2>
+		<p class="fs-5 h3 text-body-secondary mb-3">Make {{ const.appName }} accessible to everyone</p>
 		<div class="form-group mb-4">
-			<label class="form-label" for="antispam.type">Font</label>
+			<label class="form-label" for="accessibility.font">Font</label>
 			<select id="accessibility.font" name="accessibility.font" class="form-select">
 				<option value="default"{% if cfg.accessibility.font == 'default' %} selected{% endif %}>Default</option>
 				<option value="system"{% if cfg.accessibility.font == 'system' %} selected{% endif %}>System</option>

templates/admin/categories/antispam.html

@@ -3,7 +3,8 @@
 {% set antispam_link = 'active' %}
 {% block _content %}
 	<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
-		<h2 id="antispam" class="mb-3 fw-normal">Anti-spam</h2>
+		<h2 id="antispam" class="mb-2 fw-normal">Anti-spam</h2>
+		<p class="fs-5 h3 text-body-secondary mb-3">Protect your {{ const.appName }} instance from spammers</p>
 		<div class="form-check form-switch mb-3">
 			<input
 			class="form-check-input"

templates/admin/categories/blacklist.html

@@ -2,11 +2,13 @@
 {% block _title %}Blacklist{% endblock %}
 {% set blacklist_link = 'active' %}
 {% block _content %}
+	<h2 id="blacklist" class="fw-normal mb-2">Word blacklist</h2>
+	<p class="fs-5 h3 text-body-secondary mb-3">Blacklist words that you don't want to see</p>
 	<form hx-put="{{ url_for('api.updateBlacklist') }}" hx-target="#response-container" hx-swap="none">
 		<input type="hidden" name="action" value="update_word_blacklist">
 		<div class="form-group mb-3">
-			<label class="form-label" for="blacklist_cat"><h2 id="blacklist" class="fw-normal">Word blacklist</h2></label>
+			<label class="form-label" for="blacklist_cat">Blacklisted words for questions, one word per line</label>
-			<p class="text-body-secondary">Blacklisted words for questions; one word per line</p>
+<!-- 			<p class="text-body-secondary">Blacklisted words for questions; one word per line</p> -->
 			<textarea id="blacklist_cat" name="blacklist" style="height: 300px; resize: vertical;" class="form-control">{{ blacklist }}</textarea>
 			<button type="submit" class="btn btn-primary mt-3" id="save-blacklist">
 				<span class="me-1 spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>

templates/admin/categories/customize.html

@@ -2,7 +2,8 @@
 {% block _title %}Customize{% endblock %}
 {% set custom_link = 'active' %}
 {% block _content %}
-	<h2 id="customize" class="mb-3 fw-normal">Customize</h2>
+	<h2 id="customize" class="mb-2 fw-normal">Customize</h2>
+	<p class="fs-5 h3 text-body-secondary mb-3">Customize {{ const.appName }} to your liking</p>
 	<h3 class="fw-light">Favicon</h3>
 	<form hx-post="{{ url_for('api.uploadFavicon') }}" hx-target="#response-container" hx-swap="none" hx-encoding="multipart/form-data">
 		<p class="m-0">Current favicon: <img src="{{ url_for('static', filename='icons/favicon/apple-touch-icon.png') }}" width="32" height="32" alt="{{ cfg.instance.title }}'s icon" class="rounded"></p>

templates/admin/categories/emojis.html

@@ -2,7 +2,8 @@
 {% block _title %}Emojis{% endblock %}
 {% set emojis_link = 'active' %}
 {% block _content %}
-	<h2 id="customEmojis" class="mb-3 fw-normal">Custom emojis</h2>
+	<h2 id="customEmojis" class="mb-2 fw-normal">Custom emojis</h2>
+	<p class="fs-5 h3 text-body-secondary mb-3">Add custom emojis to your {{ const.appName }} instance</p>
 	<h3 class="fw-light mb-3">Upload</h3>
 	<form hx-post="{{ url_for('api.uploadEmoji') }}" hx-target="#response-container" hx-swap="none" hx-encoding="multipart/form-data">
 		<div>

templates/admin/categories/general.html

@@ -3,7 +3,8 @@
 {% set general_link = 'active' %}
 {% block _content %}
 	<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
-		<h2 id="general" class="mb-3 fw-normal">General</h2>
+		<h2 id="general" class="mb-2 fw-normal">General</h2>
+		<p class="fs-5 h3 text-body-secondary mb-3">General settings</p>
 		<div class="form-group mb-3">
 			<label class="form-label" for="charLimit">Question character limit</label>
 			<input type="number" id="charLimit" name="charLimit" value="{{ cfg.charLimit }}" class="form-control">

templates/admin/categories/import.html

@@ -2,7 +2,8 @@
 {% block _title %}Import/Export{% endblock %}
 {% set import_link = 'active' %}
 {% block _content %}
-		<h2 id="general" class="mb-3 fw-normal">Import/Export</h2>
+		<h2 id="general" class="mb-2 fw-normal">Import/Export</h2>
+		<p class="fs-5 h3 text-body-secondary mb-3">Import or export your {{ const.appName }} instance data</p>
 		<h3 id="import" class="mb-3 fw-light">Import</h3>
 		<form class="mb-2" hx-disabled-elt="find button[type=submit]" hx-put="{{ url_for('api.importData') }}" hx-encoding="multipart/form-data" hx-target="#response-container" hx-swap="none">
 			<div class="form-group mb-3">

templates/admin/categories/instance.html

@@ -3,7 +3,8 @@
 {% set info_link = 'active' %}
 {% block _content %}
 	<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
-		<h2 id="instance" class="mb-3 fw-normal">Information</h2>
+		<h2 id="instance" class="mb-2 fw-normal">Information</h2>
+		<p class="fs-5 h3 text-body-secondary mb-3">Essential information about your {{ const.appName }} instance</p>
 		<div class="form-group mb-3">
 			<label class="form-label" for="instance.title">Title <small class="text-body-secondary">(e.g. My question box)</small></label>
 			<input type="text" id="instance.title" name="instance.title" value="{{ cfg.instance.title }}" class="form-control">
@@ -43,4 +44,4 @@
 			</button>
 		</div>
 	</form>
-{% endblock %}
+{% endblock %}