From 258bfc98e849ec078bee6002e2379a8d6939e234 Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Thu, 13 Oct 2022 15:56:10 +0300
Subject: [PATCH] Tweak UI for preferences

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 .../application-preference-page.injectable.ts            | 2 ++
 .../application/application-preference-page.tsx          | 9 ++++++---
 .../editor/editor-preference-page.injectable.ts          | 2 ++
 .../preference-items/editor/editor-preference-page.tsx   | 4 ++--
 .../proxy/http-proxy-url/http-proxy-url.tsx              | 5 ++---
 .../proxy/proxy-preference-page.injectable.ts            | 2 ++
 .../preference-items/proxy/proxy-preference-page.tsx     | 9 ++++++---
 .../preference-items/telemetry/telemetry-page.tsx        | 4 ++--
 .../telemetry/telemetry-preference-page.injectable.ts    | 2 ++
 .../renderer/preference-items/terminal/terminal-page.tsx | 4 ++--
 10 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.ts
index 1c193ed49e..23b1f53621 100644
--- a/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.ts
+++ b/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,
diff --git a/src/features/preferences/renderer/preference-items/application/application-preference-page.tsx b/src/features/preferences/renderer/preference-items/application/application-preference-page.tsx
index 10b416f7bb..492e661e42 100644
--- a/src/features/preferences/renderer/preference-items/application/application-preference-page.tsx
+++ b/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 = () => (
-  <div>
+export const ApplicationPreferencePage: PreferenceItemComponent = ({ children }) => (
+  <section id="application">
     <h2 data-testid="application-header">Application</h2>
-  </div>
+
+    {children}
+  </section>
 );
diff --git a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts
index c130af6fd7..a31f3bbce0 100644
--- a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts
+++ b/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,
diff --git a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx
index 4f301b02be..7b1b5cacec 100644
--- a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx
+++ b/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>
 );
diff --git a/src/features/preferences/renderer/preference-items/proxy/http-proxy-url/http-proxy-url.tsx b/src/features/preferences/renderer/preference-items/proxy/http-proxy-url/http-proxy-url.tsx
index 9b82a6ee35..7d55fd2b3b 100644
--- a/src/features/preferences/renderer/preference-items/proxy/http-proxy-url/http-proxy-url.tsx
+++ b/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>
-        <h2 data-testid="proxy-header">Proxy</h2>
+      <section>
         <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>
     );
   },
 );
diff --git a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.ts
index 1fbfd460a2..2bf606e19e 100644
--- a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.ts
+++ b/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,
diff --git a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.tsx b/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.tsx
index 702f92f4d7..c48e16d70c 100644
--- a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.tsx
+++ b/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 = () => (
-  <div>
+export const ProxyPreferencePage: PreferenceItemComponent = ({ children }) => (
+  <section id="proxy">
     <h2 data-testid="proxy-header">Proxy</h2>
-  </div>
+
+    {children}
+  </section>
 );
diff --git a/src/features/preferences/renderer/preference-items/telemetry/telemetry-page.tsx b/src/features/preferences/renderer/preference-items/telemetry/telemetry-page.tsx
index 691d9b8cdc..e235eb5d96 100644
--- a/src/features/preferences/renderer/preference-items/telemetry/telemetry-page.tsx
+++ b/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>
 );
diff --git a/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.ts
index 8f25c1b9f1..f164454ec4 100644
--- a/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.ts
+++ b/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,
diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-page.tsx b/src/features/preferences/renderer/preference-items/terminal/terminal-page.tsx
index a58be193ab..92a50a3463 100644
--- a/src/features/preferences/renderer/preference-items/terminal/terminal-page.tsx
+++ b/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>
 );