sphere-connect 1.0.2 → 1.0.3

package/dist/index.js

@@ -1214,19 +1214,18 @@ var SphereModal = ({ isOpen, onClose }) => {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.header, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 32 } }),
       " ",
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles.title, children: "Login or sign up" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { style: styles.closeBtn, onClick: onClose, "aria-label": "Close", children: "\xD7" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles.title, children: "Connect to Sphere" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.description, children: "Experience the next generation of account abstraction. Secure, fast, and effortless." }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.errorBanner, children: error }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.actionContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           style: {
-            ...styles.customButton,
+            ...styles.socialButton,
             opacity: isLoading || localLoading ? 0.7 : 1,
-            cursor: isLoading || localLoading ? "not-allowed" : "pointer"
+            cursor: isLoading || localLoading ? "not-allowed" : "pointer",
+            marginBottom: 0
           },
           onClick: handleLogin,
           disabled: isLoading || localLoading,
@@ -1234,15 +1233,16 @@ var SphereModal = ({ isOpen, onClose }) => {
             isLoading || localLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.spinner }) : /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
-                src: "https://www.gstatic.com/images/branding/product/1x/gsa_512dp.png",
+                src: "https://www.gstatic.com/marketing-cms/assets/images/d5/dc/cfe9ce8b4425b410b49b7f2dd3f3/g.webp=s48-fcrop64=1,00000000ffffffff-rw",
                 alt: "Google",
-                style: styles.googleIcon
+                style: styles.socialIcon
               }
             ),
-            isLoading || localLoading ? "Connecting..." : "Continue with Google"
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.socialText, children: "Google" })
           ]
         }
-      ) }),
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.errorBanner, children: error }),
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
                         @keyframes sphere-spin {
                             0% { transform: rotate(0deg); }
@@ -1250,8 +1250,8 @@ var SphereModal = ({ isOpen, onClose }) => {
                         }
                     ` }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.footer, children: [
-        "Securely powered by ",
-        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Sphere SDK" })
+        "Protected by ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Sphere" })
       ] })
     ] })
   ] }) });
@@ -1274,62 +1274,73 @@ var styles = {
     backgroundColor: "#0c0c0c",
     color: "#ffffff",
     width: "90%",
-    maxWidth: "400px",
-    aspectRatio: "1/1",
+    maxWidth: "360px",
     borderRadius: "0",
     position: "relative",
     boxShadow: "0 0 0 1px #222, 0 25px 60px rgba(0, 0, 0, 0.7)",
     overflow: "hidden",
     fontFamily: "Inter, -apple-system, system-ui, sans-serif",
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    padding: "24px",
+    boxSizing: "border-box"
   },
   header: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    padding: "24px 24px 0 24px"
+    marginBottom: "24px"
+  },
+  title: {
+    fontSize: "14px",
+    fontWeight: "500",
+    color: "#94a3b8",
+    textAlign: "center",
+    margin: 0,
+    flex: 1
   },
   closeBtn: {
     background: "rgba(255, 255, 255, 0.05)",
     border: "none",
     color: "#888",
-    fontSize: "24px",
+    fontSize: "20px",
     cursor: "pointer",
-    lineHeight: 1,
-    width: "32px",
-    height: "32px",
+    width: "28px",
+    height: "28px",
     borderRadius: "50%",
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    transition: "all 0.2s"
+    justifyContent: "center"
   },
   content: {
     display: "flex",
     flexDirection: "column",
-    padding: "20px",
     alignItems: "center",
-    flex: 1,
-    justifyContent: "center",
-    width: "100%",
-    boxSizing: "border-box"
+    width: "100%"
   },
-  title: {
-    fontSize: "1.5rem",
-    fontWeight: "700",
-    color: "#ffffff",
-    textAlign: "center",
+  socialButton: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "48px",
+    backgroundColor: "transparent",
+    border: "1px solid #333",
+    borderRadius: "0",
+    padding: "0 16px",
     marginBottom: "10px",
-    margin: 0
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "#fff",
+    boxSizing: "border-box",
+    transition: "background 0.2s"
   },
-  description: {
-    fontSize: "0.7rem",
-    color: "#94a3b8",
-    textAlign: "center",
-    lineHeight: "1.5",
-    marginBottom: "32px",
-    margin: 0
+  socialIcon: {
+    width: "18px",
+    height: "18px"
+  },
+  socialText: {
+    marginLeft: "12px",
+    fontWeight: "500"
   },
   errorBanner: {
     backgroundColor: "rgba(239, 68, 68, 0.1)",
@@ -1342,46 +1353,19 @@ var styles = {
     textAlign: "center",
     width: "100%"
   },
-  actionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%"
-  },
-  customButton: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "12px",
-    width: "100%",
-    height: "52px",
-    backgroundColor: "#0c0c0c",
-    border: "1px solid #333",
-    borderRadius: "0",
-    cursor: "pointer",
-    fontSize: "15px",
-    fontWeight: "600",
-    color: "#ffffff",
-    transition: "transform 0.1s, opacity 0.2s",
-    boxSizing: "border-box"
-  },
-  googleIcon: {
-    width: "20px",
-    height: "20px"
-  },
   spinner: {
-    width: "20px",
-    height: "20px",
+    width: "18px",
+    height: "18px",
     border: "2px solid rgba(255, 255, 255, 0.1)",
     borderTop: "2px solid #ffffff",
     borderRadius: "50%",
     animation: "sphere-spin 0.8s linear infinite"
   },
   footer: {
-    marginTop: "32px",
+    marginTop: "20px",
     textAlign: "center",
     fontSize: "11px",
-    color: "#475569",
-    letterSpacing: "0.5px"
+    color: "#475569"
   }
 };
 var SphereAvatar = ({