feat(options/appearance): use toggles everywhere

apps/client/src/translations/en/translation.json

@@ -1248,11 +1248,11 @@
   },
   "ui-performance": {
     "title": "Performance",
-    "enable-motion": "Enable transitions and animations",
-    "enable-shadows": "Enable shadows",
-    "enable-backdrop-effects": "Enable background effects for menus, popups and panels",
-    "enable-smooth-scroll": "Enable smooth scrolling",
-    "app-restart-required": "(a restart of the application is required for the change to take effect)"
+    "enable-motion": "Transitions and animations",
+    "enable-shadows": "Shadows",
+    "enable-backdrop-effects": "Background effects for menus, popups and panels",
+    "enable-smooth-scroll": "Smooth scrolling",
+    "app-restart-required": "Requires app restart"
   },
   "zoom_factor": {
     "title": "Zoom Factor (desktop build only)",

apps/client/src/widgets/type_widgets/options/appearance.tsx

@@ -546,19 +546,25 @@ function Performance() {
     const [ backdropEffectsEnabled, setBackdropEffectsEnabled ] = useTriliumOptionBool("backdropEffectsEnabled");
 
     return <OptionsSection title={t("ui-performance.title")}>
-        <FormCheckbox
+        <OptionsRowWithToggle
+            name="motion-enabled"
             label={t("ui-performance.enable-motion")}
-            currentValue={motionEnabled} onChange={setMotionEnabled}
+            currentValue={motionEnabled}
+            onChange={setMotionEnabled}
         />
 
-        <FormCheckbox
+        <OptionsRowWithToggle
+            name="shadows-enabled"
             label={t("ui-performance.enable-shadows")}
-            currentValue={shadowsEnabled} onChange={setShadowsEnabled}
+            currentValue={shadowsEnabled}
+            onChange={setShadowsEnabled}
         />
 
-        {!isMobile() && <FormCheckbox
+        {!isMobile() && <OptionsRowWithToggle
+            name="backdrop-effects-enabled"
             label={t("ui-performance.enable-backdrop-effects")}
-            currentValue={backdropEffectsEnabled} onChange={setBackdropEffectsEnabled}
+            currentValue={backdropEffectsEnabled}
+            onChange={setBackdropEffectsEnabled}
         />}
 
         {isElectron() && <SmoothScrollEnabledOption />}
@@ -569,9 +575,12 @@ function Performance() {
 function SmoothScrollEnabledOption() {
     const [ smoothScrollEnabled, setSmoothScrollEnabled ] = useTriliumOptionBool("smoothScrollEnabled");
 
-    return <FormCheckbox
-        label={`${t("ui-performance.enable-smooth-scroll")} ${t("ui-performance.app-restart-required")}`}
-        currentValue={smoothScrollEnabled} onChange={setSmoothScrollEnabled}
+    return <OptionsRowWithToggle
+        name="smooth-scroll-enabled"
+        label={t("ui-performance.enable-smooth-scroll")}
+        description={t("ui-performance.app-restart-required")}
+        currentValue={smoothScrollEnabled}
+        onChange={setSmoothScrollEnabled}
     />;
 }
 
@@ -605,9 +614,11 @@ function RibbonOptions() {
 
     return (
         <OptionsSection title={t('ribbon.widgets')}>
-            <FormCheckbox
+            <OptionsRowWithToggle
+                name="edited-notes-open-in-ribbon"
                 label={t('ribbon.edited_notes_message')}
-                currentValue={editedNotesOpenInRibbon} onChange={setEditedNotesOpenInRibbon}
+                currentValue={editedNotesOpenInRibbon}
+                onChange={setEditedNotesOpenInRibbon}
             />
         </OptionsSection>
     );