Fix Wallet switcher icon position in wallet details modal (#3762)

<!-- start pr-codex -->

## PR-Codex overview
This PR fixes the wallet switcher icon position in the wallet details modal.

### Detailed summary
- Adjusted the wallet switcher icon position in `Modal.tsx`
- Updated the `borderRadius` in `buttons.tsx`
- Added a new `ShuffleIconLucide` component in `ShuffleIconLucide.tsx`
- Replaced `ShuffleIcon` with `ShuffleIconLucide` in `Details.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

.changeset/metal-zoos-return.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix Wallet switcher icon position in wallet details modal

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

@@ -6,7 +6,6 @@ import {
   PaperPlaneIcon,
   PinBottomIcon,
   PlusIcon,
-  ShuffleIcon,
   TextAlignJustifyIcon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
@@ -79,6 +78,7 @@ import { CoinsIcon } from "./icons/CoinsIcon.js";
 import { FundsIcon } from "./icons/FundsIcon.js";
 import { GenericWalletIcon } from "./icons/GenericWalletIcon.js";
 import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js";
+import { ShuffleIconLucide } from "./icons/ShuffleIconLucide.js";
 import { SmartWalletBadgeIcon } from "./icons/SmartAccountBadgeIcon.js";
 import { getConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
@@ -344,15 +344,25 @@ function DetailsModal(props: {
       <IconButton
         style={{
           position: "absolute",
-          top: `${spacing.lg}`,
-          left: `${spacing.sm}`,
-          padding: "3px",
+          top: spacing.lg,
+          left: spacing.lg,
+          transform: "translateX(-6px)",
         }}
         onClick={() => {
           setScreen("wallet-manager");
         }}
       >
-        <ShuffleIcon width={iconSize.md} height={iconSize.md} />
+        <div
+          style={{
+            width: `${iconSize.md}px`,
+            height: `${iconSize.md}px`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <ShuffleIconLucide size="20" />
+        </div>
       </IconButton>
 
       <Container px="lg" flex="column" center="x">

packages/thirdweb/src/react/web/ui/ConnectWallet/icons/ShuffleIconLucide.tsx

@@ -0,0 +1,24 @@
+import type { IconFC } from "./types.js";
+
+export const ShuffleIconLucide: IconFC = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="presentation"
+    >
+      <path d="M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22" />
+      <path d="m18 2 4 4-4 4" />
+      <path d="M2 6h1.9c1.5 0 2.9.9 3.6 2.2" />
+      <path d="M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8" />
+      <path d="m18 14 4 4-4 4" />
+    </svg>
+  );
+};

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

@@ -138,10 +138,7 @@ export const CrossContainer = /* @__PURE__ */ StyledDiv({
   position: "absolute",
   top: spacing.lg,
   right: spacing.lg,
-  transform: "translateX(15%)",
-  [media.mobile]: {
-    right: spacing.md,
-  },
+  transform: "translateX(6px)",
 });
 
 const modalAnimationDesktop = keyframes`

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

@@ -141,7 +141,7 @@ export const IconButton = /* @__PURE__ */ StyledButton((_) => {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: radius.md,
+    borderRadius: radius.sm,
     WebkitTapHighlightColor: "transparent",
     color: theme.colors.secondaryIconColor,
     padding: "2px",