From f47502188400b96dbbccf27b9882acde05d98ca2 Mon Sep 17 00:00:00 2001 From: karooolis Date: Thu, 18 Apr 2024 19:17:23 +0300 Subject: [PATCH] dark mode bridge styles --- .../src/steps/gas-tank/DepositContent.tsx | 39 ++++++++----- .../steps/gas-tank/GasTankStateContent.tsx | 19 +++++-- .../src/steps/gas-tank/ViewTransaction.tsx | 2 +- .../steps/gas-tank/components/AmountInput.tsx | 2 +- .../gas-tank/components/BalancesFees.tsx | 18 +++--- .../steps/gas-tank/components/ChainSelect.tsx | 8 +-- packages/account-kit/src/ui/Button.tsx | 55 +++++++++++-------- 7 files changed, 83 insertions(+), 60 deletions(-) diff --git a/packages/account-kit/src/steps/gas-tank/DepositContent.tsx b/packages/account-kit/src/steps/gas-tank/DepositContent.tsx index e54940df69..b2bb8146d7 100644 --- a/packages/account-kit/src/steps/gas-tank/DepositContent.tsx +++ b/packages/account-kit/src/steps/gas-tank/DepositContent.tsx @@ -3,13 +3,13 @@ import { useAccount } from "wagmi"; import { useConfig } from "../../AccountKitProvider"; import { AccountModalTitle } from "../../AccoutModalTitle"; import { AccountModalSection } from "../../AccountModalSection"; +import { useDepositHandler } from "./hooks/useDepositHandler"; import { GasTankStateContent } from "./GasTankStateContent"; import { ChainSelect } from "./components/ChainSelect"; import { AmountInput } from "./components/AmountInput"; import { BalancesFees } from "./components/BalancesFees"; import { ViewTransaction } from "./ViewTransaction"; import { Button } from "../../ui/Button"; -import { useDepositHandler } from "./hooks/useDepositHandler"; export type DepositMethod = "direct" | "native" | "relay"; @@ -18,7 +18,7 @@ export function DepositContent() { const userAccount = useAccount(); const userAccountAddress = userAccount.address; const userAccountChainId = userAccount?.chain?.id; - const [depositAmount, setDepositAmount] = useState(""); + const [depositAmount, setDepositAmount] = useState("0.005"); const [depositMethod, setDepositMethod] = useState(() => { if (chain.id === userAccountChainId) return "direct"; else if (chain.sourceId === userAccountChainId) return "native"; @@ -38,12 +38,12 @@ export function DepositContent() { - -
+ +
{!isSuccess && ( <> -

- Add funds from your wallet to your tank to fund transactions for any MUD apps on Chain Name. +

+ Add funds from your wallet to your tank to fund transactions for any MUD apps on {chain.name}

@@ -58,7 +58,11 @@ export function DepositContent() { {error ?
{String(error)}
: null} - - +
+ +
)} @@ -88,6 +94,7 @@ export function DepositContent() { ); } +// TODO: wip const BridgeTabs = ({ depositMethod, setDepositMethod, @@ -96,10 +103,11 @@ const BridgeTabs = ({ setDepositMethod: (depositMethod: DepositMethod) => void; }) => { return ( -
+
)}
diff --git a/packages/account-kit/src/steps/gas-tank/ViewTransaction.tsx b/packages/account-kit/src/steps/gas-tank/ViewTransaction.tsx index 95cb4fb4ff..dedbfad278 100644 --- a/packages/account-kit/src/steps/gas-tank/ViewTransaction.tsx +++ b/packages/account-kit/src/steps/gas-tank/ViewTransaction.tsx @@ -17,7 +17,7 @@ export function ViewTransaction({ hash, status }: Props) { if (!hash) return null; return ( -

+

{status === "loading" && ( <> View the status of your deposit{" "} diff --git a/packages/account-kit/src/steps/gas-tank/components/AmountInput.tsx b/packages/account-kit/src/steps/gas-tank/components/AmountInput.tsx index 079e8071b9..b68f0770a9 100644 --- a/packages/account-kit/src/steps/gas-tank/components/AmountInput.tsx +++ b/packages/account-kit/src/steps/gas-tank/components/AmountInput.tsx @@ -6,7 +6,7 @@ export type AmountProps = { export const AmountInput = ({ amount, setAmount }: AmountProps) => { return ( setAmount(evt.target.value)} diff --git a/packages/account-kit/src/steps/gas-tank/components/BalancesFees.tsx b/packages/account-kit/src/steps/gas-tank/components/BalancesFees.tsx index 3f6bb98294..e819bf65bd 100644 --- a/packages/account-kit/src/steps/gas-tank/components/BalancesFees.tsx +++ b/packages/account-kit/src/steps/gas-tank/components/BalancesFees.tsx @@ -21,32 +21,34 @@ export function BalancesFees({ amount, depositMethod }: Props) { return ( -

+
    -
  • - Available to deposit +
  • + Available to deposit {userBalance?.data?.value ? parseFloat(formatEther(userBalance?.data?.value)).toLocaleString("en", { minimumFractionDigits: 5, }) : "..."}{" "} - ETH ($3,605.21) + ETH ($3,605.21)
    • -
  • - Estimated fee + +
  • + Estimated fee {fees ? parseFloat(fees).toLocaleString("en", { minimumFractionDigits: 5, }) : "..."}{" "} - ETH ($3.40) + ETH ($3.40)
    • +
  • - Transfer time + Transfer time ~{transferTime} seconds
diff --git a/packages/account-kit/src/steps/gas-tank/components/ChainSelect.tsx b/packages/account-kit/src/steps/gas-tank/components/ChainSelect.tsx index c1dafe54ca..eb43ff93e4 100644 --- a/packages/account-kit/src/steps/gas-tank/components/ChainSelect.tsx +++ b/packages/account-kit/src/steps/gas-tank/components/ChainSelect.tsx @@ -17,10 +17,9 @@ const SelectItem = forwardRef(function SelectIt return ( } @@ -42,8 +41,7 @@ export function ChainSelect() { className={twMerge( "inline-flex items-center justify-center h-[50px] w-[70px]", "text-[13px] leading-none gap-[5px]", - "bg-white", - "border border-neutral-300", + "border border-neutral-300 dark:bg-neutral-700 dark:border-none", "outline-none", )} aria-label="Food" diff --git a/packages/account-kit/src/ui/Button.tsx b/packages/account-kit/src/ui/Button.tsx index 7048917efc..7c70bf3905 100644 --- a/packages/account-kit/src/ui/Button.tsx +++ b/packages/account-kit/src/ui/Button.tsx @@ -4,18 +4,27 @@ import { twMerge } from "tailwind-merge"; import { PendingIcon } from "../icons/PendingIcon"; type ButtonClassNameOptions = { - variant?: "primary" | "secondary"; + size?: "sm" | "md"; + variant?: "primary" | "secondary" | "tertiary"; + pending?: boolean; + selected?: boolean; }; -const buttonClassName = ({ variant = "primary" }: ButtonClassNameOptions = {}) => +const buttonClassName = ({ + size = "md", + variant = "primary", + pending = false, + selected = false, +}: ButtonClassNameOptions = {}) => twMerge( // eslint-disable-next-line max-len - "group self-center font-medium leading-none outline-none border border-transparent ring-2 ring-transparent focus:ring-orange-500 transition aria-disabled:pointer-events-none aria-busy:pointer-events-none", + "group self-center leading-none outline-none border border-transparent ring-2 ring-transparent focus:ring-orange-500 transition aria-disabled:pointer-events-none aria-busy:pointer-events-none", { primary: twMerge( "bg-neutral-900 text-white hover:bg-neutral-700 active:bg-neutral-600 aria-disabled:bg-neutral-200 aria-disabled:text-neutral-400", // eslint-disable-next-line max-len "dark:bg-neutral-100 dark:text-black dark:hover:bg-neutral-200 dark:active:bg-neutral-300 dark:aria-disabled:bg-neutral-400 dark:aria-disabled:text-neutral-600", + pending && "dark:bg-neutral-700 dark:text-neutral-400", ), secondary: twMerge( // eslint-disable-next-line max-len @@ -23,47 +32,45 @@ const buttonClassName = ({ variant = "primary" }: ButtonClassNameOptions = {}) = // eslint-disable-next-line max-len "dark:text-white dark:border-neutral-400 dark:hover:bg-neutral-700 dark:hover:border-neutral-300 dark:active:bg-neutral-600 dark:active:border-neutral-200 dark:aria-disabled:text-neutral-500 dark:aria-disabled:border-neutral-600", ), + tertiary: twMerge( + // eslint-disable-next-line max-len + "text-neutral-400 border-neutral-400 hover:bg-neutral-200 hover:border-neutral-500 active:bg-neutral-300 active:border-neutral-600 aria-disabled:text-neutral-400 aria-disabled:border-neutral-300", + // eslint-disable-next-line max-len + "dark:text-neutral-400 dark:border-neutral-400 dark:hover:bg-neutral-500 dark:hover:border-neutral-300 dark:active:bg-neutral-600 dark:active:border-neutral-200 dark:aria-disabled:text-neutral-500 dark:aria-disabled:border-neutral-600", + ), }[variant], + { + sm: twMerge("p-3 font-medium text-[14px]"), + md: twMerge("p-4 font-semibold text-[16px]"), + }[size], + pending && "cursor-wait pointer-events-none", + selected && "", ); type Props = { children: React.ReactNode; pending?: boolean; variant?: ButtonClassNameOptions["variant"]; + size?: ButtonClassNameOptions["size"]; }; type ButtonProps = Props & DetailedHTMLProps, HTMLButtonElement>; -export const Button = ({ pending, variant, type, className, children, disabled, ...props }: ButtonProps) => { +export const Button = ({ pending, variant, size, type, className, children, disabled, ...props }: ButtonProps) => { return ( );