form refactor

components/FormInline/FormInline.module.css

@@ -3,6 +3,6 @@
   border: 1px solid rgba(var(--foreground-rgb), 0.15);
   border-radius: var(--border-radius);
   overflow: hidden;
-  margin: -0.15em 0.25rem 0 0.25rem;
+  margin-top: -0.15em;
   font-size: 0.9em;
 }

components/FormInline/FormInline.tsx

@@ -0,0 +1,5 @@
+import styles from './FormInline.module.css'
+
+export function FormInline({ children }: { children: React.ReactNode }) {
+  return <form className={styles.form}>{children}</form>
+}

components/FormInline/index.tsx

@@ -0,0 +1 @@
+export * from './FormInline'

components/Input/Input.module.css

@@ -6,20 +6,10 @@
 }
 
 .input:hover {
-  background-color: rgba(var(--background-rgb), 0.5);
+  background-color: rgba(var(--background-rgb), 0.1);
 }
 
 .input:focus-within {
   outline: none;
-  background-color: rgba(var(--background-rgb), 0.9);
-}
-
-@media (prefers-color-scheme: dark) {
-  .input:hover {
-    background-color: rgba(var(--foreground-rgb), 0.1);
-  }
-
-  .input:focus-within {
-    background-color: rgba(var(--foreground-rgb), 0.2);
-  }
+  background-color: rgba(var(--background-rgb), 0.3);
 }

components/Select/Select.module.css

@@ -9,22 +9,12 @@
 }
 
 .select:hover:not(.select[disabled]) {
-  background-color: rgba(var(--background-rgb), 0.5);
+  background-color: rgba(var(--background-rgb), 0.1);
 }
 
 .select:focus-within {
   outline: none;
-  background-color: rgba(var(--background-rgb), 0.9);
-}
-
-@media (prefers-color-scheme: dark) {
-  .select:hover:not(.select[disabled]) {
-    background-color: rgba(var(--foreground-rgb), 0.1);
-  }
-
-  .select:focus-within {
-    background-color: rgba(var(--foreground-rgb), 0.2);
-  }
+  background-color: rgba(var(--background-rgb), 0.3);
 }
 
 .icon {

components/index.tsx

@@ -1,5 +1,6 @@
 export * from './Content'
 export * from './Footer'
+export * from './FormInline'
 export * from './Header'
 export * from './Input'
 export * from './Label'

content.md

@@ -1,6 +1,6 @@
 The **→ lines** show what you would get with the displayed token amount at the moment of the ASI swap, along with the converted value based on the current market price of FET.
 
-The fiat values are fetched from [Coingecko](https://coingecko.com), and the token swap estimations directly from [Uniswap](https://uniswap.org) v3 swap routes.
+The fiat values are fetched from [Coingecko](https://coingecko.com) and used to calculate the _All Markets_ scenario. The token swap estimations for Uniswap are fetched directly from [Uniswap](https://uniswap.org) v3 swap routes.
 
 All displayed values should be seen as estimates. Except for the [fixed ASI exchange rate](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e), all other values are constantly changing based on market conditions. There is no guarantee the displayed values reflect the value of your investment once the actual ASI swap mechanism is released. Use at your own risk.
 

features/strategies/components/FormAmount.tsx

@@ -1,7 +1,6 @@
-import styles from './FormAmount.module.css'
 import { Dispatch, SetStateAction } from 'react'
 import { TokenSymbol } from '@/types'
-import { Select, Input } from '@/components'
+import { Select, Input, FormInline } from '@/components'
 
 export function FormAmount({
   amount,
@@ -40,7 +39,7 @@ export function FormAmount({
       ]
 
   return (
-    <form className={styles.form}>
+    <FormInline>
       <Input
         type="text"
         inputMode="numeric"
@@ -59,6 +58,6 @@ export function FormAmount({
         disabled={!setToken}
         style={setToken ? { paddingRight: '1.25rem' } : {}}
       />
-    </form>
+    </FormInline>
   )
 }

features/strategies/components/FormAmount/index.tsx

@@ -1 +0,0 @@
-export * from './FormAmount'

features/strategies/components/FormMarket.tsx

@@ -1,6 +1,5 @@
-import styles from './FormMarket.module.css'
 import { Dispatch, SetStateAction } from 'react'
-import { Select } from '@/components'
+import { Select, FormInline } from '@/components'
 import { type Market } from '@/features/strategies'
 
 export function FormMarket({
@@ -15,13 +14,13 @@ export function FormMarket({
     { value: 'uniswap-v3', label: 'Uniswap v3' }
   ]
   return (
-    <form className={styles.form}>
+    <FormInline>
       <Select
         options={options}
         value={market}
         onChange={(e) => setMarket(e.target.value as Market)}
         style={{ paddingRight: '1.25rem' }}
       />
-    </form>
+    </FormInline>
   )
 }

features/strategies/components/FormMarket/FormMarket.module.css

@@ -1,8 +0,0 @@
-.form {
-  display: inline-flex;
-  border: 1px solid rgba(var(--foreground-rgb), 0.15);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  margin: -0.15em 0.25rem 0 0.25rem;
-  font-size: 0.9em;
-}

features/strategies/components/FormMarket/index.tsx

@@ -1 +0,0 @@
-export * from './FormMarket'

features/strategies/components/index.tsx

@@ -1,3 +1,5 @@
 export * from './FormAmount'
 export * from './FormMarket'
 export * from './Result'
+export * from './Buy'
+export * from './Swap'

features/strategies/index.tsx

@@ -1,4 +1,3 @@
-export * from './components/Buy'
-export * from './components/Swap'
+export * from './components'
 export * from './hooks'
 export * from './types'