security hardening, team invites, granular locking, view counts, board subscriptions, scheduled changelog, mentions, recovery codes, accessibility and hover states

packages/web/src/components/EmptyState.tsx

@@ -1,68 +1,54 @@
+import { IconSpeakerphone, IconSearch, IconActivity, IconFileText } from '@tabler/icons-react'
+import type { Icon } from '@tabler/icons-react'
+
 interface Props {
   title?: string
   message?: string
   actionLabel?: string
   onAction?: () => void
+  icon?: Icon
 }
 
 export default function EmptyState({
   title = 'Nothing here yet',
-  message = 'Be the first to share feedback',
-  actionLabel = 'Create a post',
+  message = 'Be the first to share your thoughts and ideas',
+  actionLabel = 'Share feedback',
   onAction,
+  icon: CustomIcon,
 }: Props) {
-  return (
-    <div className="flex flex-col items-center justify-center py-16 px-4 fade-in">
-      {/* Megaphone SVG */}
-      <svg
-        width="120"
-        height="120"
-        viewBox="0 0 120 120"
-        fill="none"
-        className="mb-6"
-      >
-        <circle cx="60" cy="60" r="55" stroke="var(--text-tertiary)" strokeWidth="1" strokeDasharray="4 4" />
-        <path
-          d="M75 35L45 50H35a5 5 0 00-5 5v10a5 5 0 005 5h10l30 15V35z"
-          stroke="var(--accent)"
-          strokeWidth="2.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          fill="none"
-        />
-        <path
-          d="M85 48a10 10 0 010 24"
-          stroke="var(--accent)"
-          strokeWidth="2.5"
-          strokeLinecap="round"
-          fill="none"
-          opacity="0.6"
-        />
-        <path
-          d="M92 40a20 20 0 010 40"
-          stroke="var(--accent)"
-          strokeWidth="2"
-          strokeLinecap="round"
-          fill="none"
-          opacity="0.3"
-        />
-        <path
-          d="M42 70v10a5 5 0 005 5h5a5 5 0 005-5v-7"
-          stroke="var(--text-tertiary)"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          fill="none"
-        />
-      </svg>
+  const Icon = CustomIcon || IconSpeakerphone
 
-      <h3
-        className="text-lg font-semibold mb-2"
-        style={{ fontFamily: 'var(--font-heading)', color: 'var(--text)' }}
+  return (
+    <div className="flex flex-col items-center justify-center py-20 px-4 fade-in">
+      <div
+        className="w-24 h-24 rounded-full flex items-center justify-center mb-8"
+        style={{
+          background: 'var(--accent-subtle)',
+          boxShadow: 'var(--shadow-glow)',
+        }}
+      >
+        <Icon size={44} stroke={1.5} style={{ color: 'var(--accent)' }} />
+      </div>
+
+      <h2
+        className="font-bold mb-3"
+        style={{
+          fontFamily: 'var(--font-heading)',
+          color: 'var(--text)',
+          fontSize: 'var(--text-xl)',
+        }}
       >
         {title}
-      </h3>
-      <p className="text-sm mb-6" style={{ color: 'var(--text-tertiary)' }}>
+      </h2>
+      <p
+        className="mb-8 text-center"
+        style={{
+          color: 'var(--text-secondary)',
+          fontSize: 'var(--text-base)',
+          maxWidth: 360,
+          lineHeight: 1.6,
+        }}
+      >
         {message}
       </p>
       {onAction && (