From 8e56585575b178864e07aa47f007d2c297fb6d16 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 16:52:22 +0300
Subject: [PATCH] feat(options/appearance): improve font selection further

---
 .../src/translations/en/translation.json      | 16 +++++------
 .../type_widgets/options/appearance.css       |  4 +++
 .../type_widgets/options/appearance.tsx       | 28 ++++++++++---------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 07ab81d0c0..005066833b 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1191,16 +1191,16 @@
   "fonts": {
     "theme_defined": "Theme defined",
     "fonts": "Fonts",
-    "main_font": "Main Font",
+    "custom_fonts": "Use custom fonts",
+    "main_font": "General",
     "font_family": "Font family",
     "size": "Size",
-    "note_tree_font": "Note Tree Font",
-    "note_detail_font": "Note Detail Font",
-    "monospace_font": "Monospace (code) Font",
-    "note_tree_and_detail_font_sizing": "Note that tree and detail font sizing is relative to the main font size setting.",
-    "not_all_fonts_available": "Not all listed fonts may be available on your system.",
-    "apply_font_changes": "To apply font changes, click on",
-    "reload_frontend": "reload frontend",
+    "note_tree_font": "Note tree",
+    "note_detail_font": "Note content",
+    "monospace_font": "Code notes & blocks",
+    "size_relative_to_general": "Size is relative to the general font size",
+    "not_all_fonts_available": "Not all listed fonts may be available on your system",
+    "apply_changes": "Reload to apply changes",
     "generic-fonts": "Generic fonts",
     "sans-serif-system-fonts": "Sans-serif system fonts",
     "serif-system-fonts": "Serif system fonts",
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.css b/apps/client/src/widgets/type_widgets/options/appearance.css
index d1d6a0a7d0..b3357aecd1 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.css
+++ b/apps/client/src/widgets/type_widgets/options/appearance.css
@@ -11,6 +11,10 @@
     .input-with-unit {
         width: 100px;
     }
+
+    .tn-number-unit-pair {
+        margin-bottom: 0 !important;
+    }
 }
 
 .orientation-illustration {
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index a34581871b..6861f3643f 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -17,7 +17,7 @@ import FormText from "../../react/FormText";
 import { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import Icon from "../../react/Icon";
-import OptionsRow from "./components/OptionsRow";
+import OptionsRow, { OptionsRowWithButton, OptionsRowWithToggle } from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import PlatformIndicator from "./components/PlatformIndicator";
 import RadioWithIllustration from "./components/RadioWithIllustration";
@@ -314,23 +314,24 @@ function Fonts() {
 
     return (
         <OptionsSection title={t("fonts.fonts")}>
-            <FormCheckbox
-                label={t("theme.override_theme_fonts_label")}
+            <OptionsRowWithToggle
+                name="override-theme-fonts"
+                label={t("fonts.custom_fonts")}
+                description={t("fonts.not_all_fonts_available")}
                 currentValue={overrideThemeFonts}
                 onChange={setOverrideThemeFonts}
             />
 
             <Font name="main-font" label={t("fonts.main_font")} fontFamilyOption="mainFontFamily" fontSizeOption="mainFontSize" disabled={!isEnabled} />
-            <Font name="tree-font" label={t("fonts.note_tree_font")} fontFamilyOption="treeFontFamily" fontSizeOption="treeFontSize" disabled={!isEnabled} />
-            <Font name="detail-font" label={t("fonts.note_detail_font")} fontFamilyOption="detailFontFamily" fontSizeOption="detailFontSize" disabled={!isEnabled} />
+            <Font name="tree-font" label={t("fonts.note_tree_font")} description={t("fonts.size_relative_to_general")} fontFamilyOption="treeFontFamily" fontSizeOption="treeFontSize" disabled={!isEnabled} />
+            <Font name="detail-font" label={t("fonts.note_detail_font")} description={t("fonts.size_relative_to_general")} fontFamilyOption="detailFontFamily" fontSizeOption="detailFontSize" disabled={!isEnabled} />
             <Font name="monospace-font" label={t("fonts.monospace_font")} fontFamilyOption="monospaceFontFamily" fontSizeOption="monospaceFontSize" disabled={!isEnabled} />
 
-            <FormText>{t("fonts.note_tree_and_detail_font_sizing")}</FormText>
-            <FormText>{t("fonts.not_all_fonts_available")}</FormText>
-
-            <p>
-                {t("fonts.apply_font_changes")} <Button text={t("fonts.reload_frontend")} size="micro" onClick={reloadFrontendApp} />
-            </p>
+            <OptionsRowWithButton
+                label={t("fonts.apply_changes")}
+                icon="bx bx-refresh"
+                onClick={reloadFrontendApp}
+            />
         </OptionsSection>
     );
 }
@@ -338,17 +339,18 @@ function Fonts() {
 interface FontProps {
     name: string;
     label: string;
+    description?: string;
     fontFamilyOption: OptionNames;
     fontSizeOption: OptionNames;
     disabled?: boolean;
 }
 
-function Font({ name, label, fontFamilyOption, fontSizeOption, disabled }: FontProps) {
+function Font({ name, label, description, fontFamilyOption, fontSizeOption, disabled }: FontProps) {
     const [ fontFamily, setFontFamily ] = useTriliumOption(fontFamilyOption);
     const [ fontSize, setFontSize ] = useTriliumOption(fontSizeOption);
 
     return (
-        <OptionsRow name={name} label={label}>
+        <OptionsRow name={name} label={label} description={description}>
             <div className="font-options">
                 <FormSelectWithGroups
                     values={FONT_FAMILIES}