sphere-connect 1.0.4 → 1.0.6

package/dist/index.js

@@ -1242,18 +1242,18 @@ var SphereModal = ({ isOpen, onClose }) => {
           ]
         }
       ),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.errorBanner, children: error }),
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-                        @keyframes sphere-spin {
-                            0% { transform: rotate(0deg); }
-                            100% { transform: rotate(360deg); }
-                        }
-                    ` }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.footer, children: [
-        "Protected by ",
-        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Sphere" })
-      ] })
-    ] })
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.errorBanner, children: error })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.footer, children: [
+      "Protected by ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Sphere" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+                    @keyframes sphere-spin {
+                        0% { transform: rotate(0deg); }
+                        100% { transform: rotate(360deg); }
+                    }
+                ` })
   ] }) });
 };
 var styles = {
@@ -1271,27 +1271,26 @@ var styles = {
     padding: "20px"
   },
   modal: {
-    backgroundColor: "#0c0c0c",
-    color: "#ffffff",
+    backgroundColor: "#ffffff",
+    color: "#000000",
     width: "90%",
     maxWidth: "360px",
     aspectRatio: "1/1",
-    borderRadius: "0",
+    borderRadius: "8px",
     position: "relative",
-    boxShadow: "0 0 0 1px #222, 0 25px 60px rgba(0, 0, 0, 0.7)",
+    boxShadow: "none",
     overflow: "hidden",
     fontFamily: "Inter, -apple-system, system-ui, sans-serif",
     display: "flex",
     flexDirection: "column",
     padding: "24px",
     boxSizing: "border-box",
-    justifyContent: "center"
+    justifyContent: "space-between"
   },
   header: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: "24px",
     width: "100%"
   },
   title: {
@@ -1303,9 +1302,9 @@ var styles = {
     flex: 1
   },
   closeBtn: {
-    background: "rgba(255, 255, 255, 0.05)",
+    background: "rgba(0, 0, 0, 0.05)",
     border: "none",
-    color: "#888",
+    color: "#64748b",
     fontSize: "20px",
     cursor: "pointer",
     width: "28px",
@@ -1319,7 +1318,9 @@ var styles = {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    width: "100%"
+    justifyContent: "center",
+    width: "100%",
+    flex: 1
   },
   socialButton: {
     display: "flex",
@@ -1327,13 +1328,13 @@ var styles = {
     width: "100%",
     height: "48px",
     backgroundColor: "transparent",
-    border: "1px solid #333",
-    borderRadius: "0",
+    border: "1px solid #e2e8f0",
+    borderRadius: "8px",
     padding: "0 16px",
     marginBottom: "10px",
     cursor: "pointer",
     fontSize: "14px",
-    color: "#fff",
+    color: "#0f172a",
     boxSizing: "border-box",
     transition: "background 0.2s"
   },
@@ -1359,13 +1360,12 @@ var styles = {
   spinner: {
     width: "18px",
     height: "18px",
-    border: "2px solid rgba(255, 255, 255, 0.1)",
-    borderTop: "2px solid #ffffff",
+    border: "2px solid rgba(0, 0, 0, 0.1)",
+    borderTop: "2px solid #000000",
     borderRadius: "50%",
     animation: "sphere-spin 0.8s linear infinite"
   },
   footer: {
-    marginTop: "20px",
     textAlign: "center",
     fontSize: "11px",
     color: "#475569"