From 9609c4550d0cf6010ab88357fb5636e42ad22ba7 Mon Sep 17 00:00:00 2001
From: Victor Dyotte <vdyotte@gmail.com>
Date: Mon, 2 Dec 2024 06:24:48 -0500
Subject: [feature] Add global instance CSS customization setting (#3352)

Allow instance admins to add custom CSS that will affect
every page of their instance.

This is done with a new CustomCSS instance setting that
works pretty much exactly like the Users CustomCSS property.
This custom CSS is then requested for every page load.
User styles/themes take precedence over this CSS.

Co-authored-by: tobi <tobi.smethurst@protonmail.com>
---
 web/source/settings/views/admin/instance/settings.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

(limited to 'web/source/settings/views/admin/instance')

diff --git a/web/source/settings/views/admin/instance/settings.tsx b/web/source/settings/views/admin/instance/settings.tsx
index c769b11ec..fd5ceb1ee 100644
--- a/web/source/settings/views/admin/instance/settings.tsx
+++ b/web/source/settings/views/admin/instance/settings.tsx
@@ -46,7 +46,7 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
 	const shortDescLimit = 500;
 	const descLimit = 5000;
 	const termsLimit = 5000;
-	
+
 	const form = {
 		title: useTextInput("title", {
 			source: instance,
@@ -66,6 +66,10 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
 			valueSelector: (s: InstanceV1) => s.description_text,
 			validator: (val: string) => val.length <= descLimit ? "" : `Instance description is ${val.length} characters; must be ${descLimit} characters or less`
 		}),
+		customCSS: useTextInput("custom_css", {
+			source: instance,
+			valueSelector: (s: InstanceV1) => s.custom_css
+		}),
 		terms: useTextInput("terms", {
 			source: instance,
 			// Select "raw" text version of parsed field for editing.
@@ -191,7 +195,16 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
 				type="email"
 			/>
 
+			<TextArea
+				field={form.customCSS}
+				label={"Custom CSS"}
+				className="monospace"
+				rows={8}
+				autoCapitalize="none"
+				spellCheck="false"
+			/>
+
 			<MutationButton label="Save" result={result} disabled={false} />
 		</form>
 	);
-}
\ No newline at end of file
+}
-- 
cgit v1.3