From af26decc833085af65d9d988108d4a6667680577 Mon Sep 17 00:00:00 2001
From: Jay <lygm1062@gmail.com>
Date: Tue, 30 Apr 2024 12:07:36 +0800
Subject: [PATCH] UX Improvement (#20)

* Remove ConnectWallet from header

* Reposition Send and Recipient above From and To

* Update max-width of ChainSelect

* Update width of AssetSelect

* Update disabled style of BalanceInput

* Update styles of Transfer

* Update slack_channel
---
 .github/workflows/deploy-dev.yml |  2 +-
 .github/workflows/deploy-prd.yml |  2 +-
 .github/workflows/deploy-stg.yml |  2 +-
 src/components/asset-select.tsx  |  2 +-
 src/components/balance-input.tsx |  2 +-
 src/components/chain-select.tsx  |  2 +-
 src/components/header.tsx        |  4 --
 src/components/transfer.tsx      | 64 ++++++++++++++++----------------
 8 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
index e073dab..6156023 100644
--- a/.github/workflows/deploy-dev.yml
+++ b/.github/workflows/deploy-dev.yml
@@ -27,5 +27,5 @@ jobs:
           script_run: false
           dist_path: .
           enable_notify_slack: true
-          slack_channel: darwinia-apps
+          slack_channel: public-darwinia-websites-apps
           slack_webhook: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
diff --git a/.github/workflows/deploy-prd.yml b/.github/workflows/deploy-prd.yml
index a69590e..422ee36 100644
--- a/.github/workflows/deploy-prd.yml
+++ b/.github/workflows/deploy-prd.yml
@@ -29,6 +29,6 @@ jobs:
           script_run: false
           dist_path: .
           enable_notify_slack: true
-          slack_channel: darwinia-apps
+          slack_channel: public-darwinia-websites-apps
           slack_webhook: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
 
diff --git a/.github/workflows/deploy-stg.yml b/.github/workflows/deploy-stg.yml
index bfc0c8e..2ee6ee3 100644
--- a/.github/workflows/deploy-stg.yml
+++ b/.github/workflows/deploy-stg.yml
@@ -28,5 +28,5 @@ jobs:
           script_run: false
           dist_path: .
           enable_notify_slack: true
-          slack_channel: darwinia-apps
+          slack_channel: public-darwinia-websites-apps
           slack_webhook: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
diff --git a/src/components/asset-select.tsx b/src/components/asset-select.tsx
index ecd742e..5bff412 100644
--- a/src/components/asset-select.tsx
+++ b/src/components/asset-select.tsx
@@ -21,7 +21,7 @@ export default function AssetSelect({ value, options, disabled, onChange = () =>
       }
       disabled={disabled}
       sameWidth
-      labelClassName="flex items-center gap-middle shrink-0 w-28 justify-between bg-component h-full border-radius px-1 hover:opacity-80 transition-[transform,color] disabled:translate-y-0 disabled:opacity-100 disabled:cursor-not-allowed"
+      labelClassName="flex items-center gap-middle shrink-0 w-32 justify-between bg-component h-full border-radius px-1 hover:opacity-80 transition-[transform,color] disabled:translate-y-0 disabled:opacity-100 disabled:cursor-not-allowed"
       childClassName="flex flex-col py-small bg-component border-primary border border-radius gap-[1px]"
     >
       {options?.length ? (
diff --git a/src/components/balance-input.tsx b/src/components/balance-input.tsx
index 4adc5ff..0fcad8f 100644
--- a/src/components/balance-input.tsx
+++ b/src/components/balance-input.tsx
@@ -107,7 +107,7 @@ export default function BalanceInput({
     <div
       className={`border-radius relative flex h-12 items-center justify-between border p-1 transition-colors ${
         value?.valid === false ? "border-alert" : "border-transparent"
-      }`}
+      } ${disabled ? "opacity-50" : ""}`}
     >
       <Input
         disabled={disabled}
diff --git a/src/components/chain-select.tsx b/src/components/chain-select.tsx
index 1774708..405fe50 100644
--- a/src/components/chain-select.tsx
+++ b/src/components/chain-select.tsx
@@ -14,7 +14,7 @@ export default function ChainSelect({ value, options, disabled, onChange = () =>
   return (
     <Select
       label={
-        <div className="flex max-w-[140px] items-center gap-small">
+        <div className="flex max-w-[12rem] items-center gap-small">
           <Image width={20} height={20} alt="Chain logo" src={getChainLogoSrc(value.logo)} />
           <span className="truncate text-white/50">{value.name}</span>
         </div>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 918ed75..6a45158 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,8 +1,5 @@
 import Image from "next/image";
 import Link from "next/link";
-import dynamic from "next/dynamic";
-
-const ConnectWallet = dynamic(() => import("@/components/connect-wallet"), { ssr: false });
 
 export default function Header() {
   return (
@@ -11,7 +8,6 @@ export default function Header() {
         <Link href="/">
           <Image width={156} height={18} alt="Logo" src="/images/logo.png" />
         </Link>
-        <ConnectWallet kind="primary" who="sender" />
       </div>
     </div>
   );
diff --git a/src/components/transfer.tsx b/src/components/transfer.tsx
index 9d777b1..f7d6ae1 100644
--- a/src/components/transfer.tsx
+++ b/src/components/transfer.tsx
@@ -238,12 +238,41 @@ export default function Transfer() {
       : [];
 
   return (
-    <div className="border-radius mx-auto mt-10 flex w-[30rem] flex-col gap-5 bg-component p-5 pb-8">
+    <div className="border-radius mx-auto mt-10 flex w-[34rem] flex-col gap-5 bg-component p-5 pb-8 shadow-2xl">
+      {/* Sender */}
+      <TransferSection label="Sender" className="border-radius mt-10 border-[2px] border-white/20">
+        <AddressInput
+          who="sender"
+          placeholder="Select an address"
+          value={sender}
+          options={senderOptions}
+          accounts={activeSenderWallet === WalletID.TALISMAN ? talismanAccounts : []}
+          onClear={setSender}
+          onChange={setSender}
+          onAccountChange={setActiveSenderAccount}
+        />
+      </TransferSection>
+
+      {/* Recipient */}
+      <TransferSection label="Recipient" className="border-radius mt-10 border-[2px] border-white/20">
+        <AddressInput
+          canInput
+          who="recipient"
+          placeholder="Select or enter an address"
+          value={recipient}
+          options={recipientOptions}
+          accounts={activeRecipientWallet === WalletID.TALISMAN ? talismanAccounts : []}
+          onClear={setRecipient}
+          onChange={setRecipient}
+          onAccountChange={setActiveRecipientAccount}
+        />
+      </TransferSection>
+
       {/* From */}
       <TransferSection
         label="From"
         extra={<ChainSelect value={sourceChain} options={sourceChainOptions} onChange={_setSourceChain} />}
-        className="mb-3 mt-12"
+        className="border-radius mb-3 mt-12 border-[2px] border-white/20"
       >
         <BalanceInput
           value={transferAmount}
@@ -265,40 +294,11 @@ export default function Transfer() {
       <TransferSection
         label="To"
         extra={<ChainSelect value={targetChain} options={targetChainOptions} onChange={_setTargetChain} />}
-        className="mt-3"
+        className="border-radius mt-3 border border-transparent"
       >
         <BalanceInput disabled asset={targetAsset} balance={targetBalance?.asset.value} placeholder="Balance 0" />
       </TransferSection>
 
-      {/* Sender */}
-      <TransferSection label="Sender" className="mt-10">
-        <AddressInput
-          who="sender"
-          placeholder="Select an address"
-          value={sender}
-          options={senderOptions}
-          accounts={activeSenderWallet === WalletID.TALISMAN ? talismanAccounts : []}
-          onClear={setSender}
-          onChange={setSender}
-          onAccountChange={setActiveSenderAccount}
-        />
-      </TransferSection>
-
-      {/* Recipient */}
-      <TransferSection label="Recipient" className="mt-10">
-        <AddressInput
-          canInput
-          who="recipient"
-          placeholder="Select or enter an address"
-          value={recipient}
-          options={recipientOptions}
-          accounts={activeRecipientWallet === WalletID.TALISMAN ? talismanAccounts : []}
-          onClear={setRecipient}
-          onChange={setRecipient}
-          onAccountChange={setActiveRecipientAccount}
-        />
-      </TransferSection>
-
       {/* Send */}
       <Button
         kind="primary"