Merge pull request #314 from sinamics/font_size

Added option to select application font size

src/components/userSettings/fontSize.tsx

@@ -0,0 +1,49 @@
+import { useTranslations } from "next-intl";
+import React, { useEffect, useState } from "react";
+
+const ApplicationFontSize = () => {
+	const t = useTranslations("userSettings");
+	const [fontSize, setFontSize] = useState(() => {
+		// Get font size from local storage or default to "Medium"
+		const savedFontSize = localStorage.getItem("appFontSize");
+		return savedFontSize || "Medium";
+	});
+
+	useEffect(() => {
+		// Apply the font size class to the document element
+		document.documentElement.className = fontSizeOptions[fontSize];
+		// Save the font size to local storage whenever it changes
+		localStorage.setItem("appFontSize", fontSize);
+	}, [fontSize]);
+
+	const fontSizeOptions = {
+		Small: "text-xs",
+		Medium: "text-base",
+		Large: "text-lg",
+	};
+
+	return (
+		<div>
+			<div className="form-control w-full max-w-xs">
+				<label className="label">
+					<span className="label-text font-medium">
+						{t("account.accountPreferences.fontSize")}
+					</span>
+				</label>
+				<select
+					value={fontSize}
+					onChange={(e) => setFontSize(e.target.value)}
+					className="select select-bordered select-sm"
+				>
+					{Object.keys(fontSizeOptions).map((name) => (
+						<option key={name} value={name}>
+							{name}
+						</option>
+					))}
+				</select>
+			</div>
+		</div>
+	);
+};
+
+export default ApplicationFontSize;

src/locales/en/common.json

@@ -641,7 +641,8 @@
 			},
 			"accountPreferences": {
 				"title": "Account Preferences",
-				"languageLabel": "Language"
+				"languageLabel": "Language",
+				"fontSize": "Font Size"
 			},
 			"application": {
 				"title": "Application",
@@ -707,4 +708,4 @@
 			"loading": "Fetching logs..."
 		}
 	}
-}
+}

src/locales/es/common.json

@@ -577,8 +577,9 @@
 					}
 				},
 				"webhookModal": {
-					"webhookName": "Webhook Name",
+					"editWebhookTitle": "Editar Webhook",
 					"createWebhookTitle": "Crear Webhook para la Organización <span>{organization}</span>",
+					"webhookName": "Webhook Name",
 					"webhookNameDescription": "This field is for entering the name of the webhook. The name is used to identify the webhook and should be descriptive enough to distinguish it from other webhooks.",
 					"selectWebhookActions": "Select webhook actions",
 					"selectWebhookActionsDescription": "This dropdown menu allows you to choose the specific actions your webhook should perform. Each option represents a different type of action.",
@@ -640,7 +641,8 @@
 			},
 			"accountPreferences": {
 				"title": "Preferencias de la cuenta",
-				"languageLabel": "Idioma"
+				"languageLabel": "Idioma",
+				"fontSize": "Tamaño de fuente"
 			},
 			"application": {
 				"title": "Aplicación",

src/locales/fr/common.json

@@ -641,7 +641,8 @@
 			},
 			"accountPreferences": {
 				"title": "Préférences de compte",
-				"languageLabel": "Langue"
+				"languageLabel": "Langue",
+				"fontSize": "Taille de la police"
 			},
 			"application": {
 				"title": "Application",
@@ -707,4 +708,4 @@
 			"loading": "Récupération des logs..."
 		}
 	}
-}
+}

src/locales/no/common.json

@@ -577,6 +577,7 @@
 					}
 				},
 				"webhookModal": {
+					"editWebhookTitle": "Rediger Webhook",
 					"webhookName": "Webhook-navn",
 					"createWebhookTitle": "Opprett Webhook for Organisasjonen <span>{organization}</span>",
 					"webhookNameDescription": "Dette feltet er for å angi navnet på webhook. Navnet brukes til å identifisere webhook og bør være beskrivende nok til å skille den fra andre webhooks.",
@@ -640,7 +641,8 @@
 			},
 			"accountPreferences": {
 				"title": "Kontoinnstillinger",
-				"languageLabel": "Språk"
+				"languageLabel": "Språk",
+				"fontSize": "Skriftstørrelse"
 			},
 			"application": {
 				"title": "Applikasjon",

src/locales/pl/common.json

@@ -641,7 +641,8 @@
 			},
 			"accountPreferences": {
 				"title": "Preferencje konta",
-				"languageLabel": "Język"
+				"languageLabel": "Język",
+				"fontSize": "Rozmiar czcionki"
 			},
 			"application": {
 				"title": "Aplikacja",