diff --git a/apps/app/src/pages/ConnectMcp.tsx b/apps/app/src/pages/ConnectMcp.tsx index 66152f56..9632d187 100644 --- a/apps/app/src/pages/ConnectMcp.tsx +++ b/apps/app/src/pages/ConnectMcp.tsx @@ -39,7 +39,9 @@ import { useSponsoredTransaction } from '../hooks/useSponsoredTransaction' import { config } from '../config' import { getAnalyticsErrorType, trackEvent } from '../utils/analytics' import { getMoveFields, type DynamicFieldObjectFields, type RegistryObjectFields } from '../utils/suiFields' -import memwalLogo from '../assets/memwal-logo.svg' + +// Walrus Memory wordmark (public asset, same one the dashboard nav uses). +const WALRUS_MEMORY_LOGO = '/walrus-memory-logo.svg' type Step = | 'consent' @@ -290,104 +292,106 @@ export default function ConnectMcp() { }, [walletPickerOpen, currentAccount]) return ( -
-
) } -// ---------- styles (match Dashboard's neo-brutalism .card pattern) ---------- +// ---------- inline styles for bits the .setup-classic design system doesn't class ---------- +// The page reuses the SetupWizard dark theme (.setup-classic, .setup-classic-*, +// .card.setup-classic-feature-card, .lp-btn-yellow) so the MCP consent screen is +// visually identical to the Walrus Memory setup flow. These cover the small inner +// labels / code / detail rows inside the dark feature card. + +const cardLabelStyle: React.CSSProperties = { + margin: '0 0 10px', + fontFamily: 'var(--font-mono)', + fontSize: '0.7rem', + fontWeight: 600, + textTransform: 'uppercase', + letterSpacing: '0.08em', + color: '#8f9294', +} -const mcpNavBrandStyle: React.CSSProperties = { - gap: 12, +const permListStyle: React.CSSProperties = { + listStyle: 'none', + padding: 0, + margin: 0, + lineHeight: 2, + fontSize: '0.9rem', + color: '#faf8f5', } -const mcpNavTitleStyle: React.CSSProperties = { - fontSize: '1rem', - fontWeight: 700, - color: '#000', - lineHeight: 1, - transform: 'translateY(8px)', +const codeStyle: React.CSSProperties = { + fontFamily: 'var(--font-mono)', + fontSize: '0.82em', + color: '#cbb6ff', } -const pageStyle: React.CSSProperties = { - minHeight: '100vh', - background: '#FAF8F5', // same as --color-tusk used by .card / body - color: '#1a1a1a', +const dividerStyle: React.CSSProperties = { + height: 1, + background: '#2a2c2e', + margin: '18px 0', } -const mainStyle: React.CSSProperties = { - maxWidth: 640, - margin: '40px auto', - padding: '0 24px', +const detailRowStyle: React.CSSProperties = { display: 'flex', flexDirection: 'column', - gap: 24, -} - -const cardStyle: React.CSSProperties = { - background: '#fff', - border: '2px solid #000', - borderRadius: 12, - padding: 28, - boxShadow: '4px 4px 0 #000', -} - -const h1Style: React.CSSProperties = { - fontSize: 22, - fontWeight: 800, - margin: '0 0 12px', - letterSpacing: -0.3, -} - -const h3Style: React.CSSProperties = { - fontSize: 12, - fontWeight: 700, - textTransform: 'uppercase' as const, - letterSpacing: 0.6, - color: '#525252', - marginTop: 20, - marginBottom: 8, -} - -const ulStyle: React.CSSProperties = { - listStyle: 'none', - padding: 0, - margin: '0 0 8px', - lineHeight: 1.9, - fontSize: 14, + gap: 2, + marginBottom: 12, } -const dlStyle: React.CSSProperties = { - fontSize: 13, - lineHeight: 1.6, - margin: '0 0 20px', - wordBreak: 'break-all' as const, +const detailLabelStyle: React.CSSProperties = { + fontFamily: 'var(--font-mono)', + fontSize: '0.7rem', + textTransform: 'uppercase', + letterSpacing: '0.06em', + color: '#8f9294', } -const subtleStyle: React.CSSProperties = { - color: '#525252', - fontSize: 14, +const detailValueStyle: React.CSSProperties = { + fontFamily: 'var(--font-mono)', + fontSize: '0.84rem', + color: '#faf8f5', + wordBreak: 'break-all', } -const primaryButton: React.CSSProperties = { - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - gap: 6, - padding: '12px 26px', - background: '#E8FF75', - color: '#000', - borderRadius: 12, - border: '2px solid #000', - fontSize: '0.94rem', - fontWeight: 700, - cursor: 'pointer', - textDecoration: 'none', - boxShadow: '3px 3px 0 #000', +const errorTextStyle: React.CSSProperties = { + color: '#ff6b6b', }