Make sense in horizontal lines

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

src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap

@@ -166,10 +166,14 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -870,10 +874,14 @@ exports[`preferences - closing-preferences given accessing preferences directly
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -1438,10 +1446,14 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -2142,10 +2154,14 @@ exports[`preferences - closing-preferences given already in a page and then navi
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"

src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap

@@ -179,10 +179,14 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
                   </div>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  style="padding: 0px 10px;"
+                >
+                  <div
+                    class="HorizontalLine Small"
                   />
                 </div>
               </div>
+            </div>
           </nav>
           <div
             class="contentRegion"

src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap

@@ -154,12 +154,20 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
-              />
+              >
                 <div
-                class="HorizontalLine"
+                  class="HorizontalLine Small"
                 />
               </div>
+              <div
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
+                />
+              </div>
+            </div>
           </div>
         </nav>
         <div
@@ -848,8 +856,12 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
+              </div>
               <div
                 data-preference-tab-group-test="some-tab-group"
               >
@@ -872,10 +884,14 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -1563,8 +1579,12 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
+              </div>
               <div
                 data-preference-tab-group-test="some-tab-group"
               >
@@ -1599,10 +1619,14 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"

src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap

@@ -154,10 +154,14 @@ exports[`preferences - navigation to application preferences given in some child
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -498,10 +502,14 @@ exports[`preferences - navigation to application preferences given in some child
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -1191,10 +1199,14 @@ exports[`preferences - navigation to application preferences given in some child
                   </div>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  style="padding: 0px 10px;"
+                >
+                  <div
+                    class="HorizontalLine Small"
                   />
                 </div>
               </div>
+            </div>
           </nav>
           <div
             class="contentRegion"

src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap

@@ -154,10 +154,14 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -846,10 +850,14 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"

src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap

@@ -154,10 +154,14 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -846,10 +850,14 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"

src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap

@@ -166,10 +166,14 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -481,10 +485,14 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -1185,10 +1193,14 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -1889,10 +1901,14 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -2194,10 +2210,14 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"

src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap

@@ -154,10 +154,14 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"
@@ -846,10 +850,14 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"

src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -372,10 +372,14 @@ exports[`preferences - navigation using application menu when navigating to pref
                 </div>
               </div>
               <div
-                class="HorizontalLine"
+                style="padding: 0px 10px;"
+              >
+                <div
+                  class="HorizontalLine Small"
                 />
               </div>
             </div>
+          </div>
         </nav>
         <div
           class="contentRegion"

src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap

@@ -375,10 +375,14 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
                   </div>
                 </div>
                 <div
-                  class="HorizontalLine"
+                  style="padding: 0px 10px;"
+                >
+                  <div
+                    class="HorizontalLine Small"
                   />
                 </div>
               </div>
+            </div>
           </nav>
           <div
             class="contentRegion"

src/features/preferences/renderer/compliance-for-legacy-extension-api/registrator-for-preference-items.injectable.tsx

@@ -10,6 +10,7 @@ import { extensionRegistratorInjectionToken } from "../../../../extensions/exten
 import { PreferencePageComponent } from "../preference-page-component";
 import { ExtensionPreferenceItem } from "./extension-preference-item";
 import { computed } from "mobx";
+import { HorizontalLine } from "../horizontal-line/horizontal-line";
 
 const registratorForPreferenceItemsInjectable = getInjectable({
   id: "registrator-for-preference-items",
@@ -53,7 +54,7 @@ const registratorForPreferenceItemsInjectable = getInjectable({
           </PreferencePageComponent>
         ),
 
-        childSeparator: () => <hr />,
+        childSeparator: HorizontalLine,
       }),
 
       injectionToken: preferenceItemInjectionToken,
@@ -132,7 +133,7 @@ const registratorForPreferenceItemsInjectable = getInjectable({
             <ExtensionPreferenceItem registration={registration} />
           ),
 
-          childSeparator: () => <hr />,
+          childSeparator: HorizontalLine,
         }),
 
         injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-items/preference-tab-root.tsx

@@ -4,6 +4,7 @@
  */
 import type { IComputedValue } from "mobx";
 import { computed } from "mobx";
+import React from "react";
 import { HorizontalLine } from "../horizontal-line/horizontal-line";
 
 export interface PreferenceTabsRoot {
@@ -19,5 +20,10 @@ export const preferenceTabsRoot: PreferenceTabsRoot = {
   id: "preference-tabs",
   parentId: undefined,
   isShown: computed(() => true as const),
-  childSeparator: HorizontalLine,
+
+  childSeparator: () => (
+    <div style={{ padding: "0 10px" }}>
+      <HorizontalLine small />
+    </div>
+  ),
 };