[TOOL-5075] SDK: Fix various alignment issues in components (#7657)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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