Tweak UI for preferences

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.ts

@@ -5,6 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { ApplicationPreferencePage } from "./application-preference-page";
+import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
 
 const applicationPreferencePageInjectable = getInjectable({
   id: "application-preference-page",
@@ -15,6 +16,7 @@ const applicationPreferencePageInjectable = getInjectable({
     parentId: "application-tab",
     orderNumber: 0,
     Component: ApplicationPreferencePage,
+    childrenSeparator: HorizontalLine,
   }),
 
   injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-items/application/application-preference-page.tsx

@@ -3,9 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import React from "react";
+import type { PreferenceItemComponent } from "../preference-item-injection-token";
 
-export const ApplicationPreferencePage = () => (
+export const ApplicationPreferencePage: PreferenceItemComponent = ({ children }) => (
-  <div>
+  <section id="application">
     <h2 data-testid="application-header">Application</h2>
-  </div>
+
+    {children}
+  </section>
 );

src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts

@@ -5,6 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { EditorPreferencePage } from "./editor-preference-page";
+import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
 
 const editorPreferencePageInjectable = getInjectable({
   id: "editor-preference-page",
@@ -15,6 +16,7 @@ const editorPreferencePageInjectable = getInjectable({
     parentId: "editor-tab",
     orderNumber: 0,
     Component: EditorPreferencePage,
+    childrenSeparator: HorizontalLine,
   }),
 
   injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx

@@ -6,9 +6,9 @@ import React from "react";
 import type { PreferenceItemComponent } from "../preference-item-injection-token";
 
 export const EditorPreferencePage: PreferenceItemComponent = ({ children }) => (
-  <div>
+  <section id="editor">
     <h2 data-testid="editor-configuration-header">Editor configuration</h2>
 
     {children}
-  </div>
+  </section>
 );

src/features/preferences/renderer/preference-items/proxy/http-proxy-url/http-proxy-url.tsx

@@ -19,8 +19,7 @@ const NonInjectedHttpProxyUrl = observer(
     const [proxy, setProxy] = React.useState(userStore.httpsProxy || "");
 
     return (
-      <div>
+      <section>
-        <h2 data-testid="proxy-header">Proxy</h2>
         <SubTitle title="HTTP Proxy" />
         <Input
           theme="round-black"
@@ -32,7 +31,7 @@ const NonInjectedHttpProxyUrl = observer(
         <small className="hint">
           Proxy is used only for non-cluster communication.
         </small>
-      </div>
+      </section>
     );
   },
 );

src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.ts

@@ -5,6 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { ProxyPreferencePage } from "./proxy-preference-page";
+import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
 
 const proxyPreferencePageInjectable = getInjectable({
   id: "proxy-preference-page",
@@ -15,6 +16,7 @@ const proxyPreferencePageInjectable = getInjectable({
     parentId: "proxy-tab",
     orderNumber: 0,
     Component: ProxyPreferencePage,
+    childrenSeparator: HorizontalLine,
   }),
 
   injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.tsx

@@ -3,9 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import React from "react";
+import type { PreferenceItemComponent } from "../preference-item-injection-token";
 
-export const ProxyPreferencePage = () => (
+export const ProxyPreferencePage: PreferenceItemComponent = ({ children }) => (
-  <div>
+  <section id="proxy">
     <h2 data-testid="proxy-header">Proxy</h2>
-  </div>
+
+    {children}
+  </section>
 );

src/features/preferences/renderer/preference-items/telemetry/telemetry-page.tsx

@@ -6,9 +6,9 @@ import React from "react";
 import type { PreferenceItemComponent } from "../preference-item-injection-token";
 
 export const TelemetryPage: PreferenceItemComponent = ({ children }) => (
-  <div>
+  <section id="telemetry">
     <h2 data-testid="telemetry-header">Telemetry</h2>
 
     {children}
-  </div>
+  </section>
 );

src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.ts

@@ -5,6 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { TelemetryPage } from "./telemetry-page";
+import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
 
 const telemetryPreferencePageInjectable = getInjectable({
   id: "telemetry-preference-page",
@@ -15,6 +16,7 @@ const telemetryPreferencePageInjectable = getInjectable({
     parentId: "telemetry-tab",
     orderNumber: 0,
     Component: TelemetryPage,
+    childrenSeparator: HorizontalLine,
   }),
 
   injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-items/terminal/terminal-page.tsx

@@ -6,9 +6,9 @@ import React from "react";
 import type { PreferenceItemComponent } from "../preference-item-injection-token";
 
 export const TerminalPage: PreferenceItemComponent = ({ children }) => (
-  <div>
+  <section id="terminal">
     <h2 data-testid="terminal-header">Terminal</h2>
 
     {children}
-  </div>
+  </section>
 );