From 22bf68a6f00b715b899d28469cc3d795480d736c Mon Sep 17 00:00:00 2001 From: MananTank Date: Mon, 21 Jul 2025 17:58:07 +0000 Subject: [PATCH] [TOOL-5075] SDK: Fix various alignment issues in components (#7657) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on fixing various alignment issues in React components within the `thirdweb` package, enhancing hover states and visual consistency across different UI elements. ### Detailed summary - Updated hover styles in several components to improve visual feedback. - Adjusted `all` property to "unset" for better styling control. - Modified colors and borders in `OTPLoginUI.tsx`, `ReceiveFunds.tsx`, `DepositScreen.tsx`, and others for consistency. - Enhanced button styles in `MenuButton.tsx`, `WalletEntryButton.tsx`, and `NetworkSelector.tsx`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` ## Summary by CodeRabbit * **Bug Fixes** * Resolved various alignment issues in React components to improve visual consistency across the interface. * **Chores** * Updated internal documentation to reflect the latest patch addressing alignment fixes. --- .changeset/sad-vans-wait.md | 5 +++++ packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx | 2 +- .../thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx | 3 ++- .../src/react/web/ui/ConnectWallet/NetworkSelector.tsx | 4 ++-- .../src/react/web/ui/ConnectWallet/WalletEntryButton.tsx | 3 ++- .../src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx | 2 +- .../src/react/web/ui/TransactionButton/DepositScreen.tsx | 2 +- packages/thirdweb/src/react/web/ui/components/buttons.tsx | 4 ++-- packages/thirdweb/src/react/web/ui/components/text.tsx | 2 +- .../src/react/web/wallets/shared/GetStartedScreen.tsx | 2 +- .../thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx | 2 +- 11 files changed, 19 insertions(+), 12 deletions(-) create mode 100644 .changeset/sad-vans-wait.md diff --git a/.changeset/sad-vans-wait.md b/.changeset/sad-vans-wait.md new file mode 100644 index 00000000000..4d36c542bb4 --- /dev/null +++ b/.changeset/sad-vans-wait.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Fix Various alignment issues in React Components diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx index 9ec76170153..173fbd5ea27 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx @@ -1153,12 +1153,12 @@ export function NetworkSwitcherButton(props: { const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => { const theme = useCustomTheme(); return { + all: "unset", "&:hover": { background: theme.colors.connectedButtonBgHover, transition: "background 250ms ease", }, alignItems: "center", - all: "unset", animation: `${fadeInAnimation} 300ms ease`, background: theme.colors.connectedButtonBg, border: `1px solid ${theme.colors.borderColor}`, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx index c7cfa4e9f09..068d0bf68dc 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx @@ -9,6 +9,7 @@ import { StyledButton } from "../design-system/elements.js"; export const MenuButton = /* @__PURE__ */ StyledButton((_) => { const theme = useCustomTheme(); return { + all: "unset", "&:hover": { backgroundColor: theme.colors.tertiaryBg, svg: { @@ -24,8 +25,8 @@ export const MenuButton = /* @__PURE__ */ StyledButton((_) => { "&[disabled]": { cursor: "not-allowed", }, + alignItems: "center", - all: "unset", backgroundColor: "transparent", borderRadius: radius.md, // border: `1px solid ${theme.colors.borderColor}`, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx index a6123ab4276..d401b77d7ee 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx @@ -735,11 +735,11 @@ export const TabButton = /* @__PURE__ */ (() => styled.button((_) => { const theme = useCustomTheme(); return { + all: "unset", "&[data-active='true']": { background: theme.colors.secondaryButtonBg, color: theme.colors.primaryText, }, - all: "unset", borderRadius: radius.lg, color: theme.colors.secondaryText, cursor: "pointer", @@ -784,8 +784,8 @@ export const NetworkButton = /* @__PURE__ */ StyledButton((_) => { "&:hover": { background: theme.colors.secondaryButtonBg, }, - alignItems: "center", all: "unset", + alignItems: "center", borderRadius: radius.md, boxSizing: "border-box", color: theme.colors.primaryText, diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx index 0a7688887a9..1a057c45a4b 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx @@ -95,6 +95,7 @@ export function WalletEntryButton(props: { export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => { const theme = useCustomTheme(); return { + all: "unset", "&:hover": { backgroundColor: theme.colors.tertiaryBg, transform: "scale(1.01)", @@ -102,7 +103,7 @@ export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => { '&[data-active="true"]': { backgroundColor: theme.colors.tertiaryBg, }, - all: "unset", + alignItems: "center", borderRadius: radius.md, boxSizing: "border-box", diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx index 7aad13133cd..f348bef9c0d 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx @@ -85,10 +85,10 @@ export function ReceiveFunds(props: { const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => { const theme = useCustomTheme(); return { + all: "unset", "&:hover": { borderColor: theme.colors.accentText, }, - all: "unset", border: `1px solid ${theme.colors.borderColor}`, borderRadius: radius.md, boxSizing: "border-box", diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx index d7153ec81e2..c816ba8e693 100644 --- a/packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx @@ -283,10 +283,10 @@ export function DepositScreen(props: { const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => { const theme = useCustomTheme(); return { + all: "unset", "&:hover": { borderColor: theme.colors.accentText, }, - all: "unset", border: `1px solid ${theme.colors.borderColor}`, borderRadius: `0 0 ${radius.md} ${radius.md}`, boxSizing: "border-box", diff --git a/packages/thirdweb/src/react/web/ui/components/buttons.tsx b/packages/thirdweb/src/react/web/ui/components/buttons.tsx index e2b02c5d5f3..41ee93cf868 100644 --- a/packages/thirdweb/src/react/web/ui/components/buttons.tsx +++ b/packages/thirdweb/src/react/web/ui/components/buttons.tsx @@ -22,6 +22,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => { return {}; } return { + all: "unset", "&:active": { transform: "translateY(1px)", }, @@ -38,7 +39,6 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => { cursor: "not-allowed", }, alignItems: "center", - all: "unset", background: (() => { if (props.bg) { return theme.colors[props.bg]; @@ -144,6 +144,7 @@ export const ButtonLink = /* @__PURE__ */ (() => Button.withComponent("a"))(); export const IconButton = /* @__PURE__ */ StyledButton((_) => { const theme = useCustomTheme(); return { + all: "unset", "&:hover": { background: theme.colors.secondaryIconHoverBg, color: theme.colors.secondaryIconHoverColor, @@ -152,7 +153,6 @@ export const IconButton = /* @__PURE__ */ StyledButton((_) => { cursor: "not-allowed", }, alignItems: "center", - all: "unset", borderRadius: radius.sm, color: theme.colors.secondaryIconColor, cursor: "pointer", diff --git a/packages/thirdweb/src/react/web/ui/components/text.tsx b/packages/thirdweb/src/react/web/ui/components/text.tsx index 63ad1a8cc09..8d50fc5ee6a 100644 --- a/packages/thirdweb/src/react/web/ui/components/text.tsx +++ b/packages/thirdweb/src/react/web/ui/components/text.tsx @@ -44,11 +44,11 @@ type LinkProps = { export const Link = /* @__PURE__ */ StyledAnchor((p) => { const theme = useCustomTheme(); return { + all: "unset", "&:hover": { color: theme.colors[p.hoverColor || "primaryText"], textDecoration: "none", }, - all: "unset", color: theme.colors[p.color || "accentText"], cursor: "pointer", display: p.inline ? "inline" : "block", diff --git a/packages/thirdweb/src/react/web/wallets/shared/GetStartedScreen.tsx b/packages/thirdweb/src/react/web/wallets/shared/GetStartedScreen.tsx index 26acec24779..dacad5abc6b 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/GetStartedScreen.tsx +++ b/packages/thirdweb/src/react/web/wallets/shared/GetStartedScreen.tsx @@ -212,13 +212,13 @@ const InstallScanScreen: React.FC<{ const ButtonLink = /* @__PURE__ */ StyledButton((_) => { const theme = useCustomTheme(); return { + all: "unset", "&:hover": { background: theme.colors.secondaryButtonHoverBg, color: theme.colors.primaryText, textDecoration: "none", }, alignItems: "center", - all: "unset", background: theme.colors.secondaryButtonBg, borderRadius: radius.sm, boxSizing: "border-box", diff --git a/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx b/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx index bb173048bb5..fef5307e77c 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx +++ b/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx @@ -342,10 +342,10 @@ export function OTPLoginUI(props: { const LinkButton = /* @__PURE__ */ StyledButton((_) => { const theme = useCustomTheme(); return { + all: "unset", "&:hover": { color: theme.colors.primaryText, }, - all: "unset", color: theme.colors.accentText, cursor: "pointer", fontSize: fontSize.sm,