diff --git a/src/features/Web3/components/Conversion/Conversion.module.css b/src/features/Web3/components/Conversion/Conversion.module.css index cf0ca5a0..e278a5dc 100644 --- a/src/features/Web3/components/Conversion/Conversion.module.css +++ b/src/features/Web3/components/Conversion/Conversion.module.css @@ -1,12 +1,19 @@ .conversion { font-size: var(--font-size-mini); color: var(--text-color-light); - text-align: left; - margin-top: 0; - margin-left: calc(var(--spacer) * 2.4); + text-align: center; + margin-top: calc(var(--spacer) / 6); animation: fadeIn 0.5s 0.8s ease-out backwards; } +@media screen and (min-width: 40rem) { + .conversion { + text-align: left; + margin-top: 0; + margin-left: calc(var(--spacer) * 2.4); + } +} + .conversion span { margin-left: calc(var(--spacer) / 2); } diff --git a/src/features/Web3/components/Input/InputGroup.module.css b/src/features/Web3/components/Input/InputGroup.module.css index bac9ff78..a58fd30f 100644 --- a/src/features/Web3/components/Input/InputGroup.module.css +++ b/src/features/Web3/components/Input/InputGroup.module.css @@ -4,11 +4,26 @@ animation: fadeIn 0.8s ease-out backwards; margin-top: calc(var(--spacer) / 3); display: flex; + flex-direction: column; min-height: 54px; } +@media (min-width: 40rem) { + .inputGroup { + flex-direction: row; + } +} + +.inputWrap { + display: flex; + flex-direction: row; + align-items: center; +} + .token { width: 80px; + height: 100%; + min-height: 54px; background: var(--box-background-color); border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); @@ -43,10 +58,13 @@ } .submit { - width: 100%; + width: calc(100% - calc(var(--spacer) / 2) - 2px); + max-width: none; border-top-left-radius: 0; border-top-right-radius: 0; border-color: var(--link-color); + padding-left: calc(var(--spacer) / 4); + padding-right: calc(var(--spacer) / 4); } @media (min-width: 40rem) { diff --git a/src/features/Web3/components/Input/InputGroup.tsx b/src/features/Web3/components/Input/InputGroup.tsx index 822da4df..35c281d0 100644 --- a/src/features/Web3/components/Input/InputGroup.tsx +++ b/src/features/Web3/components/Input/InputGroup.tsx @@ -16,18 +16,21 @@ export function InputGroup({ return ( <>
-
- +
+
+ +
+ setAmount(e.target.value)} + className={styles.inputInput} + />
- setAmount(e.target.value)} - className={styles.inputInput} - /> +