diff --git a/app/globals.css b/app/globals.css index 25bdf84..be0f3fc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,5 +1,5 @@ :root { - --max-width: 42rem; + --max-width: 40rem; --border-radius: 0.3rem; --foreground-rgb: 20, 20, 20; diff --git a/components/CalculationBaseOutput/CalculationBase.module.css b/components/CalculationBaseOutput/CalculationBase.module.css index 0021ebe..6e571ca 100644 --- a/components/CalculationBaseOutput/CalculationBase.module.css +++ b/components/CalculationBaseOutput/CalculationBase.module.css @@ -1,6 +1,6 @@ .calculationBase { display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); justify-content: center; border-top: 1px solid rgba(var(--foreground-rgb), 0.2); border-left: 1px solid rgba(var(--foreground-rgb), 0.2); diff --git a/components/ResultRow/ResultRow.module.css b/components/ResultRow/ResultRow.module.css index 15e9acc..a0807c3 100644 --- a/components/ResultRow/ResultRow.module.css +++ b/components/ResultRow/ResultRow.module.css @@ -6,13 +6,25 @@ margin-bottom: 0; } -.conversion { - padding-left: calc(24px + 0.5rem); +.resultLine { + display: inline-grid; + grid-template-columns: 24px 1fr 2fr; + gap: 0.5rem; + align-items: center; + width: 100%; + margin-bottom: 0.25rem; +} + +.fiat { + color: rgba(var(--foreground-rgb), 0.6); +} + +.iconArrow { + margin-left: 0.25rem; } .logo { - margin-right: 0.5rem; - margin-top: -0.2rem; + margin-top: -0.15rem; vertical-align: middle; display: inline-flex; align-items: center; diff --git a/components/ResultRow/ResultRow.tsx b/components/ResultRow/ResultRow.tsx index 47ae222..6de30ee 100644 --- a/components/ResultRow/ResultRow.tsx +++ b/components/ResultRow/ResultRow.tsx @@ -1,5 +1,6 @@ import styles from './ResultRow.module.css' import { formatNumber } from '@/utils' +import { ArrowRightIcon } from '@radix-ui/react-icons' import Image from 'next/image' type Props = { @@ -8,6 +9,7 @@ type Props = { amount: number amountAsi: number amountFiat: number + amountOriginalFiat?: number } export function Result({ @@ -15,11 +17,12 @@ export function Result({ tokenAddress, amount, amountAsi, - amountFiat + amountFiat, + amountOriginalFiat }: Props) { return (
-

+

- {formatNumber(amount || 0, tokenSymbol)} -

-

- →{' '} + {formatNumber(amount || 0, tokenSymbol)} + + {amountOriginalFiat ? ( + + {formatNumber(amountOriginalFiat || 0, 'USD')} + + ) : null} +

+
+ {formatNumber(amountAsi || 0, 'ASI')} - {' '} - = {formatNumber(amountFiat || 0, 'USD')} -

+ + + {formatNumber(amountFiat || 0, 'USD')} + +
) } diff --git a/components/Strategies/Swap.tsx b/components/Strategies/Swap.tsx index b41eec8..49a4cd9 100644 --- a/components/Strategies/Swap.tsx +++ b/components/Strategies/Swap.tsx @@ -6,7 +6,7 @@ import { ratioFetToAsi, tokens } from '@/constants' -import { fetcher, formatNumber } from '@/utils' +import { fetcher } from '@/utils' import { Result } from '@/components/ResultRow' import stylesShared from './styles.module.css' import { useState } from 'react' @@ -41,8 +41,7 @@ export function Swap() { setAmount={setAmount} // setToken={setToken} />{' '} - ({formatNumber(amount * prices[token || 'ocean'], 'USD')}) right now - gets you: + right now gets you: ) diff --git a/components/Strategies/styles.module.css b/components/Strategies/styles.module.css index 9bd491a..52f936b 100644 --- a/components/Strategies/styles.module.css +++ b/components/Strategies/styles.module.css @@ -18,7 +18,6 @@ .title { margin-bottom: 1.5rem; - font-size: 1.1rem; - min-height: 52px; + font-size: 1.2rem; color: rgb(var(--foreground-rgb-highlight)); }