From f3969380bcfc8730b9fd5b9f3d88b8caa988d815 Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Wed, 9 Jul 2025 03:03:10 +0530 Subject: [PATCH] [TOOL-4987] SDK: Restore CSS resets, remove biome rules for sorting attributes and properties --- .changeset/hip-tips-grow.md | 5 +++++ biome.json | 4 ++-- packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx | 1 + .../thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx | 1 + .../src/react/web/ui/ConnectWallet/NetworkSelector.tsx | 2 ++ .../src/react/web/ui/ConnectWallet/WalletEntryButton.tsx | 1 + .../src/react/web/ui/ConnectWallet/WalletSelector.tsx | 1 + .../src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx | 1 + .../src/react/web/ui/TransactionButton/DepositScreen.tsx | 1 + packages/thirdweb/src/react/web/ui/components/buttons.tsx | 2 ++ packages/thirdweb/src/react/web/ui/components/text.tsx | 1 + .../src/react/web/wallets/shared/GetStartedScreen.tsx | 1 + .../thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx | 1 + 13 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 .changeset/hip-tips-grow.md diff --git a/.changeset/hip-tips-grow.md b/.changeset/hip-tips-grow.md new file mode 100644 index 00000000000..44ed3b73a63 --- /dev/null +++ b/.changeset/hip-tips-grow.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Restore CSS resets on react components diff --git a/biome.json b/biome.json index 7d3e3cf9e58..6ea78902422 100644 --- a/biome.json +++ b/biome.json @@ -4,8 +4,8 @@ "actions": { "source": { "organizeImports": "on", - "useSortedAttributes": "on", - "useSortedKeys": "on" + "useSortedAttributes": "off", + "useSortedKeys": "off" } }, "enabled": true diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx index c934d7115a1..5fbe9b2aa7f 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx @@ -1153,6 +1153,7 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => { 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 375b7d76ad6..c7cfa4e9f09 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx @@ -25,6 +25,7 @@ export const MenuButton = /* @__PURE__ */ StyledButton((_) => { 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 04cf3dca38c..a6123ab4276 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx @@ -739,6 +739,7 @@ export const TabButton = /* @__PURE__ */ (() => background: theme.colors.secondaryButtonBg, color: theme.colors.primaryText, }, + all: "unset", borderRadius: radius.lg, color: theme.colors.secondaryText, cursor: "pointer", @@ -784,6 +785,7 @@ export const NetworkButton = /* @__PURE__ */ StyledButton((_) => { background: theme.colors.secondaryButtonBg, }, alignItems: "center", + all: "unset", 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 2592c30c8b8..0a7688887a9 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx @@ -102,6 +102,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/WalletSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx index 92b0943b1f5..2fc370a6611 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx @@ -720,6 +720,7 @@ const ShowAllWalletsIcon = /* @__PURE__ */ StyledDiv(() => { }); const WalletList = /* @__PURE__ */ StyledUl({ + all: "unset", boxSizing: "border-box", display: "flex", flex: 1, 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 30c5efbea79..7aad13133cd 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx @@ -88,6 +88,7 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => { "&: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 be1c50cbf78..d7153ec81e2 100644 --- a/packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx +++ b/packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx @@ -286,6 +286,7 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => { "&: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 82c242dfcc7..e2b02c5d5f3 100644 --- a/packages/thirdweb/src/react/web/ui/components/buttons.tsx +++ b/packages/thirdweb/src/react/web/ui/components/buttons.tsx @@ -38,6 +38,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => { cursor: "not-allowed", }, alignItems: "center", + all: "unset", background: (() => { if (props.bg) { return theme.colors[props.bg]; @@ -151,6 +152,7 @@ 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 4026d33aa20..63ad1a8cc09 100644 --- a/packages/thirdweb/src/react/web/ui/components/text.tsx +++ b/packages/thirdweb/src/react/web/ui/components/text.tsx @@ -48,6 +48,7 @@ export const Link = /* @__PURE__ */ StyledAnchor((p) => { 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 126a64e61c6..26acec24779 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/GetStartedScreen.tsx +++ b/packages/thirdweb/src/react/web/wallets/shared/GetStartedScreen.tsx @@ -218,6 +218,7 @@ const ButtonLink = /* @__PURE__ */ StyledButton((_) => { 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 270ecb8233a..bb173048bb5 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx +++ b/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx @@ -345,6 +345,7 @@ const LinkButton = /* @__PURE__ */ StyledButton((_) => { "&:hover": { color: theme.colors.primaryText, }, + all: "unset", color: theme.colors.accentText, cursor: "pointer", fontSize: fontSize.sm,