refactor

src/components/molecules/UserPreferences/Currency.tsx

@@ -0,0 +1,24 @@
+import React, { ReactElement, ChangeEvent } from 'react'
+import { useUserPreferences } from '../../../providers/UserPreferences'
+import Input from '../../atoms/Input'
+
+export default function Currency(): ReactElement {
+  const { currency, setCurrency } = useUserPreferences()
+
+  return (
+    <li>
+      <Input
+        name="currency"
+        label="Currency"
+        help="Select your preferred currency."
+        type="select"
+        options={['EUR', 'USD']}
+        value={currency}
+        onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+          setCurrency(e.target.value)
+        }
+        small
+      />
+    </li>
+  )
+}

src/components/molecules/UserPreferences/Debug.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement } from 'react'
+import { useUserPreferences } from '../../../providers/UserPreferences'
+import Input from '../../atoms/Input'
+
+export default function Debug(): ReactElement {
+  const { debug, setDebug } = useUserPreferences()
+
+  return (
+    <li>
+      <Input
+        name="debug"
+        label="Debug Mode"
+        help="Show geeky debug information in some places."
+        type="checkbox"
+        options={['Activate Debug Mode']}
+        defaultChecked={debug === true}
+        onChange={() => setDebug(!debug)}
+      />
+    </li>
+  )
+}

src/components/molecules/UserPreferences/Preferences.tsx

@@ -1,38 +0,0 @@
-import React, { ReactElement, ChangeEvent } from 'react'
-import { useUserPreferences } from '../../../providers/UserPreferences'
-import Input from '../../atoms/Input'
-import styles from './Preferencs.module.css'
-
-export default function Preferences(): ReactElement {
-  const { debug, setDebug, currency, setCurrency } = useUserPreferences()
-
-  return (
-    <ul className={styles.preferences}>
-      <li>
-        <Input
-          name="currency"
-          label="Currency"
-          help="Select your preferred currency."
-          type="select"
-          options={['EUR', 'USD']}
-          value={currency}
-          onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-            setCurrency(e.target.value)
-          }
-          small
-        />
-      </li>
-      <li>
-        <Input
-          name="debug"
-          label="Debug Mode"
-          help="Show geeky debug information in some places."
-          type="checkbox"
-          options={['Activate Debug Mode']}
-          defaultChecked={debug === true}
-          onChange={() => setDebug(!debug)}
-        />
-      </li>
-    </ul>
-  )
-}

src/components/molecules/UserPreferences/Preferencs.module.css

@@ -1,17 +0,0 @@
-.preferences {
-  padding: calc(var(--spacer) / 2);
-}
-
-.preferences li > div {
-  margin-bottom: 0;
-}
-
-.preferences li {
-  border-bottom: 1px solid var(--brand-grey-lighter);
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
-.preferences li:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}

src/components/molecules/UserPreferences/index.module.css

@@ -15,3 +15,21 @@
 .preferences[aria-expanded='true'] .icon {
   fill: var(--brand-grey);
 }
+
+.preferencesDetails {
+  padding: calc(var(--spacer) / 2);
+}
+
+.preferencesDetails li > div {
+  margin-bottom: 0;
+}
+
+.preferencesDetails li {
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.preferencesDetails li:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}

src/components/molecules/UserPreferences/index.tsx

@@ -1,13 +1,19 @@
 import React, { ReactElement } from 'react'
 import Tooltip from '../../atoms/Tooltip'
-import Preferences from './Preferences'
 import { ReactComponent as Cog } from '../../../images/cog.svg'
 import styles from './index.module.css'
+import Currency from './Currency'
+import Debug from './Debug'
 
 export default function UserPreferences(): ReactElement {
   return (
     <Tooltip
-      content={<Preferences />}
+      content={
+        <ul className={styles.preferencesDetails}>
+          <Currency />
+          <Debug />
+        </ul>
+      }
       trigger="click focus"
       className={styles.preferences}
     >