From 138fe830826bcc3d948c667d9a14aa2b8611c3a2 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 10 Oct 2019 07:06:04 -0700
Subject: [PATCH] fix: deduplicate settings styles (#1564)

---
 .../settings/UISettingsStyles.html            | 20 ++++++++++++++++
 src/routes/_pages/settings/general.html       | 24 ++++---------------
 src/routes/_pages/settings/hotkeys.html       | 20 ++++------------
 src/routes/_pages/settings/wellness.html      | 22 ++++-------------
 4 files changed, 32 insertions(+), 54 deletions(-)
 create mode 100644 src/routes/_components/settings/UISettingsStyles.html

diff --git a/src/routes/_components/settings/UISettingsStyles.html b/src/routes/_components/settings/UISettingsStyles.html
new file mode 100644
index 00000000..54507218
--- /dev/null
+++ b/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>
diff --git a/src/routes/_pages/settings/general.html b/src/routes/_pages/settings/general.html
index 11b60915..209cc3a7 100644
--- a/src/routes/_pages/settings/general.html
+++ b/src/routes/_pages/settings/general.html
@@ -90,36 +90,20 @@
     <ThemeSettings instanceName={$currentInstance} />
   {/if}
 </SettingsLayout>
-<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;
-  }
-
-  @media (max-width: 240px) {
-    .ui-settings {
-      padding: 20px 10px;
-    }
-  }
-</style>
+<UISettingsStyles />
 <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) {
diff --git a/src/routes/_pages/settings/hotkeys.html b/src/routes/_pages/settings/hotkeys.html
index 1f042f82..4815632c 100644
--- a/src/routes/_pages/settings/hotkeys.html
+++ b/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>
diff --git a/src/routes/_pages/settings/wellness.html b/src/routes/_pages/settings/wellness.html
index f31dedab..4da39bc2 100644
--- a/src/routes/_pages/settings/wellness.html
+++ b/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 () {