preferences UI

src/components/atoms/Tooltip.tsx

@@ -1,9 +1,12 @@
 import React, { ReactElement, ReactNode } from 'react'
+import classNames from 'classnames/bind'
 import loadable from '@loadable/component'
 import { useSpring, animated } from 'react-spring'
 import styles from './Tooltip.module.css'
 import { ReactComponent as Info } from '../../images/info.svg'
 
+const cx = classNames.bind(styles)
+
 const Tippy = loadable(() => import('@tippyjs/react/headless'))
 
 const animation = {
@@ -22,12 +25,14 @@ export default function Tooltip({
   content,
   children,
   trigger,
-  disabled
+  disabled,
+  className
 }: {
   content: ReactNode
   children?: ReactNode
   trigger?: string
   disabled?: boolean
+  className?: string
 }): ReactElement {
   const [props, setSpring] = useSpring(() => animation.from)
 
@@ -47,6 +52,11 @@ export default function Tooltip({
     })
   }
 
+  const styleClasses = cx({
+    tooltip: true,
+    [className]: className
+  })
+
   return (
     <Tippy
       interactive
@@ -69,10 +79,10 @@ export default function Tooltip({
       onMount={onMount}
       onHide={onHide}
       fallback={
-        <div className={styles.tooltip}>{children || <DefaultTrigger />}</div>
+        <div className={styleClasses}>{children || <DefaultTrigger />}</div>
       }
     >
-      <div className={styles.tooltip}>{children || <DefaultTrigger />}</div>
+      <div className={styleClasses}>{children || <DefaultTrigger />}</div>
     </Tippy>
   )
 }

src/components/molecules/Menu.module.css

@@ -58,6 +58,7 @@
 
 .navigation li {
   display: inline-block;
+  vertical-align: middle;
 }
 
 .navigation button,

src/components/molecules/UserPreferences/Preferences.tsx

@@ -8,24 +8,13 @@ export default function Preferences(): ReactElement {
 
   return (
     <ul className={styles.preferences}>
-      <li>
-        <Input
-          name="debug"
-          label="Debug Mode"
-          help="Activate to show geeky debug information in some places throughout the UI."
-          type="checkbox"
-          options={['Enable Debug Mode']}
-          defaultChecked={debug === true}
-          onChange={() => setDebug(!debug)}
-        />
-      </li>
       <li>
         <Input
           name="currency"
           label="Currency"
           help="Select your preferred currency."
           type="select"
-          options={['eur', 'usd']}
+          options={['EUR', 'USD']}
           value={currency}
           onChange={(e: ChangeEvent<HTMLSelectElement>) =>
             setCurrency(e.target.value)
@@ -33,6 +22,17 @@ export default function Preferences(): ReactElement {
           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,3 +1,17 @@
 .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

@@ -0,0 +1,17 @@
+.preferences {
+  padding: calc(var(--spacer) / 2);
+  margin-left: var(--spacer);
+  cursor: pointer;
+}
+
+.icon {
+  fill: var(--brand-grey-light);
+  transition: fill 0.2s ease-out;
+}
+
+.preferences:hover .icon,
+.preferences:focus .icon,
+.preferences:active .icon,
+.preferences[aria-expanded='true'] .icon {
+  fill: var(--brand-grey);
+}

src/components/molecules/UserPreferences/index.tsx

@@ -1,11 +1,17 @@
 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'
 
 export default function UserPreferences(): ReactElement {
   return (
-    <Tooltip content={<Preferences />} trigger="click focus">
-      Settings
+    <Tooltip
+      content={<Preferences />}
+      trigger="click focus"
+      className={styles.preferences}
+    >
+      <Cog aria-label="Preferences" className={styles.icon} />
     </Tooltip>
   )
 }

src/images/cog.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1593 10.98C17.1993 10.66 17.2293 10.34 17.2293 10C17.2293 9.66 17.1993 9.34 17.1593 9.02L19.2693 7.37C19.4593 7.22 19.5093 6.95 19.3893 6.73L17.3893 3.27C17.2693 3.05 16.9993 2.97 16.7793 3.05L14.2893 4.05C13.7693 3.65 13.2093 3.32 12.5993 3.07L12.2193 0.42C12.1893 0.18 11.9793 0 11.7293 0H7.72933C7.47933 0 7.26933 0.18 7.23933 0.42L6.85933 3.07C6.24933 3.32 5.68933 3.66 5.16933 4.05L2.67933 3.05C2.44933 2.96 2.18933 3.05 2.06933 3.27L0.0693316 6.73C-0.0606684 6.95 -0.000668302 7.22 0.189332 7.37L2.29933 9.02C2.25933 9.34 2.22933 9.67 2.22933 10C2.22933 10.33 2.25933 10.66 2.29933 10.98L0.189332 12.63C-0.000668302 12.78 -0.0506684 13.05 0.0693316 13.27L2.06933 16.73C2.18933 16.95 2.45933 17.03 2.67933 16.95L5.16933 15.95C5.68933 16.35 6.24933 16.68 6.85933 16.93L7.23933 19.58C7.26933 19.82 7.47933 20 7.72933 20H11.7293C11.9793 20 12.1893 19.82 12.2193 19.58L12.5993 16.93C13.2093 16.68 13.7693 16.34 14.2893 15.95L16.7793 16.95C17.0093 17.04 17.2693 16.95 17.3893 16.73L19.3893 13.27C19.5093 13.05 19.4593 12.78 19.2693 12.63L17.1593 10.98V10.98ZM9.72933 13.5C7.79933 13.5 6.22933 11.93 6.22933 10C6.22933 8.07 7.79933 6.5 9.72933 6.5C11.6593 6.5 13.2293 8.07 13.2293 10C13.2293 11.93 11.6593 13.5 9.72933 13.5Z" />
+</svg>

src/providers/UserPreferences.tsx

@@ -6,7 +6,7 @@ import React, {
   useState
 } from 'react'
 
-declare type Currency = 'eur' | 'usd'
+declare type Currency = 'EUR' | 'USD'
 
 interface UserPreferencesValue {
   debug: boolean
@@ -23,7 +23,7 @@ function UserPreferencesProvider({
   children: ReactNode
 }): ReactElement {
   const [debug, setDebug] = useState<boolean>(false)
-  const [currency, setCurrency] = useState<Currency>('eur')
+  const [currency, setCurrency] = useState<Currency>('EUR')
 
   return (
     <UserPreferencesContext.Provider