@kyro-cms/admin 0.9.0 → 0.9.2

package/src/components/UserManagement.tsx

@@ -1,23 +1,18 @@
 import React, { useState, useEffect } from "react";
-import { apiGet, apiPatch, apiDelete } from "../lib/api";
+import { apiGet, apiPost, apiPatch, apiDelete } from "../lib/api";
 import {
   Users,
   UserPlus,
   Shield,
   Lock,
   Unlock,
-  MoreVertical,
-  Mail,
   Clock,
   Search,
-  Filter,
   Trash2,
-  Edit2,
-  ChevronRight,
-  ShieldCheck,
-  ShieldAlert
+  AlertTriangle,
 } from "./ui/icons";
 import { useUIStore, toast } from "../lib/stores";
+import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { Badge } from "./ui/Badge";
 import { PageHeader } from "./ui/PageHeader";
 
@@ -26,6 +21,7 @@ interface User {
   email: string;
   name?: string;
   role: string;
+  avatar?: string;
   locked?: boolean;
   lastLogin?: string;
   tenantId?: string;
@@ -36,6 +32,10 @@ export function UserManagement() {
   const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [createForm, setCreateForm] = useState({ name: "", email: "", password: "", role: "customer" });
+  const [createError, setCreateError] = useState("");
+  const [creating, setCreating] = useState(false);
   const { confirm, alert } = useUIStore();
 
   useEffect(() => {
@@ -71,6 +71,7 @@ export function UserManagement() {
           toast.success(isLocking ? `Account locked: ${user.email}` : `Account restored: ${user.email}`);
         } catch (error) {
           console.error("Failed to toggle user lock:", error);
+          toast.error("Failed to update account status");
         }
       },
     });
@@ -89,11 +90,41 @@ export function UserManagement() {
           toast.success(`Identity purged: ${user.email}`);
         } catch (error) {
           console.error("Failed to delete user:", error);
+          toast.error("Failed to delete user");
         }
       },
     });
   };
 
+  const handleCreateUser = async () => {
+    if (!createForm.email.trim() || !createForm.password.trim()) {
+      setCreateError("Email and password are required");
+      return;
+    }
+    setCreating(true);
+    setCreateError("");
+    try {
+      await apiPost("/api/users", {
+        name: createForm.name.trim() || undefined,
+        email: createForm.email.trim(),
+        password: createForm.password,
+        role: createForm.role,
+      });
+      setShowCreateModal(false);
+      setCreateForm({ name: "", email: "", password: "", role: "customer" });
+      toast.success("User created successfully");
+      loadUsers();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to create user";
+      setCreateError(message);
+      toast.error(message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const roleOptions = ["super_admin", "admin", "editor", "author", "customer", "guest"];
+
   const filteredUsers = users.filter(
     (u) =>
       u.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -110,7 +141,9 @@ export function UserManagement() {
         action={{
           label: "New User",
           onClick: () => {
-            // New user logic
+            setCreateForm({ name: "", email: "", password: "", role: "customer" });
+            setCreateError("");
+            setShowCreateModal(true);
           },
           icon: UserPlus,
         }}
@@ -165,9 +198,7 @@ export function UserManagement() {
                 <tr key={user.id} className={`hover:bg-[var(--kyro-surface-accent)]/50 transition-colors group ${user.locked ? "opacity-50 grayscale" : ""}`}>
                   <td className="px-6 py-3.5">
                     <div className="flex items-center gap-3">
-                      <div className="w-8 h-8 rounded-lg bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] flex items-center justify-center text-xs font-bold text-[var(--kyro-primary)] group-hover:scale-105 transition-transform">
-                        {user.name ? user.name[0] : user.email[0].toUpperCase()}
-                      </div>
+                      <AvatarCell user={user} />
                       <div className="min-w-0">
                         <div className="flex items-center gap-2">
                            <div className="text-xs font-bold text-[var(--kyro-text-primary)] truncate">{user.name || user.email.split("@")[0]}</div>
@@ -214,9 +245,6 @@ export function UserManagement() {
                       >
                         <Trash2 className="w-3.5 h-3.5" />
                       </button>
-                      <button className="p-1.5 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface)] transition-all">
-                        <MoreVertical className="w-3.5 h-3.5" />
-                      </button>
                     </div>
                   </td>
                 </tr>
@@ -225,6 +253,116 @@ export function UserManagement() {
           </tbody>
         </table>
       </div>
+
+      {/* Create User Modal */}
+      <Modal
+        open={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        title="Create User"
+        size="lg"
+      >
+        <ModalContent>
+          <div className="space-y-6">
+            <div>
+              <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Name (optional)</label>
+              <input
+                type="text"
+                value={createForm.name}
+                onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })}
+                placeholder="John Doe"
+                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Email Address</label>
+              <input
+                type="email"
+                value={createForm.email}
+                onChange={(e) => setCreateForm({ ...createForm, email: e.target.value })}
+                placeholder="user@example.com"
+                required
+                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Password</label>
+              <input
+                type="password"
+                value={createForm.password}
+                onChange={(e) => setCreateForm({ ...createForm, password: e.target.value })}
+                placeholder="Minimum 12 characters"
+                required
+                minLength={12}
+                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Role</label>
+              <select
+                value={createForm.role}
+                onChange={(e) => setCreateForm({ ...createForm, role: e.target.value })}
+                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+              >
+                {roleOptions.map((r) => (
+                  <option key={r} value={r}>{r}</option>
+                ))}
+              </select>
+            </div>
+            {createError && (
+              <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-2 text-red-500 text-xs font-bold">
+                <AlertTriangle className="w-4 h-4" />
+                {createError}
+              </div>
+            )}
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button
+            type="button"
+            onClick={() => setShowCreateModal(false)}
+            className="px-6 py-2.5 rounded-xl font-bold text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleCreateUser}
+            disabled={creating}
+            className="kyro-btn kyro-btn-primary px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 disabled:opacity-50"
+          >
+            {creating ? "Creating..." : "Create User"}
+          </button>
+        </ModalActions>
+      </Modal>
+
+
+    </div>
+  );
+}
+
+function AvatarCell({ user }: { user: User }) {
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const avatar = user.avatar;
+    if (typeof avatar === "string" && /^[0-9a-f-]+$/i.test(avatar)) {
+      apiGet<any>(`/api/media/${avatar}`)
+        .then((media) => setUrl(media?.thumbnailUrl || media?.url || null))
+        .catch(() => setUrl(null));
+    }
+  }, [user.avatar]);
+
+  if (url) {
+    return (
+      <div className="w-8 h-8 rounded-lg overflow-hidden border border-[var(--kyro-border)] flex-shrink-0">
+        <img src={url} alt="" className="w-full h-full object-cover" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-8 h-8 rounded-lg bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] flex items-center justify-center text-xs font-bold text-[var(--kyro-primary)] flex-shrink-0">
+      {user.name ? user.name[0] : user.email[0].toUpperCase()}
     </div>
   );
 }

package/src/components/UserMenu.tsx

@@ -1,22 +1,41 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
 import { User, Shield, Key, Webhook, Clock, FileText, ExternalLink, HelpCircle, LogOut } from "./ui/icons";
+import { useAuthStore } from "../lib/stores";
+import { apiGet } from "../lib/api";
 
 interface UserMenuProps {
   adminPath: string;
 }
 
 export function UserMenu({ adminPath }: UserMenuProps) {
+  const currentUser = useAuthStore((s) => s.user);
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const avatar = currentUser?.avatar;
+    if (typeof avatar === "string" && /^[0-9a-f-]+$/i.test(avatar)) {
+      apiGet<any>(`/api/media/${avatar}`)
+        .then((media) => setAvatarUrl(media?.thumbnailUrl || media?.url || null))
+        .catch(() => setAvatarUrl(null));
+    } else {
+      setAvatarUrl(null);
+    }
+  }, [currentUser?.avatar]);
 
   return (
     <Dropdown
       align="right"
       trigger={
         <div
-          className="flex justify-center p-2.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded-xl transition-all shadow-sm active:scale-95"
+          className="flex justify-center p-.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded-xl transition-all shadow-sm active:scale-95"
           title="Account"
         >
-          <User className="w-4 h-4" strokeWidth={2.5} />
+          {avatarUrl ? (
+            <img src={avatarUrl} alt="" className="w-8 h-8 rounded-full object-cover" />
+          ) : (
+            <User className="w-4 h-4" strokeWidth={2.5} />
+          )}
         </div>
       }
     >
@@ -28,7 +47,14 @@ export function UserMenu({ adminPath }: UserMenuProps) {
 
       <DropdownItem
         icon={<User className="w-4 h-4" />}
-        onClick={() => window.location.href = `${adminPath}/settings/account`}
+        onClick={() => {
+          const id = currentUser?.id;
+          if (id) {
+            window.location.href = `${adminPath}/users/${id}`;
+          } else {
+            window.location.href = `${adminPath}/users`;
+          }
+        }}
       >
         Profile Settings
       </DropdownItem>

package/src/components/VersionHistoryPanel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { SlidePanel } from "./ui/SlidePanel";
-import { Button } from "./ui/Button";
 import { Spinner } from "./ui/Spinner";
+import { History, Eye, GitCompare, Undo2, CheckCircle2, Clock, User } from "lucide-react";
 
 interface Version {
   id: string;
@@ -38,8 +38,15 @@ export function VersionHistoryPanel({
   onCompare,
   loading = false,
 }: VersionHistoryPanelProps) {
-  const formatDate = (dateStr: string) => {
-    const date = new Date(dateStr);
+  const formatDate = (dateValue: any) => {
+    if (!dateValue) return "Unknown date";
+    const date = new Date(dateValue);
+    if (isNaN(date.getTime())) {
+      // Sometimes strings from DB like SQLite might need parsing
+      const parsed = Date.parse(dateValue);
+      if (!isNaN(parsed)) return new Date(parsed).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" });
+      return "Invalid date";
+    }
     return date.toLocaleDateString("en-US", {
       month: "short",
       day: "numeric",
@@ -49,10 +56,17 @@ export function VersionHistoryPanel({
     });
   };
 
-  const formatTimeAgo = (dateStr: string) => {
-    const date = new Date(dateStr);
+  const formatTimeAgo = (dateValue: any) => {
+    if (!dateValue) return "Unknown date";
+    const date = new Date(dateValue);
+    if (isNaN(date.getTime())) return formatDate(dateValue);
+
     const now = new Date();
     const diffMs = now.getTime() - date.getTime();
+    
+    // If it's in the future (e.g. server clock skew), just say "Just now"
+    if (diffMs < 0) return "Just now";
+
     const diffMins = Math.floor(diffMs / 60000);
     const diffHours = Math.floor(diffMs / 3600000);
     const diffDays = Math.floor(diffMs / 86400000);
@@ -61,7 +75,7 @@ export function VersionHistoryPanel({
     if (diffMins < 60) return `${diffMins}m ago`;
     if (diffHours < 24) return `${diffHours}h ago`;
     if (diffDays < 7) return `${diffDays}d ago`;
-    return formatDate(dateStr);
+    return formatDate(dateValue);
   };
 
   return (
@@ -76,128 +90,107 @@ export function VersionHistoryPanel({
           <Spinner />
         </div>
       ) : versions.length === 0 ? (
-        <div className="text-center py-12 text-gray-500">
-          <svg
-            className="w-12 h-12 mx-auto mb-4 text-gray-300"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <polyline points="12,6 12,12 16,14" />
-          </svg>
-          <p>No version history yet</p>
-          <p className="text-sm text-gray-400 mt-1">
-            Versions are created when you save changes
-          </p>
+        <div className="text-center flex flex-col items-center justify-center py-16 text-[var(--kyro-text-muted)]">
+          <History className="w-12 h-12 mb-4 opacity-20" />
+          <p className="font-medium text-[var(--kyro-text)]">No version history yet</p>
+          <p className="text-sm mt-1">Versions are automatically saved as you work.</p>
         </div>
       ) : (
-        <div className="space-y-1">
-          {versions.map((version) => (
-            <div
-              key={version.id}
-              className={`p-3 rounded-lg border transition-colors ${
-                version.id === currentVersionId
-                  ? "border-primary bg-primary-light/30"
-                  : "border-gray-100 hover:border-gray-200 hover:bg-gray-50"
-              }`}
-            >
-              <div className="flex items-start justify-between">
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
-                    <span
-                      className={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${
-                        version.status === "published"
-                          ? "bg-green-100 text-green-700"
-                          : "bg-gray-100 text-gray-600"
-                      }`}
-                    >
-                      {version.status === "published" ? "Published" : "Draft"}
-                    </span>
-                    <span className="text-xs text-gray-400">
-                      v{version.version}
-                    </span>
+        <div className="space-y-3 px-1 pb-4 pt-1">
+          {versions.map((version) => {
+            const isCurrent = version.id === currentVersionId;
+            return (
+              <div
+                key={version.id}
+                className={`p-4 rounded-xl border transition-all duration-200 group relative overflow-hidden ${
+                  isCurrent
+                    ? "border-[var(--kyro-primary)] bg-[var(--kyro-primary)]/5 shadow-sm"
+                    : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/30 hover:bg-[var(--kyro-surface-accent)] hover:shadow-sm bg-[var(--kyro-surface)]"
+                }`}
+              >
+                {isCurrent && (
+                  <div className="absolute top-0 left-0 w-1 h-full bg-[var(--kyro-primary)] shadow-[0_0_8px_var(--kyro-primary)]" />
+                )}
+                
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-2">
+                      <span
+                        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wide uppercase ${
+                          version.status === "published"
+                            ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                            : "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400"
+                        }`}
+                      >
+                        {version.status === "published" && <CheckCircle2 className="w-3 h-3" />}
+                        {version.status === "published" ? "Published" : "Draft"}
+                      </span>
+                      <span className="text-xs font-semibold text-[var(--kyro-text)] px-2 py-0.5 rounded-md bg-[var(--kyro-surface-accent)]">
+                        v{version.version}
+                      </span>
+                      {isCurrent && (
+                        <span className="text-[10px] font-medium text-[var(--kyro-primary)] flex items-center gap-1">
+                          <span className="w-1.5 h-1.5 rounded-full bg-[var(--kyro-primary)] animate-pulse" />
+                          Current
+                        </span>
+                      )}
+                    </div>
+                    
+                    <div className="flex items-center gap-1.5 text-sm font-medium text-[var(--kyro-text)] truncate mb-1">
+                      <Clock className="w-3.5 h-3.5 text-[var(--kyro-text-muted)]" />
+                      {formatTimeAgo(version.createdAt)}
+                    </div>
+                    
+                    {version.createdBy && (
+                      <div className="flex items-center gap-1.5 text-xs text-[var(--kyro-text-muted)] mt-1.5">
+                        <User className="w-3.5 h-3.5" />
+                        <span>{version.createdBy.name || version.createdBy.email}</span>
+                      </div>
+                    )}
+                    
+                    {version.changelog && (
+                      <p className="text-xs text-[var(--kyro-text-secondary)] mt-2 italic border-l-2 border-[var(--kyro-border)] pl-2">
+                        "{version.changelog}"
+                      </p>
+                    )}
                   </div>
-                  <p className="text-sm text-gray-600 truncate">
-                    {formatTimeAgo(version.createdAt)}
-                  </p>
-                  {version.createdBy && (
-                    <p className="text-xs text-gray-400 mt-0.5">
-                      by {version.createdBy.name || version.createdBy.email}
-                    </p>
-                  )}
-                  {version.changelog && (
-                    <p className="text-xs text-gray-500 mt-1 truncate">
-                      {version.changelog}
-                    </p>
-                  )}
-                </div>
-                <div className="flex items-center gap-1 ml-2">
-                  <button type="button"
-                    onClick={() => onPreview(version)}
-                    className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
-                    title="Preview this version"
-                  >
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                      <circle cx="12" cy="12" r="3" />
-                    </svg>
-                  </button>
-                  {onCompare && (
+                  
+                  <div className="flex flex-col sm:flex-row items-center gap-1.5 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
                     <button type="button"
-                      onClick={() =>
-                        onCompare(
-                          version,
-                          versions.find((v) => v.id === currentVersionId) ||
-                            version,
-                        )
-                      }
-                      className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
-                      title="Compare with current"
+                      onClick={() => onPreview(version)}
+                      className="p-2 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)]/10 rounded-md transition-colors"
+                      title="Preview this version"
                     >
-                      <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                      >
-                        <path d="M16 3h5v5M8 3H3v5M3 16v5h5M21 16v5h-5M3 12h18" />
-                      </svg>
+                      <Eye className="w-4 h-4" />
                     </button>
-                  )}
-                  {version.id !== currentVersionId && (
-                    <button type="button"
-                      onClick={() => onRestore(version)}
-                      className="p-1.5 text-gray-400 hover:text-primary hover:bg-primary-light rounded transition-colors"
-                      title="Restore this version"
-                    >
-                      <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
+                    {onCompare && (
+                      <button type="button"
+                        onClick={() =>
+                          onCompare(
+                            version,
+                            versions.find((v) => v.id === currentVersionId) || version,
+                          )
+                        }
+                        className="p-2 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)]/10 rounded-md transition-colors"
+                        title="Compare with current"
                       >
-                        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
-                        <path d="M3 3v5h5" />
-                      </svg>
-                    </button>
-                  )}
+                        <GitCompare className="w-4 h-4" />
+                      </button>
+                    )}
+                    {!isCurrent && (
+                      <button type="button"
+                        onClick={() => onRestore(version)}
+                        className="p-2 text-amber-600 hover:bg-amber-500/10 rounded-md transition-colors"
+                        title="Restore this version"
+                      >
+                        <Undo2 className="w-4 h-4" />
+                      </button>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </SlidePanel>

package/src/components/WebhookManager.tsx

@@ -48,7 +48,7 @@ export function WebhookManager() {
     endpoint: "/api/webhooks",
   });
 
-  const { alert } = useUIStore();
+  const { confirm } = useUIStore();
   const [showTestModal, setShowTestModal] = useState(false);
   const [showHelpModal, setShowHelpModal] = useState(false);
   const [testResult, setTestResult] = useState<{
@@ -76,6 +76,7 @@ export function WebhookManager() {
       toast.success(`Webhook established: ${formData.name}`);
     } catch (e) {
       setCreateError("Failed to create webhook");
+      toast.error("Failed to create webhook");
     }
   };
 
@@ -105,6 +106,7 @@ export function WebhookManager() {
       toast.success(newStatus === "active" ? "Signals resumed" : "Dispatcher paused");
     } catch (e) {
       console.error(e);
+      toast.error("Failed to toggle webhook status");
     }
   };
 
@@ -214,7 +216,7 @@ export function WebhookManager() {
             <button
               type="button"
               onClick={() => setShowCreateModal(true)}
-              className="inline-flex items-center gap-3 px-8 py-4 bg-[var(--kyro-primary)] text-white rounded-2xl font-bold hover:scale-[1.05] transition-all shadow-xl shadow-[var(--kyro-primary)]/10"
+              className="kyro-btn kyro-btn-primary inline-flex items-center gap-3 px-8 py-4 rounded-2xl font-bold hover:scale-[1.05] transition-all shadow-xl shadow-[var(--kyro-primary)]/10"
             >
               <Plus className="w-5 h-5" />
               Configure Webhook
@@ -413,7 +415,7 @@ export function WebhookManager() {
           <button
             type="button"
             onClick={handleCreate}
-            className="px-6 py-2.5 rounded-xl font-bold text-sm bg-[var(--kyro-primary)] text-white hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10"
+            className="kyro-btn kyro-btn-primary px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10"
           >
             Create Webhook
           </button>
@@ -522,7 +524,7 @@ export function WebhookManager() {
           <button
             type="button"
             onClick={() => setShowHelpModal(false)}
-            className="w-full py-3 rounded-xl font-bold text-sm bg-[var(--kyro-primary)] text-white hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
+            className="kyro-btn kyro-btn-primary w-full py-3 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
           >
             I Understand
           </button>