@aptos-labs/wallet-adapter-mui-design 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @aptos-labs/wallet-adapter-mui-design
 
+## 0.3.0
+
+### Minor Changes
+
+- 55727e0: Update mui package design layout
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.js

@@ -249,8 +249,8 @@ function WalletsModal({
             onClick: () => onWalletSelect(option.name),
             sx: {
               background: theme.palette.mode === "dark" ? grey[700] : grey[200],
-              padding: "1rem 3rem",
-              borderRadius: "10px",
+              padding: "1rem 2rem",
+              borderRadius: `${theme.shape.borderRadius}px`,
               display: "flex",
               gap: "1rem"
             },
@@ -289,7 +289,7 @@ function WalletsModal({
           sx: {
             borderRadius: `${theme.shape.borderRadius}px`,
             background: theme.palette.mode === "dark" ? grey[700] : grey[200],
-            padding: "1rem 3rem",
+            padding: "1rem 2rem",
             gap: "1rem"
           },
           children: [
@@ -335,14 +335,15 @@ function WalletsModal({
     onClose: handleClose,
     "aria-labelledby": "wallet selector modal",
     "aria-describedby": "select a wallet to connect",
-    sx: { borderRadius: "5px" },
+    sx: { borderRadius: `${theme.shape.borderRadius}px` },
+    maxWidth: "xs",
+    fullWidth: true,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Stack, {
       sx: {
         display: "flex",
         flexDirection: "column",
         top: "50%",
         left: "50%",
-        width: 500,
         bgcolor: "background.paper",
         boxShadow: 24,
         p: 3

package/dist/index.mjs

@@ -243,8 +243,8 @@ function WalletsModal({
             onClick: () => onWalletSelect(option.name),
             sx: {
               background: theme.palette.mode === "dark" ? grey[700] : grey[200],
-              padding: "1rem 3rem",
-              borderRadius: "10px",
+              padding: "1rem 2rem",
+              borderRadius: `${theme.shape.borderRadius}px`,
               display: "flex",
               gap: "1rem"
             },
@@ -283,7 +283,7 @@ function WalletsModal({
           sx: {
             borderRadius: `${theme.shape.borderRadius}px`,
             background: theme.palette.mode === "dark" ? grey[700] : grey[200],
-            padding: "1rem 3rem",
+            padding: "1rem 2rem",
             gap: "1rem"
           },
           children: [
@@ -329,14 +329,15 @@ function WalletsModal({
     onClose: handleClose,
     "aria-labelledby": "wallet selector modal",
     "aria-describedby": "select a wallet to connect",
-    sx: { borderRadius: "5px" },
+    sx: { borderRadius: `${theme.shape.borderRadius}px` },
+    maxWidth: "xs",
+    fullWidth: true,
     children: /* @__PURE__ */ jsxs3(Stack, {
       sx: {
         display: "flex",
         flexDirection: "column",
         top: "50%",
         left: "50%",
-        width: 500,
         bgcolor: "background.paper",
         boxShadow: 24,
         p: 3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aptos-labs/wallet-adapter-mui-design",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Aptos Wallet Adapter mui design",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/WalletModel.tsx

@@ -44,7 +44,8 @@ export default function WalletsModal({
       const icon = option.icon;
       return (
         <Grid key={option.name} xs={12} paddingY={0.5} item>
-          {wallet.readyState === "Installed" || wallet.readyState === "Loadable" ? (
+          {wallet.readyState === "Installed" ||
+          wallet.readyState === "Loadable" ? (
             <ListItem disablePadding>
               <ListItemButton
                 alignItems="center"
@@ -53,8 +54,8 @@ export default function WalletsModal({
                 sx={{
                   background:
                     theme.palette.mode === "dark" ? grey[700] : grey[200],
-                  padding: "1rem 3rem",
-                  borderRadius: "10px",
+                  padding: "1rem 2rem",
+                  borderRadius: `${theme.shape.borderRadius}px`,
                   display: "flex",
                   gap: "1rem",
                 }}
@@ -97,7 +98,7 @@ export default function WalletsModal({
                 borderRadius: `${theme.shape.borderRadius}px`,
                 background:
                   theme.palette.mode === "dark" ? grey[700] : grey[200],
-                padding: "1rem 3rem",
+                padding: "1rem 2rem",
                 gap: "1rem",
               }}
             >
@@ -148,7 +149,9 @@ export default function WalletsModal({
       onClose={handleClose}
       aria-labelledby="wallet selector modal"
       aria-describedby="select a wallet to connect"
-      sx={{ borderRadius: "5px" }}
+      sx={{ borderRadius: `${theme.shape.borderRadius}px` }}
+      maxWidth="xs"
+      fullWidth
     >
       <Stack
         sx={{
@@ -156,7 +159,6 @@ export default function WalletsModal({
           flexDirection: "column",
           top: "50%",
           left: "50%",
-          width: 500,
           bgcolor: "background.paper",
           boxShadow: 24,
           p: 3,