chore(react/settings): bring back style

apps/client/src/widgets/react/Admonition.tsx

@@ -0,0 +1,14 @@
+import { ComponentChildren } from "preact";
+
+interface AdmonitionProps {
+    type: "warning";
+    children: ComponentChildren;
+}
+
+export default function Admonition({ type, children }: AdmonitionProps) {
+    return (
+        <div className={`admonition ${type}`} role="alert">
+            {children}
+        </div>
+    )
+}

apps/client/src/widgets/type_widgets/options/components/OptionsRow.css

@@ -0,0 +1,23 @@
+.option-row {
+    border-bottom: 1px solid var(--main-border-color);
+    display: flex;
+    align-items: center;
+    padding: 0.5em 0;
+}
+
+.option-row > label {
+    width: 40%;
+    margin-bottom: 0 !important;
+}
+
+.option-row > select {
+    width: 60%;
+}
+
+.option-row:last-of-type {
+    border-bottom: unset;
+}
+
+.option-row.centered {
+    justify-content: center;
+}

apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx

@@ -1,14 +1,16 @@
 import { ComponentChildren } from "preact";
+import "./OptionsRow.css";
 
 interface OptionsRowProps {
-    label: string;
+    label?: string;
     children: ComponentChildren;
+    centered?: boolean;
 }
 
-export default function OptionsRow({ label, children }: OptionsRowProps) {
+export default function OptionsRow({ label, children, centered }: OptionsRowProps) {
     return (
-        <div className="option-row">
+        <div className={`option-row ${centered ? "centered" : ""}`}>
-            <label>{label}</label>
+            {label && <label>{label}</label>}
             {children}
         </div>
     );

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

@@ -5,8 +5,12 @@ import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import { useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
 import type { Locale } from "@triliumnext/commons";
-import { isElectron } from "../../../services/utils";
+import { isElectron, restartDesktopApp } from "../../../services/utils";
 import FormRadioGroup from "../../react/FormRadioGroup";
+import FormText from "../../react/FormText";
+import RawHtml from "../../react/RawHtml";
+import Admonition from "../../react/Admonition";
+import Button from "../../react/Button";
 
 export default function InternationalizationOptions() {
     return (
@@ -70,6 +74,7 @@ function DateSettings() {
             </OptionsRow>  
 
             <OptionsRow label={t("i18n.first-week-of-the-year")}>
+                <div role="group">
                     <FormRadioGroup
                         name="first-week-of-year"
                         currentValue={firstWeekOfYear} onChange={setFirstWeekOfYear}
@@ -79,6 +84,7 @@ function DateSettings() {
                             { value: "2", label: t("i18n.first-week-has-minimum-days") }
                         ]}
                     />
+                </div>
             </OptionsRow>
 
             {firstWeekOfYear === "2" && <OptionsRow label={t("i18n.min-days-in-first-week")}>
@@ -89,6 +95,22 @@ function DateSettings() {
                         { length: 7 }, 
                         (_, i) => ({ days: String(i + 1) }))} />
             </OptionsRow>}
+
+            <FormText>
+                <RawHtml html={t("i18n.first-week-info")} />
+            </FormText>
+
+            <Admonition type="warning">
+                {t("i18n.first-week-warning")}
+            </Admonition>
+
+            <OptionsRow centered>
+                <Button
+                    text={t("electron_integration.restart-app-button")}
+                    size="micro"
+                    onClick={restartDesktopApp}
+                />
+            </OptionsRow>
         </>
     )
 }

apps/client/src/widgets/type_widgets/options/i18n/i18n.ts

@@ -5,43 +5,7 @@ import { getAvailableLocales, t } from "../../../../services/i18n.js";
 
 const TPL = /*html*/`
 <div class="options-section">
-    <div class="locale-options-container">
-        <p class="form-text use-tn-links">${t("i18n.first-week-info")}</p>
-
-        <div class="admonition warning" role="alert">
-            ${t("i18n.first-week-warning")}
-        </div>
-
-        <div class="option-row centered">
-            <button class="btn btn-secondary btn-micro restart-app-button">${t("electron_integration.restart-app-button")}</button>
-        </div>
-    </div>
-
     <style>
-        .locale-options-container .option-row {
-            border-bottom: 1px solid var(--main-border-color);
-            display: flex;
-            align-items: center;
-            padding: 0.5em 0;
-        }
-
-        .locale-options-container .option-row > label {
-            width: 40%;
-            margin-bottom: 0 !important;
-        }
-
-        .locale-options-container .option-row > select {
-            width: 60%;
-        }
-
-        .locale-options-container .option-row:last-of-type {
-            border-bottom: unset;
-        }
-
-        .locale-options-container .option-row.centered {
-            justify-content: center;
-        }
-
         .locale-options-container .option-row [aria-labelledby="first-week-of-year-label"] {
             display: flex;
             flex-direction: column;
@@ -59,7 +23,7 @@ export default class LocalizationOptions extends OptionsWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.$widget.find(".restart-app-button").on("click", utils.restartDesktopApp);
+        this.$widget.find(".restart-app-button").on("click", utils.);
     }
 
 }