diff --git a/.changeset/plenty-plants-impress.md b/.changeset/plenty-plants-impress.md new file mode 100644 index 0000000000..29cd92bdac --- /dev/null +++ b/.changeset/plenty-plants-impress.md @@ -0,0 +1,6 @@ +--- +'@galacticcouncil/apps': patch +'@galacticcouncil/ui': patch +--- + +Updated XCM form layout diff --git a/packages/apps/src/app/xcm/Form.css b/packages/apps/src/app/xcm/Form.css index a2b2b03d10..78689bc0b5 100644 --- a/packages/apps/src/app/xcm/Form.css +++ b/packages/apps/src/app/xcm/Form.css @@ -9,7 +9,7 @@ flex-direction: column; padding: 0 14px; box-sizing: border-box; - row-gap: 11px; + row-gap: 10px; position: relative; } @@ -18,7 +18,7 @@ flex-direction: column; justify-content: space-between; align-items: center; - grid-gap: 11px; + grid-gap: 10px; } .transfer .label { @@ -28,32 +28,30 @@ color: rgba(255, 255, 255, 0.7); } -.transfer .divider { - background: var(--uigc-divider-background); - height: 1px; - width: 100%; - left: 0; - position: absolute; -} - -.transfer .switch__desktop { - display: none; -} - -.transfer .switch__mobile { +.switch { display: block; align-items: center; display: flex; height: 43px; justify-content: center; width: 100%; + margin: 6px auto; } -.transfer uigc-asset-switch.switch { - background: var(--uigc-asset-switch-background); +.switch .divider { + background: var(--uigc-divider-background); + height: 1px; + width: 40%; position: absolute; } +.switch .divider.left { + left: 14px; +} +.switch .divider.right { + right: 14px; +} + .errors { display: flex; flex-direction: column; @@ -67,21 +65,19 @@ align-items: center; grid-gap: 11px; } - - .transfer .switch__desktop { - display: block; - transform: rotate(270deg); - } - - .transfer .switch__mobile { - display: none; - } } @media (min-width: 768px) { .transfer { padding: 0 28px; } + + .switch .divider.left { + left: 28px; + } + .switch .divider.right { + right: 28px; + } } .spinner { diff --git a/packages/apps/src/app/xcm/Form.ts b/packages/apps/src/app/xcm/Form.ts index b3ef202959..cb8371a9f0 100644 --- a/packages/apps/src/app/xcm/Form.ts +++ b/packages/apps/src/app/xcm/Form.ts @@ -277,13 +277,13 @@ export class XcmForm extends LitElement { return this.formAssetLoadingTemplate(); } - formSelectAssetTemplate() { + formSelectSourceAssetTemplate() { const balance = this.balance?.toDecimal(this.balance.decimals); const max = this.max?.toDecimal(this.max.decimals); return html` - - - -
-
- -
- - - - - + + ${this.formAssetTemplate(this.asset)} + + `; + } + + formSelectSourceChainTemplate() { + return html` + + + + `; + } + + formSelectDestChainTemplate() { + return html` + + + `; } @@ -384,14 +397,17 @@ export class XcmForm extends LitElement { return html`
- - ${i18n.t('form.section.chains')} - - ${this.formSelectChainTemplate()} - - ${i18n.t('form.section.asset')} - - ${this.formSelectAssetTemplate()} ${this.formAddressTemplate()} + ${this.formSelectSourceChainTemplate()} + ${this.formSelectSourceAssetTemplate()} +
+
+
+ +
+
+
+ ${this.formSelectDestChainTemplate()} + ${this.formSelectDestAssetTemplate()} ${this.formAddressTemplate()}
diff --git a/packages/apps/src/app/xcm/translation.en.json b/packages/apps/src/app/xcm/translation.en.json index 4812582349..13267975e4 100644 --- a/packages/apps/src/app/xcm/translation.en.json +++ b/packages/apps/src/app/xcm/translation.en.json @@ -18,8 +18,9 @@ "form.chainSrc.label": "Source chain", "form.chainDst.label": "Destination chain", - "form.asset.label": "Transfer asset", - "form.address.label": "To address", + "form.assetSrc.label": "Asset to transfer", + "form.assetDst.label": "Asset to receive", + "form.address.label": "Destination address", "form.info.sourceFee": "Source chain fee:", "form.info.destFee": "Destination chain fee:", diff --git a/packages/ui/src/component/Chain.css b/packages/ui/src/component/Chain.css index 323f5f8735..1f3380b816 100644 --- a/packages/ui/src/component/Chain.css +++ b/packages/ui/src/component/Chain.css @@ -16,6 +16,6 @@ span.title { uigc-logo-chain, uigc-logo-placeholder { - width: 34px; - height: 34px; + width: 24px; + height: 24px; } diff --git a/packages/ui/src/component/ChainSelector.css b/packages/ui/src/component/ChainSelector.css index 2ca8b6f311..3cc653c176 100644 --- a/packages/ui/src/component/ChainSelector.css +++ b/packages/ui/src/component/ChainSelector.css @@ -27,6 +27,8 @@ button .title { } button .chain { + margin-left: auto; + padding: 0 8px; display: flex; flex-direction: column; gap: 14px; diff --git a/packages/ui/src/component/ChainSelector.ts b/packages/ui/src/component/ChainSelector.ts index 22abd1491c..754da5240a 100644 --- a/packages/ui/src/component/ChainSelector.ts +++ b/packages/ui/src/component/ChainSelector.ts @@ -26,8 +26,8 @@ export class ChainSelector extends UIGCElement { render() { return html`