From 3c643d5dcc89559dc99d0bc5305dba38dc7c44d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= <franjurmanovic@gmail.com>
Date: Sat, 21 Mar 2026 21:57:57 +0100
Subject: [PATCH] feat: restyle server create/delete modals to GitHub-dark

Apply GH-dark design tokens to Modal container, CreateServerModal, and
DeleteServerModal: overlay/canvas card pattern, form-input class, GhButton
variants (primary, ghost, danger-solid), and GH token text/border colors.
---
 src/components/server/CreateServerModal.tsx | 23 ++++++++++++---------
 src/components/server/DeleteServerModal.tsx | 23 ++++++++++++---------
 src/components/ui/Modal.tsx                 | 10 ++++-----
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/server/CreateServerModal.tsx b/src/components/server/CreateServerModal.tsx
index 520c0f2..7dda7fb 100755
--- a/src/components/server/CreateServerModal.tsx
+++ b/src/components/server/CreateServerModal.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect, useActionState, useTransition } from 'react';
 import { Modal } from '@/components/ui/Modal';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { GhButton } from '@/components/ui/GhButton';
 import { createServerAction, type ServerActionResult } from '@/lib/actions/server-management';
 import { useServerCreationPopup } from '@/lib/context/ServerCreationPopupContext';
 
@@ -58,12 +59,12 @@ export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
 	return (
 		<Modal isOpen={isOpen} onClose={handleClose} title="Create New Server">
 			{!state.success && state.message && (
-				<div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{state.message}</div>
+				<div className="mb-4 rounded-md border border-gh-red/20 bg-gh-red-bg p-3 text-sm text-gh-red">{state.message}</div>
 			)}
 
 			<form onSubmit={handleSubmit}>
 				<div className="mb-6">
-					<label htmlFor="server-name" className="block text-sm font-medium text-gray-300">
+					<label htmlFor="server-name" className="mb-1.5 block text-sm font-medium text-gh-secondary">
 						Server Name
 					</label>
 					<input
@@ -73,34 +74,36 @@ export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
 						onChange={(e) => setServerName(e.target.value)}
 						required
 						disabled={isSubmitting || isPending}
-						className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none disabled:opacity-50"
+						className="form-input"
 						placeholder="Enter server name..."
 					/>
 				</div>
 
 				<div className="flex justify-end space-x-2">
-					<button
+					<GhButton
 						type="button"
+						variant="ghost"
+						size="md"
 						onClick={handleClose}
 						disabled={isSubmitting || isPending}
-						className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700 disabled:opacity-50"
 					>
 						Cancel
-					</button>
-					<button
+					</GhButton>
+					<GhButton
 						type="submit"
+						variant="primary"
+						size="md"
 						disabled={isSubmitting || !serverName.trim() || isPending}
-						className="flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-green-700 disabled:opacity-50"
 					>
 						{isSubmitting ? (
 							<>
-								<LoadingSpinner className="mr-2 h-4 w-4" />
+								<LoadingSpinner className="h-4 w-4" />
 								Creating...
 							</>
 						) : (
 							'Create Server'
 						)}
-					</button>
+					</GhButton>
 				</div>
 			</form>
 		</Modal>
diff --git a/src/components/server/DeleteServerModal.tsx b/src/components/server/DeleteServerModal.tsx
index 3b6d0b5..6fc9592 100755
--- a/src/components/server/DeleteServerModal.tsx
+++ b/src/components/server/DeleteServerModal.tsx
@@ -3,6 +3,7 @@
 import { useState, useTransition } from 'react';
 import { Modal } from '@/components/ui/Modal';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { GhButton } from '@/components/ui/GhButton';
 import { deleteServerAction } from '@/lib/actions/server-management';
 import { Server } from '@/lib/schemas/server';
 
@@ -42,37 +43,39 @@ export function DeleteServerModal({ isOpen, onClose, server }: DeleteServerModal
 
 	return (
 		<Modal isOpen={isOpen} onClose={handleClose} title="Delete Server">
-			{error && <div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{error}</div>}
+			{error && <div className="mb-4 rounded-md border border-gh-red/20 bg-gh-red-bg p-3 text-sm text-gh-red">{error}</div>}
 
 			<div className="mb-6">
-				<p className="text-gray-300">
+				<p className="text-gh-secondary">
 					Are you sure you want to delete the server <strong>&quot;{server.name}&quot;</strong>?
 				</p>
-				<p className="mt-2 text-sm text-gray-400">This action cannot be undone.</p>
+				<p className="mt-2 text-sm text-gh-muted">This action cannot be undone.</p>
 			</div>
 
 			<div className="flex justify-end space-x-2">
-				<button
+				<GhButton
+					variant="ghost"
+					size="md"
 					onClick={handleClose}
 					disabled={isPending}
-					className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700 disabled:opacity-50"
 				>
 					Cancel
-				</button>
-				<button
+				</GhButton>
+				<GhButton
+					variant="danger-solid"
+					size="md"
 					onClick={handleDelete}
 					disabled={isPending}
-					className="flex items-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-red-700 disabled:opacity-50"
 				>
 					{isPending ? (
 						<>
-							<LoadingSpinner size="sm" className="mr-2" />
+							<LoadingSpinner size="sm" />
 							Deleting...
 						</>
 					) : (
 						'Delete Server'
 					)}
-				</button>
+				</GhButton>
 			</div>
 		</Modal>
 	);
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 7db1a5d..f20454b 100755
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -33,17 +33,17 @@ export function Modal({ isOpen, onClose, title, children, className }: ModalProp
 	if (!isOpen) return null;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center">
-			<div className="bg-opacity-50 absolute inset-0 bg-black" onClick={onClose} />
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+			<div className="absolute inset-0" onClick={onClose} />
 			<div
 				className={cn(
-					'relative mx-4 w-full max-w-md rounded-lg bg-gray-800 p-6 shadow-lg',
+					'relative w-full max-w-md rounded-lg border border-gh-border bg-gh-canvas p-6 shadow-xl',
 					className
 				)}
 			>
 				<div className="mb-4 flex items-center justify-between">
-					<h3 className="text-lg font-semibold text-white">{title}</h3>
-					<button onClick={onClose} className="text-gray-400 hover:text-white">
+					<h3 className="text-lg font-semibold text-gh-primary">{title}</h3>
+					<button onClick={onClose} className="text-gh-muted hover:text-gh-primary">
 						×
 					</button>
 				</div>