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)} + + {amountOriginalFiat ? ( + + {formatNumber(amountOriginalFiat || 0, 'USD')} + + ) : null} +