@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/views/FormSubmissions.tsx

@@ -67,9 +67,9 @@ function mediumColor(medium: string): string {
 }
 
 function DeviceIcon({ type }: { type: string }) {
-  if (type === 'Mobile') return <Smartphone className="w-3.5 h-3.5" />
-  if (type === 'Tablet') return <Tablet className="w-3.5 h-3.5" />
-  return <Monitor className="w-3.5 h-3.5" />
+  if (type === 'Mobile') return <Smartphone className="h-3.5 w-3.5" />
+  if (type === 'Tablet') return <Tablet className="h-3.5 w-3.5" />
+  return <Monitor className="h-3.5 w-3.5" />
 }
 
 export interface FormSubmissionsProps {
@@ -127,8 +127,8 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
 
   if (loading) {
     return (
-      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
@@ -137,11 +137,11 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
     <div className="p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
           <button
             onClick={refetch}
-            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
@@ -151,14 +151,14 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
       <div className="mb-4">
         <button
           onClick={() => onNavigate?.('/forms')}
-          className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors mb-3"
+          className="mb-3 inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-900"
         >
-          <ArrowLeft className="w-4 h-4" />
+          <ArrowLeft className="h-4 w-4" />
           Back to Forms
         </button>
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-semibold text-gray-900 mb-1">
+            <h1 className="mb-1 text-2xl font-semibold text-gray-900">
               Contact Form - Submissions
             </h1>
             <p className="text-sm text-gray-600">
@@ -167,49 +167,49 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
           </div>
           <button
             onClick={handleExport}
-            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+            className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
           >
-            <Download className="w-4 h-4" />
+            <Download className="h-4 w-4" />
             Export CSV
           </button>
         </div>
       </div>
 
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4">
-        <div className="bg-white rounded-lg border border-gray-200 p-4">
-          <div className="text-xs text-gray-600 mb-1">Total</div>
+      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-5">
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <div className="mb-1 text-xs text-gray-600">Total</div>
           <div className="text-2xl font-semibold text-gray-900">{submissions.length}</div>
         </div>
-        <div className="bg-white rounded-lg border border-gray-200 p-4">
-          <div className="text-xs text-gray-600 mb-1">New</div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <div className="mb-1 text-xs text-gray-600">New</div>
           <div className="text-2xl font-semibold text-blue-600">
             {submissions.filter((s) => s.status === 'new').length}
           </div>
         </div>
-        <div className="bg-white rounded-lg border border-gray-200 p-4">
-          <div className="text-xs text-gray-600 mb-1">Paid Traffic</div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <div className="mb-1 text-xs text-gray-600">Paid Traffic</div>
           <div className="text-2xl font-semibold text-orange-600">{paidCount}</div>
         </div>
-        <div className="bg-white rounded-lg border border-gray-200 p-4">
-          <div className="text-xs text-gray-600 mb-1">Organic</div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <div className="mb-1 text-xs text-gray-600">Organic</div>
           <div className="text-2xl font-semibold text-green-600">{organicCount}</div>
         </div>
-        <div className="bg-white rounded-lg border border-gray-200 p-4">
-          <div className="text-xs text-gray-600 mb-1">Top Source</div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <div className="mb-1 text-xs text-gray-600">Top Source</div>
           <div className="text-lg font-semibold text-gray-900">{sourceSummary[0]?.[0] ?? '—'}</div>
         </div>
       </div>
 
-      <div className="bg-white rounded-lg border border-gray-200 p-4 mb-4">
-        <h3 className="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
-          <Globe className="w-4 h-4 text-blue-600" />
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
+        <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900">
+          <Globe className="h-4 w-4 text-blue-600" />
           Lead Source Breakdown
         </h3>
         <div className="flex flex-wrap gap-2">
           {sourceSummary.map(([label, count]) => (
-            <div key={label} className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-lg">
+            <div key={label} className="flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-1.5">
               <span className="text-sm font-medium text-gray-800">{label}</span>
-              <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+              <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800">
                 {count}
               </span>
             </div>
@@ -217,22 +217,22 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
         </div>
       </div>
 
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
-        <div className="p-3 flex flex-col sm:flex-row gap-3">
-          <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+        <div className="flex flex-col gap-3 p-3 sm:flex-row">
+          <div className="relative flex-1">
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
             <input
               type="text"
               placeholder="Search submissions..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
           </div>
           <select
             value={filterStatus}
             onChange={(e) => setFilterStatus(e.target.value)}
-            className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
           >
             <option value="all">All Status</option>
             <option value="new">New</option>
@@ -242,7 +242,7 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
           <select
             value={filterSource}
             onChange={(e) => setFilterSource(e.target.value)}
-            className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
           >
             <option value="all">All Sources</option>
             {uniqueSources.map((src) => (
@@ -255,7 +255,7 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
       </div>
 
       {filteredSubmissions.length === 0 ? (
-        <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
+        <div className="rounded-lg border border-gray-200 bg-white p-8 text-center">
           <p className="text-sm text-gray-500">No submissions yet</p>
         </div>
       ) : (
@@ -268,56 +268,56 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
             return (
               <div
                 key={submission.id}
-                className="bg-white rounded-lg border border-gray-200 hover:shadow-md transition-shadow"
+                className="rounded-lg border border-gray-200 bg-white transition-shadow hover:shadow-md"
               >
                 <div className="p-4">
-                  <div className="flex items-start justify-between mb-3">
-                    <div className="flex items-start gap-3 flex-1">
-                      <div className="w-10 h-10 bg-linear-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-medium shrink-0 text-sm">
+                  <div className="mb-3 flex items-start justify-between">
+                    <div className="flex flex-1 items-start gap-3">
+                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600 text-sm font-medium text-white">
                         {submission.name.charAt(0)}
                       </div>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-1">
-                          <h3 className="font-semibold text-gray-900 text-sm">{submission.name}</h3>
+                      <div className="min-w-0 flex-1">
+                        <div className="mb-1 flex items-center gap-2">
+                          <h3 className="text-sm font-semibold text-gray-900">{submission.name}</h3>
                           <span
-                            className={`px-2 py-0.5 rounded-full text-xs font-medium ${submission.status === 'new' ? 'bg-blue-100 text-blue-800' : submission.status === 'read' ? 'bg-gray-100 text-gray-800' : 'bg-green-100 text-green-800'}`}
+                            className={`rounded-full px-2 py-0.5 text-xs font-medium ${submission.status === 'new' ? 'bg-blue-100 text-blue-800' : submission.status === 'read' ? 'bg-gray-100 text-gray-800' : 'bg-green-100 text-green-800'}`}
                           >
                             {submission.status}
                           </span>
                         </div>
-                        <div className="text-xs text-gray-600 mb-2">
+                        <div className="mb-2 text-xs text-gray-600">
                           {submission.email}
                           {submission.phone ? ` · ${submission.phone}` : ''}
                         </div>
                         <p className="text-sm text-gray-700">{submission.message}</p>
-                        <div className="text-xs text-gray-500 mt-2">
+                        <div className="mt-2 text-xs text-gray-500">
                           Submitted {submission.submittedAt}
                         </div>
                       </div>
                     </div>
                     <button
                       onClick={() => toast.success('Submission deleted')}
-                      className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                      className="rounded p-1.5 transition-colors hover:bg-gray-100"
                       title="Delete"
                     >
-                      <Trash2 className="w-4 h-4 text-red-600" />
+                      <Trash2 className="h-4 w-4 text-red-600" />
                     </button>
                   </div>
 
-                  <div className="flex flex-wrap items-center gap-2 mt-3 pt-3 border-t border-gray-100">
+                  <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-3">
                     <span
-                      className={`px-2 py-0.5 rounded-full text-xs font-medium ${sourceColor(attr.source)}`}
+                      className={`rounded-full px-2 py-0.5 text-xs font-medium ${sourceColor(attr.source)}`}
                     >
                       {attr.source}
                     </span>
-                    <span className="text-gray-400 text-xs">/</span>
+                    <span className="text-xs text-gray-400">/</span>
                     <span
-                      className={`px-2 py-0.5 rounded-full text-xs font-medium ${mediumColor(attr.medium)}`}
+                      className={`rounded-full px-2 py-0.5 text-xs font-medium ${mediumColor(attr.medium)}`}
                     >
                       {attr.medium}
                     </span>
                     {attr.campaign && (
-                      <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
+                      <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">
                         {attr.campaign}
                       </span>
                     )}
@@ -327,28 +327,28 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
                     </span>
                     {activeClickIds.length > 0 && (
                       <span className="flex items-center gap-1 text-xs text-gray-500">
-                        <MousePointerClick className="w-3.5 h-3.5" />
+                        <MousePointerClick className="h-3.5 w-3.5" />
                         {activeClickIds.map(([k]) => k).join(', ')}
                       </span>
                     )}
                     <button
                       onClick={() => setExpandedId(expanded ? null : submission.id)}
-                      className="ml-auto flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 transition-colors"
+                      className="ml-auto flex items-center gap-1 text-xs text-blue-600 transition-colors hover:text-blue-800"
                     >
                       {expanded ? (
-                        <ChevronUp className="w-3.5 h-3.5" />
+                        <ChevronUp className="h-3.5 w-3.5" />
                       ) : (
-                        <ChevronDown className="w-3.5 h-3.5" />
+                        <ChevronDown className="h-3.5 w-3.5" />
                       )}
                       {expanded ? 'Hide' : 'Attribution'}
                     </button>
                   </div>
 
                   {expanded && (
-                    <div className="mt-3 pt-3 border-t border-gray-100 bg-gray-50 rounded-lg p-4 text-sm space-y-4">
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="mt-3 space-y-4 rounded-lg border-t border-gray-100 bg-gray-50 p-4 pt-3 text-sm">
+                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                         <div>
-                          <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
+                          <h4 className="mb-2 text-xs font-semibold tracking-wider text-gray-600 uppercase">
                             Traffic Source
                           </h4>
                           <div className="space-y-1.5">
@@ -381,25 +381,25 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
                           </div>
                         </div>
                         <div>
-                          <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
+                          <h4 className="mb-2 text-xs font-semibold tracking-wider text-gray-600 uppercase">
                             Page Context
                           </h4>
                           <div className="space-y-1.5">
                             <div>
-                              <span className="text-gray-500 text-xs">Landing Page</span>
-                              <div className="flex items-center gap-1 mt-0.5">
-                                <MapPin className="w-3 h-3 text-gray-400 shrink-0" />
-                                <span className="font-medium text-gray-900 text-xs break-all">
+                              <span className="text-xs text-gray-500">Landing Page</span>
+                              <div className="mt-0.5 flex items-center gap-1">
+                                <MapPin className="h-3 w-3 shrink-0 text-gray-400" />
+                                <span className="text-xs font-medium break-all text-gray-900">
                                   {attr.landingPage}
                                 </span>
                               </div>
                             </div>
                             {attr.referrer && (
                               <div>
-                                <span className="text-gray-500 text-xs">Referrer</span>
-                                <div className="flex items-center gap-1 mt-0.5">
-                                  <ExternalLink className="w-3 h-3 text-gray-400 shrink-0" />
-                                  <span className="font-medium text-gray-900 text-xs break-all">
+                                <span className="text-xs text-gray-500">Referrer</span>
+                                <div className="mt-0.5 flex items-center gap-1">
+                                  <ExternalLink className="h-3 w-3 shrink-0 text-gray-400" />
+                                  <span className="text-xs font-medium break-all text-gray-900">
                                     {attr.referrer}
                                   </span>
                                 </div>
@@ -417,17 +417,17 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
                       </div>
                       {activeClickIds.length > 0 && (
                         <div>
-                          <h4 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
+                          <h4 className="mb-2 text-xs font-semibold tracking-wider text-gray-600 uppercase">
                             Click IDs
                           </h4>
                           <div className="flex flex-wrap gap-2">
                             {activeClickIds.map(([key, val]) => (
                               <div
                                 key={key}
-                                className="px-2.5 py-1 bg-white border border-gray-200 rounded-lg"
+                                className="rounded-lg border border-gray-200 bg-white px-2.5 py-1"
                               >
                                 <span className="text-xs text-gray-500">{key}: </span>
-                                <span className="text-xs font-mono text-gray-800">
+                                <span className="font-mono text-xs text-gray-800">
                                   {String(val).slice(0, 20)}...
                                 </span>
                               </div>
@@ -442,11 +442,11 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
                   )}
                 </div>
 
-                <div className="px-4 py-3 border-t border-gray-200 flex items-center gap-2">
-                  <button className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+                <div className="flex items-center gap-2 border-t border-gray-200 px-4 py-3">
+                  <button className="rounded-lg bg-blue-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-blue-700">
                     Reply
                   </button>
-                  <button className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+                  <button className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm transition-colors hover:bg-gray-50">
                     Mark as Read
                   </button>
                 </div>

package/src/views/Forms.tsx

@@ -30,8 +30,8 @@ export function Forms({ onNavigate }: FormsProps) {
 
   if (loading) {
     return (
-      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
@@ -40,89 +40,89 @@ export function Forms({ onNavigate }: FormsProps) {
     <div className="p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
           <button
             onClick={refetch}
-            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
         </div>
       )}
 
-      <div className="flex items-center justify-between mb-4">
+      <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Forms</h1>
+          <h1 className="mb-1 text-xl font-semibold text-gray-900 sm:text-2xl">Forms</h1>
           <p className="text-sm text-gray-600">{filteredAndSorted.length} total forms</p>
         </div>
         <button
           onClick={() => onNavigate?.('/forms/new')}
-          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+          className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
         >
-          <Plus className="w-4 h-4" />
+          <Plus className="h-4 w-4" />
           New Form
         </button>
       </div>
 
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
         <div className="p-3">
           <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
             <input
               type="text"
               placeholder="Search forms..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
           </div>
         </div>
       </div>
 
       {filteredAndSorted.length === 0 ? (
-        <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
-          <p className="text-sm text-gray-500 mb-2">No forms yet</p>
-          <button className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+        <div className="rounded-lg border border-gray-200 bg-white p-8 text-center">
+          <p className="mb-2 text-sm text-gray-500">No forms yet</p>
+          <button className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700">
             Create your first form
           </button>
         </div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {filteredAndSorted.map((form: any) => (
             <div
               key={form.id}
-              className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow"
+              className="rounded-lg border border-gray-200 bg-white p-4 transition-shadow hover:shadow-md"
             >
-              <div className="flex items-start justify-between mb-3">
+              <div className="mb-3 flex items-start justify-between">
                 <div className="flex-1">
-                  <h3 className="font-semibold text-gray-900 mb-1">{form.name}</h3>
-                  <p className="text-sm text-gray-600 mb-2">{form.description}</p>
+                  <h3 className="mb-1 font-semibold text-gray-900">{form.name}</h3>
+                  <p className="mb-2 text-sm text-gray-600">{form.description}</p>
                 </div>
-                <button className="p-1.5 hover:bg-gray-100 rounded transition-colors">
-                  <MoreVertical className="w-4 h-4 text-gray-600" />
+                <button className="rounded p-1.5 transition-colors hover:bg-gray-100">
+                  <MoreVertical className="h-4 w-4 text-gray-600" />
                 </button>
               </div>
-              <div className="flex items-center gap-4 text-sm text-gray-600 mb-3">
+              <div className="mb-3 flex items-center gap-4 text-sm text-gray-600">
                 <span className="flex items-center gap-1">
-                  <FileText className="w-4 h-4" />
+                  <FileText className="h-4 w-4" />
                   {form.fields} fields
                 </span>
                 <span className="flex items-center gap-1">
-                  <Send className="w-4 h-4" />
+                  <Send className="h-4 w-4" />
                   {form.submissions} submissions
                 </span>
               </div>
               <div className="flex items-center gap-2">
                 <button
                   onClick={() => onNavigate?.(`/forms/${form.id}/submissions`)}
-                  className="flex-1 px-3 py-1.5 text-sm text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                  className="flex-1 rounded-lg bg-blue-600 px-3 py-1.5 text-center text-sm text-white transition-colors hover:bg-blue-700"
                 >
                   View Submissions
                 </button>
                 <button
                   onClick={() => onNavigate?.(`/forms/${form.id}/edit`)}
-                  className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                  className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm transition-colors hover:bg-gray-50"
                 >
                   Edit
                 </button>