From dfbf7bb55a7696e323eb5101630806f35f6652c0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 1 Apr 2024 14:49:03 +0100
Subject: [PATCH] form refactor

---
 .../FormInline/FormInline.module.css               |  2 +-
 components/FormInline/FormInline.tsx               |  5 +++++
 components/FormInline/index.tsx                    |  1 +
 components/Input/Input.module.css                  | 14 ++------------
 components/Select/Select.module.css                | 14 ++------------
 components/index.tsx                               |  1 +
 content.md                                         |  2 +-
 .../components/{FormAmount => }/FormAmount.tsx     |  7 +++----
 .../strategies/components/FormAmount/index.tsx     |  1 -
 .../components/{FormMarket => }/FormMarket.tsx     |  7 +++----
 .../components/FormMarket/FormMarket.module.css    |  8 --------
 .../strategies/components/FormMarket/index.tsx     |  1 -
 features/strategies/components/index.tsx           |  2 ++
 features/strategies/index.tsx                      |  3 +--
 14 files changed, 22 insertions(+), 46 deletions(-)
 rename features/strategies/components/FormAmount/FormAmount.module.css => components/FormInline/FormInline.module.css (81%)
 create mode 100644 components/FormInline/FormInline.tsx
 create mode 100644 components/FormInline/index.tsx
 rename features/strategies/components/{FormAmount => }/FormAmount.tsx (90%)
 delete mode 100644 features/strategies/components/FormAmount/index.tsx
 rename features/strategies/components/{FormMarket => }/FormMarket.tsx (80%)
 delete mode 100644 features/strategies/components/FormMarket/FormMarket.module.css
 delete mode 100644 features/strategies/components/FormMarket/index.tsx

diff --git a/features/strategies/components/FormAmount/FormAmount.module.css b/components/FormInline/FormInline.module.css
similarity index 81%
rename from features/strategies/components/FormAmount/FormAmount.module.css
rename to components/FormInline/FormInline.module.css
index 738f394..fa94c51 100644
--- a/features/strategies/components/FormAmount/FormAmount.module.css
+++ b/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;
 }
diff --git a/components/FormInline/FormInline.tsx b/components/FormInline/FormInline.tsx
new file mode 100644
index 0000000..d3b632b
--- /dev/null
+++ b/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>
+}
diff --git a/components/FormInline/index.tsx b/components/FormInline/index.tsx
new file mode 100644
index 0000000..85ea750
--- /dev/null
+++ b/components/FormInline/index.tsx
@@ -0,0 +1 @@
+export * from './FormInline'
diff --git a/components/Input/Input.module.css b/components/Input/Input.module.css
index 0da69f2..06427d0 100644
--- a/components/Input/Input.module.css
+++ b/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);
 }
diff --git a/components/Select/Select.module.css b/components/Select/Select.module.css
index 579e51d..2e13981 100644
--- a/components/Select/Select.module.css
+++ b/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 {
diff --git a/components/index.tsx b/components/index.tsx
index caafba3..aa71048 100644
--- a/components/index.tsx
+++ b/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'
diff --git a/content.md b/content.md
index 23bcf84..986b632 100644
--- a/content.md
+++ b/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.
 
diff --git a/features/strategies/components/FormAmount/FormAmount.tsx b/features/strategies/components/FormAmount.tsx
similarity index 90%
rename from features/strategies/components/FormAmount/FormAmount.tsx
rename to features/strategies/components/FormAmount.tsx
index a8b8e09..3569c66 100644
--- a/features/strategies/components/FormAmount/FormAmount.tsx
+++ b/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>
   )
 }
diff --git a/features/strategies/components/FormAmount/index.tsx b/features/strategies/components/FormAmount/index.tsx
deleted file mode 100644
index 02478c5..0000000
--- a/features/strategies/components/FormAmount/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './FormAmount'
diff --git a/features/strategies/components/FormMarket/FormMarket.tsx b/features/strategies/components/FormMarket.tsx
similarity index 80%
rename from features/strategies/components/FormMarket/FormMarket.tsx
rename to features/strategies/components/FormMarket.tsx
index 875d98f..715d452 100644
--- a/features/strategies/components/FormMarket/FormMarket.tsx
+++ b/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>
   )
 }
diff --git a/features/strategies/components/FormMarket/FormMarket.module.css b/features/strategies/components/FormMarket/FormMarket.module.css
deleted file mode 100644
index 738f394..0000000
--- a/features/strategies/components/FormMarket/FormMarket.module.css
+++ /dev/null
@@ -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;
-}
diff --git a/features/strategies/components/FormMarket/index.tsx b/features/strategies/components/FormMarket/index.tsx
deleted file mode 100644
index 02153f2..0000000
--- a/features/strategies/components/FormMarket/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './FormMarket'
diff --git a/features/strategies/components/index.tsx b/features/strategies/components/index.tsx
index f59a09f..43a71f7 100644
--- a/features/strategies/components/index.tsx
+++ b/features/strategies/components/index.tsx
@@ -1,3 +1,5 @@
 export * from './FormAmount'
 export * from './FormMarket'
 export * from './Result'
+export * from './Buy'
+export * from './Swap'
diff --git a/features/strategies/index.tsx b/features/strategies/index.tsx
index 22d2f5f..dadf59b 100644
--- a/features/strategies/index.tsx
+++ b/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'