new coin selection

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

@@ -11,7 +11,7 @@
   margin: 0;
   border-radius: var(--border-radius);
   transition: 0.2s ease-out;
-  min-height: 43px;
+  height: 43px;
   min-width: 0;
   appearance: none;
   display: block;
@@ -179,7 +179,7 @@
 .prefix,
 .postfix {
   border: 1px solid var(--brand-grey-lighter);
-  min-height: 43px;
+  height: 43px;
   display: flex;
   align-items: center;
   padding-left: calc(var(--spacer) / 4);
@@ -188,6 +188,7 @@
   font-size: var(--font-size-small);
   transition: border 0.2s ease-out;
   white-space: nowrap;
+  position: relative;
 }
 
 .prefix {

src/components/organisms/AssetActions/Pool/Add.module.css

@@ -1,8 +1,8 @@
 .addInput {
   margin: 0 auto calc(var(--spacer) / 1.5) auto;
   background: var(--brand-grey-dimmed);
-  padding: var(--spacer) calc(var(--spacer) * 3) calc(var(--spacer) * 1.2)
-    calc(var(--spacer) * 3);
+  padding: var(--spacer) calc(var(--spacer) * 2.5) calc(var(--spacer) * 1.2)
+    calc(var(--spacer) * 2.5);
   border-bottom: 1px solid var(--brand-grey-lighter);
   margin-top: -2rem;
   margin-left: -2rem;
@@ -22,7 +22,7 @@
   position: absolute;
   font-size: var(--font-size-mini);
   bottom: calc(var(--spacer) / 2);
-  right: calc(var(--spacer) * 3);
+  right: calc(var(--spacer) * 2.5);
 }
 
 .userLiquidity > div {
@@ -42,24 +42,6 @@
   transform-origin: right center;
 }
 
-.coinswitch,
-.coinPopover li {
-  cursor: pointer;
-}
-
-.coinswitch svg {
-  width: 0.6em;
-  height: 0.6em;
-  display: inline-block;
-  fill: currentColor;
-  margin-right: 0.5rem;
-  margin-left: 0.25rem;
-}
-
-.coinPopover li {
-  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
-}
-
 .output {
   display: grid;
   gap: var(--spacer);

src/components/organisms/AssetActions/Pool/Add.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, useEffect, ChangeEvent } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import styles from './Add.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
@@ -8,12 +8,11 @@ import Token from './Token'
 import { Balance } from './'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Actions from './Actions'
-import Tooltip from '../../../atoms/Tooltip'
-import { ReactComponent as Caret } from '../../../../images/caret.svg'
 import { graphql, useStaticQuery } from 'gatsby'
 import * as Yup from 'yup'
 import { Field, Formik } from 'formik'
 import Input from '../../../atoms/Input'
+import CoinSelect from './CoinSelect'
 
 const contentQuery = graphql`
   query PoolAddQuery {
@@ -138,17 +137,6 @@ export default function Add({
     }
   }
 
-  // TODO: this is only a prototype and is an accessibility nightmare.
-  // Needs to be refactored to either use custom select element instead of tippy.js,
-  // or use <button> in this implementation.
-  // Also needs to be closed when users click an option.
-  const CoinSelect = () => (
-    <ul className={styles.coinPopover}>
-      <li onClick={() => setCoin('OCEAN')}>OCEAN</li>
-      <li onClick={() => setCoin(dtSymbol)}>{dtSymbol}</li>
-    </ul>
-  )
-
   return (
     <>
       <Header title={content.title} backAction={() => setShowAdd(false)} />
@@ -205,15 +193,7 @@ export default function Add({
                       max={amountMax}
                       value={`${values.amount}`}
                       prefix={
-                        <Tooltip
-                          content={<CoinSelect />}
-                          trigger="click focus"
-                          className={styles.coinswitch}
-                          placement="bottom"
-                        >
-                          {coin}
-                          <Caret aria-hidden="true" />
-                        </Tooltip>
+                        <CoinSelect dtSymbol={dtSymbol} setCoin={setCoin} />
                       }
                       placeholder="0"
                       field={field}

src/components/organisms/AssetActions/Pool/CoinSelect.module.css

@@ -0,0 +1,25 @@
+.coinSelect {
+  composes: select from '../../../atoms/Input/InputElement.module.css';
+  font-size: var(--font-size-small);
+  border: none;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+  background-color: var(--brand-grey-dimmed);
+  width: auto;
+  padding: 0 1.25rem 0 0.25rem;
+  height: 41px;
+  text-align: center;
+
+  /* custom arrow, without the divider line */
+  background-image: linear-gradient(
+      45deg,
+      transparent 50%,
+      var(--brand-purple) 50%
+    ),
+    linear-gradient(135deg, var(--brand-grey) 50%, transparent 50%);
+  background-position: calc(100% - 14px) 1.2rem, calc(100% - 9px) 1.2rem, 100% 0;
+}
+
+.option {
+  color: var(--brand-grey-dark);
+}

src/components/organisms/AssetActions/Pool/CoinSelect.tsx

@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react'
+import styles from './CoinSelect.module.css'
+
+export default function CoinSelect({
+  dtSymbol,
+  setCoin
+}: {
+  dtSymbol: string
+  setCoin: (coin: string) => void
+}): ReactElement {
+  return (
+    <select
+      className={styles.coinSelect}
+      onChange={(e) => setCoin(e.target.value)}
+    >
+      <option className={styles.option} value="OCEAN">
+        OCEAN
+      </option>
+      <option className={styles.option} value={dtSymbol}>
+        {dtSymbol}
+      </option>
+    </select>
+  )
+}