function preferences ui

src/components/atoms/Input/InputElement.module.css

@@ -135,9 +135,8 @@
 /* Size modifiers */
 
 .small {
-  composes: input;
   font-size: var(--font-size-small);
-  min-height: 32px;
+  min-height: 34px;
   padding: calc(var(--spacer) / 4);
 }
 
@@ -146,8 +145,8 @@
 }
 
 .selectSmall {
-  composes: select;
+  composes: small;
-  height: 32px;
+  height: 34px;
   padding-right: 2rem;
 
   /* custom arrow */

src/components/atoms/Input/InputElement.tsx

@@ -11,12 +11,16 @@ const DefaultInput = (props: InputProps) => (
 )
 
 export default function InputElement(props: InputProps): ReactElement {
-  const { type, options, name, prefix, postfix } = props
+  const { type, options, name, prefix, postfix, small } = props
 
   switch (type) {
     case 'select':
       return (
-        <select id={name} className={styles.select} {...props}>
+        <select
+          id={name}
+          className={`${styles.select} ${small && styles.selectSmall}`}
+          {...props}
+        >
           <option value="">---</option>
           {options &&
             options

src/components/atoms/Input/index.tsx

@@ -37,6 +37,8 @@ export interface InputProps {
   prefix?: string
   postfix?: string
   step?: string
+  defaultChecked?: boolean
+  small?: boolean
 }
 
 export default function Input(props: Partial<InputProps>): ReactElement {

src/components/molecules/Menu.tsx

@@ -6,6 +6,7 @@ import styles from './Menu.module.css'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import Container from '../atoms/Container'
+import UserPreferences from './UserPreferences'
 
 const Wallet = loadable(() => import('./Wallet'))
 
@@ -49,6 +50,9 @@ export default function Menu(): ReactElement {
               <MenuLink item={item} />
             </li>
           ))}
+          <li>
+            <UserPreferences />
+          </li>
         </ul>
       </Container>
     </nav>

src/components/molecules/UserPreferences/Preferences.tsx

@@ -0,0 +1,38 @@
+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="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']}
+          value={currency}
+          onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+            setCurrency(e.target.value)
+          }
+          small
+        />
+      </li>
+    </ul>
+  )
+}

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

@@ -0,0 +1,3 @@
+.preferences {
+  padding: calc(var(--spacer) / 2);
+}

src/components/molecules/UserPreferences/index.tsx

@@ -0,0 +1,11 @@
+import React, { ReactElement } from 'react'
+import Tooltip from '../../atoms/Tooltip'
+import Preferences from './Preferences'
+
+export default function UserPreferences(): ReactElement {
+  return (
+    <Tooltip content={<Preferences />} trigger="click focus">
+      Settings
+    </Tooltip>
+  )
+}