[TOOL-5075] SDK: Fix various alignment issues in components

Author: MananTank

.changeset/sad-vans-wait.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix Various alignment issues in React Components

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}`,

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}`,

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,

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

@@ -95,14 +95,15 @@ export function WalletEntryButton(props: {
 export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
+    all: "unset",
     "&:hover": {
       backgroundColor: theme.colors.tertiaryBg,
       transform: "scale(1.01)",
     },
     '&[data-active="true"]': {
       backgroundColor: theme.colors.tertiaryBg,
     },
-    all: "unset",
+
     alignItems: "center",
     borderRadius: radius.md,
     boxSizing: "border-box",

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",

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",

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",

packages/thirdweb/src/react/web/ui/components/text.tsx

@@ -44,11 +44,11 @@ type LinkProps = {
 export const Link = /* @__PURE__ */ StyledAnchor<LinkProps>((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",

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",