Improve UI (#600)

* Update height of trannsfer-action button * Update height of chain-identity * Update height of User * Chain-identity border width * Transfer label font weight * Faucet font weight * Max-width tailwind config * Update page max width * Record detail status button border radius * Balances list click disabled status
helix-bridge · Jan 4, 2024 · 622cd2f · 622cd2f
1 parent 6c47cef
commit 622cd2f
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 20 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -41,12 +41,12 @@ body {
 
   /* Page */
   .page-container {
-    @apply container mx-auto px-middle py-5;
+    @apply max-w-8xl w-full mx-auto px-middle py-5;
   }
 
   /* User */
   .user-connect-wallet {
-    @apply flex h-9 shrink-0 items-center gap-middle rounded-middle bg-primary px-large transition lg:h-8 lg:hover:bg-primary/80 lg:active:translate-y-1;
+    @apply flex h-9 shrink-0 items-center gap-middle rounded-middle bg-primary px-large transition lg:hover:bg-primary/80 lg:active:translate-y-1;
   }
   .user-dropdown-item {
     @apply inline-flex items-center gap-middle rounded-middle px-middle py-small text-start transition hover:bg-white/10 lg:active:translate-y-1;

diff --git a/src/components/chain-identity.tsx b/src/components/chain-identity.tsx
@@ -7,7 +7,7 @@ export default function ChainIdentity() {
   const config = getChainConfig(chain?.id);
 
   return chain ? (
-    <div className="hidden h-8 max-w-[9rem] items-center gap-middle rounded-large border border-primary px-middle lg:flex">
+    <div className="hidden h-9 max-w-[9rem] items-center gap-middle rounded-large border-2 border-primary px-middle lg:flex">
       {config ? (
         <Image
           width={20}

diff --git a/src/components/faucet.tsx b/src/components/faucet.tsx
@@ -121,7 +121,7 @@ export default function Faucet() {
         className="text-primary transition-[color,transform] hover:text-white lg:active:translate-y-1"
         onClick={setIsOpenTrue}
       >
-        <span className="text-base font-normal">Faucet</span>
+        <span className="text-base font-medium">Faucet</span>
       </button>
 
       <Modal

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -27,7 +27,7 @@ export default function Footer() {
 
   return (
     <div className="app-footer w-full">
-      <div className="container mx-auto flex h-full shrink-0 items-center justify-center px-middle lg:justify-between">
+      <div className="mx-auto flex h-full max-w-8xl shrink-0 items-center justify-center px-middle lg:justify-between">
         {/* Copyright */}
         <span className="text-sm font-medium text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
 

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -44,7 +44,7 @@ export default function Header() {
   return (
     <>
       <div className="app-header fixed left-0 top-0 z-10 w-full border-b border-b-white/25 bg-app-bg lg:border-b-transparent">
-        <div className="container mx-auto flex h-full items-center justify-between px-middle">
+        <div className="mx-auto flex h-full max-w-8xl items-center justify-between px-middle">
           {/* Left */}
           <div className="flex items-center gap-5">
             {/* Logo */}

diff --git a/src/components/transaction-status.tsx b/src/components/transaction-status.tsx
@@ -189,7 +189,7 @@ export default function TransactionStatus({ record }: Props) {
         {record?.result === RecordResult.PENDING_TO_CLAIM && (
           <div className="flex items-center gap-small">
             <span className="text-sm font-medium text-white/50">Please claim the tokens on the target chain.</span>
-            <Button className="px-1" kind="primary" busy={busy} onClick={handleClaim}>
+            <Button className="rounded-middle px-1" kind="primary" busy={busy} onClick={handleClaim}>
               <span className="text-sm font-medium text-white">Claim</span>
             </Button>
           </div>
@@ -198,7 +198,7 @@ export default function TransactionStatus({ record }: Props) {
         {record?.result === RecordResult.PENDING_TO_REFUND && (
           <div className="flex items-center gap-small">
             <span className="text-sm font-medium text-white/50">Please request refund on the target chain.</span>
-            <Button className="px-1" kind="primary" busy={busy} onClick={handleRefund}>
+            <Button className="rounded-middle px-1" kind="primary" busy={busy} onClick={handleRefund}>
               <span className="text-sm font-medium text-white">Refund</span>
             </Button>
           </div>
@@ -209,10 +209,10 @@ export default function TransactionStatus({ record }: Props) {
             <span className="text-sm font-medium text-white/50">
               You can request refund or speed up this transaction.
             </span>
-            <Button className="px-1" kind="primary" busy={busy} onClick={handleRefund}>
+            <Button className="rounded-middle px-1" kind="primary" busy={busy} onClick={handleRefund}>
               <span className="text-sm font-medium text-white">Refund</span>
             </Button>
-            <Button className="px-1" kind="primary" onClick={() => setIsOpen(true)}>
+            <Button className="rounded-middle px-1" kind="primary" onClick={() => setIsOpen(true)}>
               <span className="text-sm font-medium text-white">SpeedUp</span>
             </Button>
           </div>

diff --git a/src/components/transfer-action.tsx b/src/components/transfer-action.tsx
@@ -121,7 +121,7 @@ function Button({
       kind="primary"
       busy={busy}
       disabled={disabled}
-      className="flex h-8 items-center justify-center rounded-middle lg:h-9"
+      className="flex h-10 items-center justify-center rounded-middle"
       onClick={onClick}
     >
       <span className="text-base font-medium text-white">{children}</span>

diff --git a/src/components/transfer.tsx b/src/components/transfer.tsx
@@ -184,7 +184,7 @@ export default function Transfer() {
       <div className="mx-auto flex w-full flex-col gap-large rounded-large bg-component p-middle lg:mt-20 lg:w-[30rem] lg:gap-5 lg:p-5">
         {/* From-To */}
         <div className="mt-8 flex items-center gap-small lg:gap-large">
-          <Label text="From" className="w-full" needAbsolute>
+          <Label text="From" className="w-full" textClassName="font-medium" needAbsolute>
             <ChainSelect
               className="w-full bg-inner p-middle"
               placement="bottom-start"
@@ -237,7 +237,7 @@ export default function Transfer() {
               });
             }}
           />
-          <Label text="To" className="w-full" needAbsolute>
+          <Label text="To" className="w-full" textClassName="font-medium" needAbsolute>
             <ChainSelect
               className="w-full bg-inner p-middle"
               placement="bottom-end"
@@ -261,7 +261,7 @@ export default function Transfer() {
         </div>
 
         {/* Amount */}
-        <Label text="Amount" extra={isProduction() ? null : <Faucet />}>
+        <Label text="Amount" textClassName="font-medium" extra={isProduction() ? null : <Faucet />}>
           <BalanceInput
             placeholder="0"
             enabledDynamicStyle
@@ -286,7 +286,7 @@ export default function Transfer() {
         </Label>
 
         {/* Bridge */}
-        <Label text="Bridge" className={`${bridgeOptions.length > 1 ? "" : "hidden"}`}>
+        <Label text="Bridge" className={`${bridgeOptions.length > 1 ? "" : "hidden"}`} textClassName="font-medium">
           <BridgeSelect
             options={bridgeOptions}
             value={bridgeCategory}
@@ -298,7 +298,7 @@ export default function Transfer() {
         </Label>
 
         {/* Information */}
-        <Label text="Information">
+        <Label text="Information" textClassName="font-medium">
           <TransferInfo
             fee={bridgeFee ? { ...bridgeFee, loading: isLoadingFee || isLoadingRelayers } : undefined}
             bridge={bridgeInstance}

diff --git a/src/components/user.tsx b/src/components/user.tsx
@@ -18,7 +18,7 @@ import { useAccount, useDisconnect } from "wagmi";
 import PrettyAddress from "./pretty-address";
 import AddressIdenticon from "./address-identicon";
 import { Placement } from "@floating-ui/react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 interface Props {
   placement: Placement;
@@ -37,6 +37,7 @@ export default function User({ placement, prefixLength = 10, suffixLength = 8, o
   const { openConnectModal } = useConnectModal();
 
   const searchParams = useSearchParams();
+  const pathname = usePathname();
   const router = useRouter();
 
   return address ? (
@@ -84,7 +85,8 @@ export default function User({ placement, prefixLength = 10, suffixLength = 8, o
           .map((balance) => (
             <button
               key={`${balance.chain.network}-${balance.token.symbol}`}
-              className="flex items-center gap-large rounded-middle px-3 py-2 transition-colors hover:bg-white/10 lg:py-middle"
+              className="flex items-center gap-large rounded-middle px-3 py-2 transition-colors hover:bg-white/10 disabled:cursor-default lg:py-middle"
+              disabled={pathname !== "/"}
               onClick={() => {
                 const _sourceChain = balance.chain;
                 const _sourceToken = balance.token;

diff --git a/src/ui/label.tsx b/src/ui/label.tsx
@@ -7,15 +7,24 @@ interface Props {
   tips?: string;
   extra?: ReactElement | null;
   className?: string;
+  textClassName?: string;
   needAbsolute?: boolean;
 }
 
-export default function Label({ text, tips, extra, children, className, needAbsolute }: PropsWithChildren<Props>) {
+export default function Label({
+  text,
+  tips,
+  extra,
+  children,
+  className,
+  textClassName,
+  needAbsolute,
+}: PropsWithChildren<Props>) {
   return (
     <div className={`${needAbsolute ? "relative" : "flex flex-col gap-small"} ${className}`}>
       <div className={`flex items-center justify-between ${needAbsolute ? "absolute -top-7 left-0 w-full" : ""}`}>
         <div className="flex items-center gap-small">
-          <span className="text-white/50">{text}</span>
+          <span className={`text-white/50 ${textClassName}`}>{text}</span>
           {tips ? (
             <Tooltip content={tips} className="w-fit">
               <Image width={16} height={16} alt="Info" src="/images/info.svg" />

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -34,6 +34,9 @@ const config: Config = {
         middle: "0.625rem", // 10px
         large: "0.9375rem", // 15px
       },
+      maxWidth: {
+        "8xl": "90rem",
+      },
       screens: {
         xl: "1200px",
         "2xl": "1200px",