flowlink-auth 2.8.0 → 2.8.2

package/src/SignUp.jsx

@@ -258,12 +258,11 @@
 // const errorBox = { marginTop: 10, color: '#ffb4b4', fontSize: 13 }
 // const successBox = { marginTop: 10, color: '#bef264', fontSize: 13 }
 
-// src/signup.jsx
 // src/signup.jsx
 'use client'
 import React, { useState, useRef, useEffect } from 'react'
 import Link from 'next/link'
-import { useAuth } from './provider.js' // keep if your SDK provides this; safe to remove if not used
+import { useAuth } from './provider.js' // keep if your app provides it; safe to remove if not used
 
 export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
   const {
@@ -283,17 +282,14 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
   const [loading, setLoading] = useState(false)
   const [loadingOauth, setLoadingOauth] = useState({ google: false, github: false })
   const redirectTimer = useRef(null)
-
-  // Local toast system (black background)
   const toastId = useRef(0)
-  const [toasts, setToasts] = useState([])
+  const [toasts, setToasts] = useState([]) // local toast system (black background)
 
+  // Insert a viewport meta tag while this component is mounted to avoid pinch-zoom on mobile
   useEffect(() => {
-    // Soft-disable pinch-zoom on mobile while this component is mounted.
-    // This inserts a viewport meta tag and removes it on unmount.
     const meta = document.createElement('meta')
     meta.name = 'viewport'
-    meta.content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
+    meta.content = 'width=device-width, initial-scale=1, maximum-scale=1'
     document.head.appendChild(meta)
 
     return () => {
@@ -303,7 +299,7 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
       if (existing && existing.content === meta.content) {
         document.head.removeChild(existing)
       }
-      // clear any toast timers if present (we store timers on the toast objects)
+      // clear any toast timers stored on the toasts (best-effort)
       toasts.forEach(t => {
         if (t._timer) clearTimeout(t._timer)
       })
@@ -311,17 +307,21 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Toast helpers
+  // simple toast helper (auto-dismiss). type: 'success' | 'error' | 'info'
   function showToast(type, message, ms = 5000) {
     const id = ++toastId.current
     const t = { id, type, message, _timer: null }
-    setToasts(prev => [t, ...prev].slice(0, 6))
+    setToasts(prev => {
+      const next = [t, ...prev].slice(0, 6)
+      return next
+    })
     const timer = setTimeout(() => {
       setToasts(prev => prev.filter(x => x.id !== id))
     }, ms)
     t._timer = timer
   }
 
+  // remove toast immediately
   function removeToast(id) {
     setToasts(prev => {
       prev.forEach(t => {
@@ -339,7 +339,6 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
     return null
   }
 
-  // Prevent double submit
   async function submit(e) {
     e.preventDefault()
     if (loading) return
@@ -376,8 +375,8 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
       })
 
       const data = await res.json().catch(async () => {
-        const txt = await res.text().catch(() => '')
-        return { _raw: txt }
+        const text = await res.text().catch(() => '')
+        return { _raw: text }
       })
 
       if (!res.ok) {
@@ -399,7 +398,6 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
     } catch (err) {
       const text = err?.message ?? 'Network error'
       showToast('error', text)
-      // keep console error for integrators
       console.error('Signup error:', err)
     } finally {
       setLoading(false)
@@ -420,7 +418,9 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
       const sdkBase = baseUrl || (typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '')
       const startUrl = `${sdkBase}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
 
-      if (!publishableKey) throw new Error('Missing publishable key (client side).')
+      if (!publishableKey) {
+        throw new Error('Missing publishable key (client side).')
+      }
 
       const res = await fetch(startUrl, {
         method: 'GET',
@@ -431,7 +431,7 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
       if (!res.ok) throw new Error(data?.error || `OAuth start failed (${res.status})`)
       if (!data?.oauthUrl) throw new Error('SDK start did not return oauthUrl')
 
-      // Navigate to provider (this will unload the page)
+      // navigate away to provider
       if (typeof window !== 'undefined') window.location.href = data.oauthUrl
     } catch (err) {
       showToast('error', err?.message || 'OAuth start failed')
@@ -451,51 +451,51 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
   }
 
   return (
-    <div style={styles.overlay}>
-      {/* custom toast container (black background) */}
-      <div style={styles.toastContainer} aria-live="polite" aria-atomic="true">
+    <div style={overlay}>
+      {/* toast container (custom black toasts) */}
+      <div style={toastContainer} aria-live="polite" aria-atomic="true">
         {toasts.map(t => (
           <div
             key={t.id}
             role="status"
+            aria-live="polite"
             style={{
-              ...styles.toastBase,
-              ...(t.type === 'error' ? styles.toastError : t.type === 'success' ? styles.toastSuccess : styles.toastInfo)
+              ...toastBase,
+              ...(t.type === 'error' ? toastError : t.type === 'success' ? toastSuccess : toastInfo)
             }}
             onMouseEnter={() => {
               if (t._timer) clearTimeout(t._timer)
             }}
             onMouseLeave={() => {
-              // restart auto-dismiss shorter when mouse leaves
               const timer = setTimeout(() => removeToast(t.id), 3000)
               setToasts(prev => prev.map(x => x.id === t.id ? { ...x, _timer: timer } : x))
             }}
           >
             <div style={{ flex: 1 }}>{t.message}</div>
-            <button aria-label="Dismiss" onClick={() => removeToast(t.id)} style={styles.toastCloseBtn}>✕</button>
+            <button aria-label="Dismiss" onClick={() => removeToast(t.id)} style={toastCloseBtn}>✕</button>
           </div>
         ))}
       </div>
 
-      <div style={styles.modal} role="dialog" aria-modal="true" aria-labelledby="signup-title">
-        <div style={styles.modalInner}>
-          <header style={styles.header}>
-            <div style={styles.brandRow}>
-              <div style={styles.logo} aria-hidden>
-                <div style={styles.logoCircle} />
+      <div style={modal}>
+        <div style={modalInner}>
+          <header style={header}>
+            <div style={brandRow}>
+              <div style={logo}>
+                <div style={logoCircle} aria-hidden />
               </div>
               <div>
-                <h1 id="signup-title" style={styles.title}>Sign up to {agency?.name || 'App'}</h1>
-                <div style={styles.subtitle}>Welcome — create your account.</div>
+                <h1 style={title}>Sign up to {agency?.name || 'App'}</h1>
+                <div style={subtitle}>Welcome! Create your account.</div>
               </div>
             </div>
           </header>
 
-          <section style={styles.oauthSection}>
+          <section style={oauthSection}>
             <button
               onClick={handleGoogle}
               type="button"
-              style={{ ...styles.oauthButton, ...styles.oauthGoogle }}
+              style={{ ...oauthButton, ...oauthGoogle }}
               disabled={loading || loadingOauth.google}
               aria-disabled={loading || loadingOauth.google}
             >
@@ -511,7 +511,7 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
             <button
               onClick={handleGithub}
               type="button"
-              style={{ ...styles.oauthButton, ...styles.oauthGithub }}
+              style={{ ...oauthButton, ...oauthGithub }}
               disabled={loading || loadingOauth.github}
               aria-disabled={loading || loadingOauth.github}
             >
@@ -522,28 +522,28 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
             </button>
           </section>
 
-          <div style={styles.dividerRow}>
-            <div style={styles.line} />
-            <div style={styles.orText}>or</div>
-            <div style={styles.line} />
+          <div style={dividerRow}>
+            <div style={line} />
+            <div style={orText}>or</div>
+            <div style={line} />
           </div>
 
-          <form onSubmit={submit} style={styles.form}>
-            <label style={styles.label} htmlFor="name">
-              <span style={styles.labelText}>Name</span>
+          <form onSubmit={submit} style={form}>
+            <label style={label} htmlFor="name">
+              <span style={labelText}>Name</span>
               <input
                 id="name"
                 type="text"
                 value={name}
                 onChange={e => setName(e.target.value)}
                 placeholder="Your name"
-                style={styles.input}
+                style={input}
                 autoComplete="name"
               />
             </label>
 
-            <label style={styles.label} htmlFor="email">
-              <span style={styles.labelText}>Email address</span>
+            <label style={label} htmlFor="email">
+              <span style={labelText}>Email address</span>
               <input
                 id="email"
                 type="email"
@@ -551,13 +551,13 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
                 onChange={e => setEmail(e.target.value)}
                 required
                 placeholder="you@example.com"
-                style={styles.input}
+                style={input}
                 autoComplete="email"
               />
             </label>
 
-            <label style={styles.label} htmlFor="password">
-              <span style={styles.labelText}>Password</span>
+            <label style={label} htmlFor="password">
+              <span style={labelText}>Password</span>
               <input
                 id="password"
                 type="password"
@@ -565,14 +565,14 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
                 onChange={e => setPassword(e.target.value)}
                 required
                 placeholder="••••••••"
-                style={styles.input}
+                style={input}
                 autoComplete="new-password"
               />
             </label>
 
             <button
               type="submit"
-              style={styles.submitButton}
+              style={submitButton}
               disabled={loading}
               aria-disabled={loading}
             >
@@ -581,14 +581,14 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
           </form>
         </div>
 
-        <div style={styles.modalFooter}>
-          <div style={styles.belowRow}>
-            <span style={styles.muted}>Already have an account? </span>
-            <Link href="/sign-in" style={styles.link}>Sign in</Link>
+        <div style={modalFooter}>
+          <div style={belowRow}>
+            <span style={muted}>Already have an account? </span>
+            <Link href="/sign-in" style={link}>Sign in</Link>
           </div>
-          <div style={styles.dividerThin} />
-          <div style={styles.secured}>
-            <div style={styles.securedText}>Secured by auth</div>
+          <div style={dividerThin} />
+          <div style={secured}>
+            <div style={securedText}>Secured by auth</div>
           </div>
         </div>
       </div>
@@ -596,273 +596,273 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
   )
 }
 
-/* Styles (JS objects) - reduced width and zoom-resilient layout; neutral palette */
-const styles = {
-  overlay: {
-    position: 'fixed',
-    inset: 0,
-    display: 'block', // use block + scrolling container for zoom resilience
-    padding: 20,
-    background: 'linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))',
-    backdropFilter: 'blur(6px)',
-    overflowY: 'auto', // allow page scroll when zoomed
-    WebkitOverflowScrolling: 'touch',
-    minHeight: '100vh',
-    zIndex: 9999
-  },
-
-  // modal: reduced width (not too wide), centered with margin auto, allows internal scroll
-  modal: {
-    width: '100%',
-    maxWidth: 460, // reduced width per request
-    margin: '40px auto', // vertical margin so modal isn't glued to top when zoomed
-    borderRadius: 14,
-    background: 'linear-gradient(180deg, rgba(15,19,24,0.85), rgba(10,12,16,0.85))', // translucent neutral
-    border: '1px solid rgba(99,102,106,0.12)', // visible neutral border
-    boxShadow: '0 18px 48px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)',
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-    maxHeight: 'calc(100vh - 80px)', // keep inside viewport
-  },
-
-  modalInner: {
-    padding: 18,
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 12,
-    overflowY: 'auto'
-  },
-
-  header: {
-    paddingBottom: 6,
-    borderBottom: '1px solid rgba(148,163,184,0.04)'
-  },
-
-  brandRow: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12
-  },
-
-  logo: {
-    width: 44,
-    height: 44,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-
-  logoCircle: {
-    width: 36,
-    height: 36,
-    borderRadius: 999,
-    background: 'linear-gradient(135deg,#2f3438,#11151a)',
-    boxShadow: '0 4px 12px rgba(2,6,23,0.6)'
-  },
-
-  title: {
-    margin: 0,
-    fontSize: 18,
-    fontWeight: 600,
-    color: '#e6e6e6'
-  },
-
-  subtitle: {
-    fontSize: 13,
-    color: 'rgba(230,230,230,0.72)',
-    marginTop: 4
-  },
-
-  oauthSection: {
-    marginTop: 8,
-    display: 'flex',
-    gap: 8
-  },
-
-  oauthButton: {
-    flex: 1,
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '10px 12px',
-    borderRadius: 10,
-    border: '1px solid rgba(148,163,184,0.08)',
-    fontSize: 14,
-    cursor: 'pointer',
-    userSelect: 'none',
-    gap: 8,
-    minHeight: 40,
-    background: 'transparent',
-    color: '#fff'
-  },
-
-  oauthGoogle: {
-    background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))'
-  },
-
-  oauthGithub: {
-    background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))'
-  },
-
-  dividerRow: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 10,
-    marginTop: 12
-  },
-
-  line: {
-    flex: 1,
-    height: 1,
-    background: 'rgba(148,163,184,0.06)'
-  },
-
-  orText: {
-    fontSize: 13,
-    color: 'rgba(230,230,230,0.65)',
-    padding: '0 8px'
-  },
-
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 10,
-    marginTop: 6
-  },
-
-  label: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 6
-  },
-
-  labelText: {
-    fontSize: 13,
-    color: 'rgba(230,230,230,0.68)'
-  },
-
-  input: {
-    width: '100%',
-    padding: '10px 12px',
-    borderRadius: 10,
-    background: 'rgba(255,255,255,0.02)',
-    color: '#e6e6e6',
-    border: '1px solid rgba(148,163,184,0.10)',
-    fontSize: 14,
-    outline: 'none',
-    boxSizing: 'border-box',
-    transition: 'box-shadow 120ms, border-color 120ms'
-  },
-
-  submitButton: {
-    marginTop: 6,
-    width: '100%',
-    padding: '10px 12px',
-    borderRadius: 10,
-    background: 'linear-gradient(180deg,#475569,#94a3b8)',
-    border: 'none',
-    color: '#fff',
-    fontWeight: 600,
-    cursor: 'pointer',
-    fontSize: 15,
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 44
-  },
-
-  modalFooter: {
-    padding: '12px 18px 18px 18px',
-    borderTop: '1px solid rgba(148,163,184,0.03)',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 8
-  },
-
-  belowRow: {
-    textAlign: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-    gap: 8,
-    alignItems: 'center'
-  },
-
-  muted: {
-    color: 'rgba(230,230,230,0.66)',
-    fontSize: 13
-  },
-
-  link: {
-    color: '#9fb0d9',
-    textDecoration: 'none',
-    fontWeight: 600
-  },
-
-  dividerThin: {
-    height: 1,
-    background: 'rgba(148,163,184,0.04)',
-    marginTop: 6,
-    marginBottom: 6
-  },
-
-  secured: {
-    textAlign: 'center'
-  },
-
-  securedText: {
-    color: 'rgba(230,230,230,0.9)',
-    fontSize: 13,
-    fontWeight: 600
-  },
-
-  /* Toasts: black background */
-  toastContainer: {
-    position: 'fixed',
-    top: 18,
-    right: 18,
-    width: 360,
-    maxWidth: 'calc(100% - 36px)',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 10,
-    zIndex: 60000
-  },
-
-  toastBase: {
-    display: 'flex',
-    gap: 10,
-    alignItems: 'center',
-    padding: '10px 12px',
-    borderRadius: 10,
-    boxShadow: '0 8px 20px rgba(2,6,23,0.6)',
-    color: '#fff',
-    fontSize: 13,
-    minWidth: 120
-  },
-
-  toastError: {
-    background: '#000000',
-    border: '1px solid rgba(255,255,255,0.06)'
-  },
-
-  toastSuccess: {
-    background: '#000000',
-    border: '1px solid rgba(255,255,255,0.06)'
-  },
-
-  toastInfo: {
-    background: '#000000',
-    border: '1px solid rgba(255,255,255,0.06)'
-  },
-
-  toastCloseBtn: {
-    marginLeft: 8,
-    background: 'transparent',
-    border: 'none',
-    color: 'rgba(255,255,255,0.7)',
-    cursor: 'pointer',
-    fontSize: 14,
-    lineHeight: 1
-  }
+/* styles (JS objects) - neutral palette, translucent overlay so underlying content shows */
+const overlay = {
+  position: 'fixed',
+  inset: 0,
+  display: 'block', // page scroll model
+  padding: 20,
+  background: 'linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))',
+  backdropFilter: 'blur(6px)',
+  overflowY: 'auto',
+  WebkitOverflowScrolling: 'touch',
+  minHeight: '100vh',
+  zIndex: 9999
+}
+
+const modal = {
+  width: '100%',
+  maxWidth: 460, // reduced width per request
+  margin: '40px auto',
+  borderRadius: 14,
+  background: 'linear-gradient(180deg, rgba(15,19,24,0.6), rgba(10,12,16,0.6))',
+  border: '1px solid rgba(99,102,106,0.12)',
+  boxShadow: '0 20px 50px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  maxHeight: 'calc(100vh - 80px)'
+}
+
+const modalInner = {
+  padding: 18,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 12,
+  overflowY: 'auto'
+}
+
+/* header / brand */
+const header = {
+  paddingBottom: 6,
+  borderBottom: '1px solid rgba(148,163,184,0.04)'
+}
+
+const brandRow = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12
+}
+
+const logo = {
+  width: 44,
+  height: 44,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+}
+
+const logoCircle = {
+  width: 36,
+  height: 36,
+  borderRadius: 999,
+  background: 'linear-gradient(135deg,#2f3438,#11151a)',
+  boxShadow: '0 4px 12px rgba(2,6,23,0.6)'
+}
+
+const title = {
+  margin: 0,
+  fontSize: 18,
+  fontWeight: 600,
+  color: '#e6e6e6'
+}
+
+const subtitle = {
+  fontSize: 13,
+  color: 'rgba(230,230,230,0.72)',
+  marginTop: 4
+}
+
+/* oauth row */
+const oauthSection = {
+  marginTop: 8,
+  display: 'flex',
+  gap: 8
+}
+
+const oauthButton = {
+  flex: 1,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '10px 12px',
+  borderRadius: 10,
+  border: '1px solid rgba(148,163,184,0.08)',
+  fontSize: 14,
+  cursor: 'pointer',
+  userSelect: 'none',
+  gap: 8,
+  minHeight: 40
+}
+
+const oauthGoogle = {
+  background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))',
+  color: '#fff'
+}
+
+const oauthGithub = {
+  background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))',
+  color: '#fff'
+}
+
+/* divider row */
+const dividerRow = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  marginTop: 12
+}
+
+const line = {
+  flex: 1,
+  height: 1,
+  background: 'rgba(148,163,184,0.06)'
+}
+
+const orText = {
+  fontSize: 13,
+  color: 'rgba(230,230,230,0.65)',
+  padding: '0 8px'
+}
+
+/* form */
+const form = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  marginTop: 6
+}
+
+const label = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6
+}
+
+const labelText = {
+  fontSize: 13,
+  color: 'rgba(230,230,230,0.68)'
+}
+
+const input = {
+  width: '100%',
+  padding: '10px 12px',
+  borderRadius: 10,
+  background: 'rgba(255,255,255,0.02)',
+  color: '#e6e6e6',
+  border: '1px solid rgba(148,163,184,0.10)',
+  fontSize: 14,
+  outline: 'none',
+  boxSizing: 'border-box',
+  transition: 'box-shadow 120ms, border-color 120ms'
+}
+
+const submitButton = {
+  marginTop: 6,
+  width: '100%',
+  padding: '10px 12px',
+  borderRadius: 10,
+  background: 'linear-gradient(180deg,#475569,#94a3b8)',
+  border: 'none',
+  color: '#fff',
+  fontWeight: 600,
+  cursor: 'pointer',
+  fontSize: 15,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: 44
+}
+
+/* modal footer */
+const modalFooter = {
+  padding: '12px 18px 18px 18px',
+  borderTop: '1px solid rgba(148,163,184,0.03)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8
+}
+
+const belowRow = {
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  gap: 8,
+  alignItems: 'center'
+}
+
+const muted = {
+  color: 'rgba(230,230,230,0.66)',
+  fontSize: 13
+}
+
+const link = {
+  color: '#9fb0d9',
+  textDecoration: 'none',
+  fontWeight: 600
+}
+
+const dividerThin = {
+  height: 1,
+  background: 'rgba(148,163,184,0.04)',
+  marginTop: 6,
+  marginBottom: 6
+}
+
+const secured = {
+  textAlign: 'center'
+}
+
+const securedText = {
+  color: 'rgba(230,230,230,0.9)',
+  fontSize: 13,
+  fontWeight: 600
+}
+
+/* toasts - black background as requested */
+const toastContainer = {
+  position: 'fixed',
+  top: 18,
+  right: 18,
+  width: 360,
+  maxWidth: 'calc(100% - 36px)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  zIndex: 60000
+}
+
+const toastBase = {
+  display: 'flex',
+  gap: 10,
+  alignItems: 'center',
+  padding: '10px 12px',
+  borderRadius: 10,
+  boxShadow: '0 8px 20px rgba(2,6,23,0.6)',
+  color: '#fff',
+  fontSize: 13,
+  minWidth: 120
+}
+
+const toastError = {
+  background: '#000000',
+  border: '1px solid rgba(255,255,255,0.06)'
+}
+const toastSuccess = {
+  background: '#000000',
+  border: '1px solid rgba(255,255,255,0.06)'
+}
+const toastInfo = {
+  background: '#000000',
+  border: '1px solid rgba(255,255,255,0.06)'
+}
+
+const toastCloseBtn = {
+  marginLeft: 8,
+  background: 'transparent',
+  border: 'none',
+  color: 'rgba(255,255,255,0.7)',
+  cursor: 'pointer',
+  fontSize: 14,
+  lineHeight: 1
 }