@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/src/MashupApp.styles.ts

@@ -1,6 +1,9 @@
 import type { CSSProperties } from 'react';
 
+/* ─── Airbnb-inspired service portal styles ──────────────────────── */
+
 export const styles = {
+  /* Fallback component (unchanged) */
   fallback: {
     container: {
       border: '1px solid #ddd',
@@ -33,73 +36,298 @@ export const styles = {
       paddingLeft: 12,
     } satisfies CSSProperties,
   },
+
+  /* Pega form root wrapper */
   root: {
     padding: 16,
     fontFamily: 'system-ui, sans-serif',
   } satisfies CSSProperties,
+
+  /* ── App shell ─────────────────────────────────────────────────── */
   app: {
     container: {
-      fontFamily: 'system-ui, sans-serif',
+      fontFamily: 'Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
+      color: '#222222',
+      minHeight: '100vh',
+      background: '#ffffff',
     } satisfies CSSProperties,
-    header: {
-      padding: '1rem 1.5rem',
-      background: '#1e293b',
-      color: '#fff',
+
+    /* ── Nav bar ────────────────────────────────────────────────── */
+    nav: {
       display: 'flex',
-      justifyContent: 'space-between',
       alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '0 24px',
+      height: 64,
+      borderBottom: '1px solid #DDDDDD',
+      background: '#ffffff',
+      position: 'sticky' as const,
+      top: 0,
+      zIndex: 100,
     } satisfies CSSProperties,
-    headerTitle: {
+    navLogo: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      fontSize: 18,
       fontWeight: 600,
+      color: '#2563eb',
+      textDecoration: 'none',
+      cursor: 'pointer',
+    } satisfies CSSProperties,
+    navLogoIcon: {
+      fontSize: 24,
+    } satisfies CSSProperties,
+    navRight: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12,
     } satisfies CSSProperties,
     logoutButton: {
-      background: 'transparent',
-      border: '1px solid #64748b',
-      color: '#94a3b8',
-      padding: '0.375rem 0.75rem',
-      borderRadius: '0.375rem',
+      background: '#ffffff',
+      border: '1px solid #DDDDDD',
+      color: '#222222',
+      padding: '8px 16px',
+      borderRadius: 24,
       cursor: 'pointer',
-      fontSize: '0.8125rem',
+      fontSize: 14,
+      fontWeight: 500,
+      transition: 'box-shadow 0.2s',
+    } satisfies CSSProperties,
+
+    /* ── Home screen ────────────────────────────────────────────── */
+    homeContent: {
+      maxWidth: 1080,
+      margin: '0 auto',
+      padding: '48px 24px',
+    } satisfies CSSProperties,
+    homeTitle: {
+      fontSize: 32,
+      fontWeight: 700,
+      marginBottom: 8,
+      color: '#222222',
+    } satisfies CSSProperties,
+    homeSubtitle: {
+      fontSize: 18,
+      color: '#717171',
+      marginBottom: 40,
+    } satisfies CSSProperties,
+
+    /* ── Card grid ──────────────────────────────────────────────── */
+    cardGrid: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gap: 24,
+      marginBottom: 56,
+    } satisfies CSSProperties,
+    card: {
+      border: '1px solid #DDDDDD',
+      borderRadius: 12,
+      padding: 24,
+      cursor: 'pointer',
+      transition: 'transform 0.2s, box-shadow 0.2s',
+      background: '#ffffff',
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 12,
+      position: 'relative' as const,
+      overflow: 'hidden',
+    } satisfies CSSProperties,
+    cardActive: {
+      border: '1px solid #DDDDDD',
+      borderRadius: 12,
+      padding: 24,
+      cursor: 'pointer',
+      transition: 'transform 0.2s, box-shadow 0.2s',
+      background: '#ffffff',
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 12,
+      position: 'relative' as const,
+      overflow: 'hidden',
+      boxShadow: '0 6px 16px rgba(0,0,0,0.12)',
+    } satisfies CSSProperties,
+    cardDisabled: {
+      border: '1px solid #EBEBEB',
+      borderRadius: 12,
+      padding: 24,
+      cursor: 'default',
+      background: '#ffffff',
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 12,
+      position: 'relative' as const,
+      overflow: 'hidden',
+      opacity: 0.55,
+    } satisfies CSSProperties,
+    cardIcon: {
+      width: 48,
+      height: 48,
+      borderRadius: 12,
+      background: '#F7F7F7',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 24,
+    } satisfies CSSProperties,
+    cardIconActive: {
+      width: 48,
+      height: 48,
+      borderRadius: 12,
+      background: '#EFF6FF',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 24,
     } satisfies CSSProperties,
-    content: {
-      maxWidth: 720,
-      margin: '2rem auto',
-      padding: '0 1.5rem',
+    cardTitle: {
+      fontSize: 16,
+      fontWeight: 600,
+      color: '#222222',
     } satisfies CSSProperties,
-    welcome: {
-      textAlign: 'center',
-      marginBottom: '2rem',
+    cardDesc: {
+      fontSize: 14,
+      color: '#717171',
+      lineHeight: 1.4,
     } satisfies CSSProperties,
-    welcomeHeading: {
-      fontSize: '1.5rem',
+    cardAction: {
+      marginTop: 'auto',
+      fontSize: 14,
       fontWeight: 600,
-      marginBottom: '0.75rem',
+      color: '#2563eb',
+    } satisfies CSSProperties,
+    comingSoonBadge: {
+      display: 'inline-block',
+      marginTop: 'auto',
+      background: '#F7F7F7',
+      color: '#717171',
+      fontSize: 12,
+      fontWeight: 600,
+      padding: '4px 12px',
+      borderRadius: 20,
+      width: 'fit-content',
+    } satisfies CSSProperties,
+
+    /* ── Trust bar ──────────────────────────────────────────────── */
+    trustBar: {
+      display: 'flex',
+      justifyContent: 'center',
+      gap: 32,
+      padding: '24px 0',
+      borderTop: '1px solid #EBEBEB',
+      color: '#717171',
+      fontSize: 14,
+    } satisfies CSSProperties,
+    trustItem: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
     } satisfies CSSProperties,
-    welcomeText: {
-      color: '#64748b',
-      marginBottom: '1.5rem',
+
+    /* ── Form screen ────────────────────────────────────────────── */
+    formContent: {
+      maxWidth: 1080,
+      margin: '0 auto',
+      padding: '0 24px 48px',
     } satisfies CSSProperties,
-    createButton: {
-      background: '#2563eb',
-      color: '#fff',
+    backButton: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 6,
+      background: 'none',
       border: 'none',
-      padding: '0.625rem 1.5rem',
-      borderRadius: '0.375rem',
-      fontSize: '0.9375rem',
+      color: '#222222',
+      fontSize: 14,
       fontWeight: 500,
       cursor: 'pointer',
+      padding: '20px 0',
+      textDecoration: 'underline',
     } satisfies CSSProperties,
-    formArea: {
-      background: '#fff',
-      border: '1px solid #e2e8f0',
-      borderRadius: '0.75rem',
-      padding: '1.5rem',
-      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
+
+    /* Badge pills */
+    heroBadge: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 6,
+      fontSize: 14,
+      color: '#222222',
+      background: 'rgba(255,255,255,0.7)',
+      padding: '6px 14px',
+      borderRadius: 20,
+      fontWeight: 500,
+    } satisfies CSSProperties,
+
+    /* ── Two-column form layout ─────────────────────────────── */
+    twoCol: {
+      display: 'grid',
+      gridTemplateColumns: '40% 1fr',
+      gap: 32,
+      alignItems: 'start',
     } satisfies CSSProperties,
+    leftPanel: {
+      position: 'sticky' as const,
+      top: 88,
+    } satisfies CSSProperties,
+    leftPanelInner: {
+      background: 'linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #F0F0FF 100%)',
+      borderRadius: 16,
+      padding: '32px',
+    } satisfies CSSProperties,
+    leftTitle: {
+      fontSize: 24,
+      fontWeight: 700,
+      color: '#222222',
+      marginBottom: 4,
+    } satisfies CSSProperties,
+    leftSubtitle: {
+      fontSize: 15,
+      color: '#717171',
+      marginBottom: 20,
+    } satisfies CSSProperties,
+    leftBadges: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 8,
+      marginBottom: 20,
+    } satisfies CSSProperties,
+    leftDivider: {
+      height: 1,
+      background: 'rgba(0,0,0,0.08)',
+      margin: '20px 0',
+    } satisfies CSSProperties,
+    leftChecks: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 10,
+    } satisfies CSSProperties,
+
+    /* Form card */
+    formCard: {
+      background: '#ffffff',
+      border: '1px solid #DDDDDD',
+      borderRadius: 12,
+      padding: '32px',
+      boxShadow: '0 6px 16px rgba(0,0,0,0.12)',
+    } satisfies CSSProperties,
+    footerItem: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      fontSize: 14,
+      color: '#717171',
+    } satisfies CSSProperties,
+    footerCheck: {
+      color: '#008A05',
+      fontWeight: 700,
+      fontSize: 16,
+    } satisfies CSSProperties,
+
+    /* Loading */
     loading: {
-      textAlign: 'center',
-      padding: '2rem',
-      color: '#64748b',
+      textAlign: 'center' as const,
+      padding: '3rem',
+      color: '#717171',
+      fontSize: 16,
     } satisfies CSSProperties,
   },
 };