fix: deduplicate settings styles (#1564)

src/routes/_components/settings/UISettingsStyles.html

@@ -0,0 +1,20 @@
+<style>
+  :global(.ui-settings) {
+    background: var(--form-bg);
+    border: 1px solid var(--main-border);
+    border-radius: 4px;
+    padding: 20px;
+    line-height: 2em;
+  }
+
+  :global(.setting-group) {
+    display: block;
+    padding: 5px 0;
+  }
+
+  @media (max-width: 240px) {
+    :global(.ui-settings) {
+      padding: 20px 10px;
+    }
+  }
+</style>

src/routes/_pages/settings/general.html

@@ -90,36 +90,20 @@
     <ThemeSettings instanceName={$currentInstance} />
   {/if}
 </SettingsLayout>
-<style>
+<UISettingsStyles />
-  .ui-settings {
-    background: var(--form-bg);
-    border: 1px solid var(--main-border);
-    border-radius: 4px;
-    padding: 20px;
-    line-height: 2em;
-  }
-  .setting-group {
-    display: block;
-    padding: 5px 0;
-  }
-
-  @media (max-width: 240px) {
-    .ui-settings {
-      padding: 20px 10px;
-    }
-  }
-</style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
   import ThemeSettings from '../../_components/settings/instance/ThemeSettings.html'
   import { store } from '../../_store/store'
   import Tooltip from '../../_components/Tooltip.html'
+  import UISettingsStyles from '../../_components/settings/UISettingsStyles.html'
 
   export default {
     components: {
       SettingsLayout,
       ThemeSettings,
-      Tooltip
+      Tooltip,
+      UISettingsStyles
     },
     methods: {
       onChange (event) {

src/routes/_pages/settings/hotkeys.html

@@ -25,35 +25,22 @@
 
   <ShortcutHelpInfo />
 </SettingsLayout>
+<UISettingsStyles />
 <style>
   .ui-settings {
-    background: var(--form-bg);
-    border: 1px solid var(--main-border);
-    border-radius: 4px;
-    padding: 20px;
-    line-height: 2em;
     margin-bottom: 20px;
   }
-  .setting-group {
-    display: block;
-    padding: 5px 0;
-  }
 
   label.disabled-style {
     color: var(--deemphasized-text-color);
   }
-
-  @media (max-width: 240px) {
-    .ui-settings {
-      padding: 20px 10px;
-    }
-  }
 </style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
   import ShortcutHelpInfo from '../../_components/ShortcutHelpInfo.html'
   import { store } from '../../_store/store'
   import { isKaiOS } from '../../_utils/userAgent'
+  import UISettingsStyles from '../../_components/settings/UISettingsStyles.html'
 
   export default {
     store: () => store,
@@ -72,7 +59,8 @@
     },
     components: {
       SettingsLayout,
-      ShortcutHelpInfo
+      ShortcutHelpInfo,
+      UISettingsStyles
     }
   }
 </script>

src/routes/_pages/settings/wellness.html

@@ -63,33 +63,18 @@
     <ExternalLink href="https://humanetech.com">Center for Humane Technology</ExternalLink>.
   </p>
 </SettingsLayout>
+<UISettingsStyles />
 <style>
-  .ui-settings {
-    background: var(--form-bg);
-    border: 1px solid var(--main-border);
-    border-radius: 4px;
-    padding: 20px;
-    line-height: 2em;
-  }
-  .setting-group {
-    display: block;
-    padding: 5px 0;
-  }
   :global(.wellness-aside) {
     margin: 20px 10px 0px 10px;
   }
-
-  @media (max-width: 240px) {
-    .ui-settings {
-      padding: 20px 10px;
-    }
-  }
 </style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
   import { store } from '../../_store/store'
   import ExternalLink from '../../_components/ExternalLink.html'
   import InfoAside from '../../_components/InfoAside.html'
+  import UISettingsStyles from '../../_components/settings/UISettingsStyles.html'
 
   export default {
     oncreate () {
@@ -98,7 +83,8 @@
     components: {
       SettingsLayout,
       ExternalLink,
-      InfoAside
+      InfoAside,
+      UISettingsStyles
     },
     methods: {
       flushChangesToCheckAll () {