From 097d9d99fcf52b2bc89f75b1527bc8499c874906 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= <franjurmanovic@gmail.com>
Date: Sat, 21 Mar 2026 21:42:01 +0100
Subject: [PATCH] feat: restyle all 5 config form tabs to GitHub-dark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace gray-* tokens with gh-* design tokens across all config editors:
labels → text-gh-secondary, headings → border-gh-border-muted/text-gh-primary,
checkboxes → gh-overlay/gh-green/gh-blue, buttons → gh-btn-green, selects → form-select.
---
 .../configuration/AssistRulesEditor.tsx       | 16 ++---
 .../configuration/ConfigurationEditor.tsx     | 26 +++----
 .../configuration/EventConfigEditor.tsx       | 70 +++++++++----------
 .../configuration/EventRulesEditor.tsx        | 22 +++---
 .../configuration/ServerSettingsEditor.tsx    | 34 ++++-----
 5 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/src/components/configuration/AssistRulesEditor.tsx b/src/components/configuration/AssistRulesEditor.tsx
index 190bc19..68963c9 100755
--- a/src/components/configuration/AssistRulesEditor.tsx
+++ b/src/components/configuration/AssistRulesEditor.tsx
@@ -96,7 +96,7 @@ export function AssistRulesEditor({ serverId, config }: AssistRulesEditorProps)
 			<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 				{assistFields.map(({ key, label, type }) => (
 					<div key={key}>
-						<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">{label}</label>
 						{type === 'number' ? (
 							<input
 								type="number"
@@ -112,7 +112,7 @@ export function AssistRulesEditor({ serverId, config }: AssistRulesEditorProps)
 								disabled={isSubmitting}
 								value={formData[key]}
 								onChange={(e) => handleInputChange(key, e.target.value)}
-								className="form-input w-full"
+								className="form-select w-full"
 							>
 								<option value={0}>Allowed</option>
 								<option value={1}>Disabled</option>
@@ -122,15 +122,15 @@ export function AssistRulesEditor({ serverId, config }: AssistRulesEditorProps)
 				))}
 			</div>
 
-			<div className="border-t border-gray-700 pt-6">
-				<label className="flex items-center">
+			<div className="border-t border-gh-border pt-6">
+				<label className="flex items-center gap-2 text-sm text-gh-muted">
 					<input
 						type="checkbox"
 						checked={restart}
 						onChange={(e) => setRestart(e.target.checked)}
-						className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
+						className="h-4 w-4 rounded border-gh-border bg-gh-overlay accent-gh-green focus:ring-gh-blue"
 					/>
-					<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
+					Restart server after saving
 				</label>
 			</div>
 
@@ -138,9 +138,9 @@ export function AssistRulesEditor({ serverId, config }: AssistRulesEditorProps)
 				<button
 					type="submit"
 					disabled={isSubmitting}
-					className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+					className="rounded-md bg-gh-btn-green border border-gh-btn-green px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-gh-btn-green-hover disabled:cursor-not-allowed disabled:opacity-40"
 				>
-					{isSubmitting ? 'Saving...' : 'Save Changes'}
+					{isSubmitting ? 'Saving…' : 'Save Changes'}
 				</button>
 			</div>
 		</form>
diff --git a/src/components/configuration/ConfigurationEditor.tsx b/src/components/configuration/ConfigurationEditor.tsx
index 95766e7..56d5b7c 100755
--- a/src/components/configuration/ConfigurationEditor.tsx
+++ b/src/components/configuration/ConfigurationEditor.tsx
@@ -47,7 +47,7 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
 		<form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
 			<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 				<div>
-					<label className="mb-2 block text-sm font-medium text-gray-300">UDP Port</label>
+					<label className="mb-1.5 block text-sm font-medium text-gh-secondary">UDP Port</label>
 					<input
 						type="number"
 						disabled={isSubmitting}
@@ -58,7 +58,7 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
 				</div>
 
 				<div>
-					<label className="mb-2 block text-sm font-medium text-gray-300">TCP Port</label>
+					<label className="mb-1.5 block text-sm font-medium text-gh-secondary">TCP Port</label>
 					<input
 						type="number"
 						disabled={isSubmitting}
@@ -69,7 +69,7 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
 				</div>
 
 				<div>
-					<label className="mb-2 block text-sm font-medium text-gray-300">Max Connections</label>
+					<label className="mb-1.5 block text-sm font-medium text-gh-secondary">Max Connections</label>
 					<input
 						type="number"
 						disabled={isSubmitting}
@@ -80,12 +80,12 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
 				</div>
 
 				<div>
-					<label className="mb-2 block text-sm font-medium text-gray-300">LAN Discovery</label>
+					<label className="mb-1.5 block text-sm font-medium text-gh-secondary">LAN Discovery</label>
 					<select
 						disabled={isSubmitting}
 						value={formData.lanDiscovery}
 						onChange={(e) => handleInputChange('lanDiscovery', e.target.value)}
-						className="form-input w-full"
+						className="form-select w-full"
 					>
 						<option value={0}>No</option>
 						<option value={1}>Yes</option>
@@ -93,12 +93,12 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
 				</div>
 
 				<div>
-					<label className="mb-2 block text-sm font-medium text-gray-300">Register To Lobby</label>
+					<label className="mb-1.5 block text-sm font-medium text-gh-secondary">Register To Lobby</label>
 					<select
 						disabled={isSubmitting}
 						value={formData.registerToLobby}
 						onChange={(e) => handleInputChange('registerToLobby', e.target.value)}
-						className="form-input w-full"
+						className="form-select w-full"
 					>
 						<option value={0}>No</option>
 						<option value={1}>Yes</option>
@@ -106,15 +106,15 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
 				</div>
 			</div>
 
-			<div className="border-t border-gray-700 pt-6">
-				<label className="flex items-center">
+			<div className="border-t border-gh-border pt-6">
+				<label className="flex items-center gap-2 text-sm text-gh-muted">
 					<input
 						type="checkbox"
 						checked={restart}
 						onChange={(e) => setRestart(e.target.checked)}
-						className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
+						className="h-4 w-4 rounded border-gh-border bg-gh-overlay accent-gh-green focus:ring-gh-blue"
 					/>
-					<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
+					Restart server after saving
 				</label>
 			</div>
 
@@ -122,9 +122,9 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
 				<button
 					type="submit"
 					disabled={isSubmitting}
-					className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+					className="rounded-md bg-gh-btn-green border border-gh-btn-green px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-gh-btn-green-hover disabled:cursor-not-allowed disabled:opacity-40"
 				>
-					{isSubmitting ? 'Saving...' : 'Save Changes'}
+					{isSubmitting ? 'Saving…' : 'Save Changes'}
 				</button>
 			</div>
 		</form>
diff --git a/src/components/configuration/EventConfigEditor.tsx b/src/components/configuration/EventConfigEditor.tsx
index 8d2d8ae..8445f73 100755
--- a/src/components/configuration/EventConfigEditor.tsx
+++ b/src/components/configuration/EventConfigEditor.tsx
@@ -99,17 +99,17 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 	return (
 		<form onSubmit={handleSubmit} className="max-w-4xl space-y-8">
 			<div className="space-y-6">
-				<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
+				<h3 className="border-b border-gh-border-muted pb-2 text-sm font-semibold text-gh-primary">
 					Basic Event Settings
 				</h3>
 				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">Track</label>
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">Track</label>
 						<select
 							disabled={isSubmitting}
 							value={formData.track}
 							onChange={(e) => handleInputChange('track', e.target.value)}
-							className="form-input w-full"
+							className="form-select w-full"
 						>
 							<option value="barcelona">Barcelona</option>
 							<option value="brands_hatch">Brands Hatch</option>
@@ -140,7 +140,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 					</div>
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Pre-Race Waiting Time (seconds)
 						</label>
 						<input
@@ -154,7 +154,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 					</div>
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Session Over Time (seconds)
 						</label>
 						<input
@@ -168,7 +168,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 					</div>
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Post Qualify Seconds
 						</label>
 						<input
@@ -182,7 +182,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 					</div>
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Post Race Seconds
 						</label>
 						<input
@@ -198,12 +198,12 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 			</div>
 
 			<div className="space-y-6">
-				<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
+				<h3 className="border-b border-gh-border-muted pb-2 text-sm font-semibold text-gh-primary">
 					Weather Settings
 				</h3>
 				<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Ambient Temperature (°C)
 						</label>
 						<input
@@ -218,7 +218,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 					</div>
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Cloud Level (0.0-1.0)
 						</label>
 						<input
@@ -234,7 +234,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 					</div>
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">Rain (0.0-1.0)</label>
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">Rain (0.0-1.0)</label>
 						<input
 							type="number"
 							disabled={isSubmitting}
@@ -248,7 +248,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 					</div>
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Weather Randomness
 						</label>
 						<input
@@ -263,14 +263,14 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 					</div>
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Simracer Weather Conditions
 						</label>
 						<select
 							disabled={isSubmitting}
 							value={formData.simracerWeatherConditions}
 							onChange={(e) => handleInputChange('simracerWeatherConditions', e.target.value)}
-							className="form-input w-full"
+							className="form-select w-full"
 						>
 							<option value={0}>No</option>
 							<option value={1}>Yes</option>
@@ -278,14 +278,14 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 					</div>
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Fixed Condition Qualification
 						</label>
 						<select
 							disabled={isSubmitting}
 							value={formData.isFixedConditionQualification}
 							onChange={(e) => handleInputChange('isFixedConditionQualification', e.target.value)}
-							className="form-input w-full"
+							className="form-select w-full"
 						>
 							<option value={0}>No</option>
 							<option value={1}>Yes</option>
@@ -295,28 +295,28 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 			</div>
 
 			<div className="space-y-6">
-				<div className="flex items-center justify-between border-b border-gray-700 pb-2">
-					<h3 className="text-lg font-medium text-white">Sessions</h3>
+				<div className="flex items-center justify-between border-b border-gh-border-muted pb-2">
+					<h3 className="text-sm font-semibold text-gh-primary">Sessions</h3>
 					<button
 						type="button"
 						onClick={addSession}
 						disabled={isSubmitting}
-						className="rounded-md bg-blue-600 px-3 py-1 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+						className="rounded-md border border-gh-border bg-gh-overlay px-3 py-1.5 text-xs font-medium text-gh-secondary hover:bg-gh-border disabled:opacity-40"
 					>
-						Add Session
+						+ Add Session
 					</button>
 				</div>
 
 				<div className="space-y-4">
 					{formData.sessions.map((session, index) => (
-						<div key={index} className="rounded-lg bg-gray-800 p-4">
+						<div key={index} className="rounded-lg border border-gh-border bg-gh-canvas p-4">
 							<div className="mb-4 flex items-center justify-between">
-								<h4 className="text-sm font-medium text-white">Session {index + 1}</h4>
+								<h4 className="text-sm font-medium text-gh-primary">Session {index + 1}</h4>
 								<button
 									type="button"
 									onClick={() => removeSession(index)}
 									disabled={isSubmitting}
-									className="rounded-md bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700 disabled:opacity-50"
+									className="rounded px-2 py-1 text-xs text-gh-red hover:bg-gh-red-bg disabled:opacity-40"
 								>
 									Remove
 								</button>
@@ -324,14 +324,14 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 
 							<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-5">
 								<div>
-									<label className="mb-1 block text-xs font-medium text-gray-400">
+									<label className="mb-1 block text-xs font-medium text-gh-muted">
 										Session Type
 									</label>
 									<select
 										disabled={isSubmitting}
 										value={session.sessionType}
 										onChange={(e) => handleSessionChange(index, 'sessionType', e.target.value)}
-										className="form-input w-full text-sm"
+										className="form-select w-full text-sm"
 									>
 										{sessionTypes.map((type) => (
 											<option key={type.value} value={type.value}>
@@ -342,7 +342,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 								</div>
 
 								<div>
-									<label className="mb-1 block text-xs font-medium text-gray-400">
+									<label className="mb-1 block text-xs font-medium text-gh-muted">
 										Hour of Day
 									</label>
 									<input
@@ -357,7 +357,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 								</div>
 
 								<div>
-									<label className="mb-1 block text-xs font-medium text-gray-400">
+									<label className="mb-1 block text-xs font-medium text-gh-muted">
 										Day of Weekend
 									</label>
 									<input
@@ -372,7 +372,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 								</div>
 
 								<div>
-									<label className="mb-1 block text-xs font-medium text-gray-400">
+									<label className="mb-1 block text-xs font-medium text-gh-muted">
 										Time Multiplier
 									</label>
 									<input
@@ -387,7 +387,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 								</div>
 
 								<div>
-									<label className="mb-1 block text-xs font-medium text-gray-400">
+									<label className="mb-1 block text-xs font-medium text-gh-muted">
 										Duration (minutes)
 									</label>
 									<input
@@ -407,15 +407,15 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 				</div>
 			</div>
 
-			<div className="border-t border-gray-700 pt-6">
-				<label className="flex items-center">
+			<div className="border-t border-gh-border pt-6">
+				<label className="flex items-center gap-2 text-sm text-gh-muted">
 					<input
 						type="checkbox"
 						checked={restart}
 						onChange={(e) => setRestart(e.target.checked)}
-						className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
+						className="h-4 w-4 rounded border-gh-border bg-gh-overlay accent-gh-green focus:ring-gh-blue"
 					/>
-					<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
+					Restart server after saving
 				</label>
 			</div>
 
@@ -423,9 +423,9 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
 				<button
 					type="submit"
 					disabled={isSubmitting}
-					className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+					className="rounded-md bg-gh-btn-green border border-gh-btn-green px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-gh-btn-green-hover disabled:cursor-not-allowed disabled:opacity-40"
 				>
-					{isSubmitting ? 'Saving...' : 'Save Changes'}
+					{isSubmitting ? 'Saving…' : 'Save Changes'}
 				</button>
 			</div>
 		</form>
diff --git a/src/components/configuration/EventRulesEditor.tsx b/src/components/configuration/EventRulesEditor.tsx
index 1b9e466..fb65422 100755
--- a/src/components/configuration/EventRulesEditor.tsx
+++ b/src/components/configuration/EventRulesEditor.tsx
@@ -105,11 +105,11 @@ export function EventRulesEditor({ serverId, config }: EventRulesEditorProps) {
 	return (
 		<form onSubmit={handleSubmit} className="max-w-4xl space-y-8">
 			<div className="space-y-6">
-				<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">Race Rules</h3>
+				<h3 className="border-b border-gh-border-muted pb-2 text-sm font-semibold text-gh-primary">Race Rules</h3>
 				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 					{numberFields.map(({ key, label, min, max }) => (
 						<div key={key}>
-							<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
+							<label className="mb-1.5 block text-sm font-medium text-gh-secondary">{label}</label>
 							<input
 								type="number"
 								disabled={isSubmitting}
@@ -125,18 +125,18 @@ export function EventRulesEditor({ serverId, config }: EventRulesEditorProps) {
 			</div>
 
 			<div className="space-y-6">
-				<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
+				<h3 className="border-b border-gh-border-muted pb-2 text-sm font-semibold text-gh-primary">
 					Pitstop & Refuelling Rules
 				</h3>
 				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 					{booleanFields.map(({ key, label }) => (
 						<div key={key}>
-							<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
+							<label className="mb-1.5 block text-sm font-medium text-gh-secondary">{label}</label>
 							<select
 								disabled={isSubmitting}
 								value={formData[key] ? 'true' : 'false'}
 								onChange={(e) => handleInputChange(key, e.target.value === 'true')}
-								className="form-input w-full"
+								className="form-select w-full"
 							>
 								<option value="false">No</option>
 								<option value="true">Yes</option>
@@ -146,15 +146,15 @@ export function EventRulesEditor({ serverId, config }: EventRulesEditorProps) {
 				</div>
 			</div>
 
-			<div className="border-t border-gray-700 pt-6">
-				<label className="flex items-center">
+			<div className="border-t border-gh-border pt-6">
+				<label className="flex items-center gap-2 text-sm text-gh-muted">
 					<input
 						type="checkbox"
 						checked={restart}
 						onChange={(e) => setRestart(e.target.checked)}
-						className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
+						className="h-4 w-4 rounded border-gh-border bg-gh-overlay accent-gh-green focus:ring-gh-blue"
 					/>
-					<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
+					Restart server after saving
 				</label>
 			</div>
 
@@ -162,9 +162,9 @@ export function EventRulesEditor({ serverId, config }: EventRulesEditorProps) {
 				<button
 					type="submit"
 					disabled={isSubmitting}
-					className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+					className="rounded-md bg-gh-btn-green border border-gh-btn-green px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-gh-btn-green-hover disabled:cursor-not-allowed disabled:opacity-40"
 				>
-					{isSubmitting ? 'Saving...' : 'Save Changes'}
+					{isSubmitting ? 'Saving…' : 'Save Changes'}
 				</button>
 			</div>
 		</form>
diff --git a/src/components/configuration/ServerSettingsEditor.tsx b/src/components/configuration/ServerSettingsEditor.tsx
index 671f5cb..ece93ca 100755
--- a/src/components/configuration/ServerSettingsEditor.tsx
+++ b/src/components/configuration/ServerSettingsEditor.tsx
@@ -124,13 +124,13 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
 	return (
 		<form onSubmit={handleSubmit} className="max-w-4xl space-y-8">
 			<div className="space-y-6">
-				<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
+				<h3 className="border-b border-gh-border-muted pb-2 text-sm font-semibold text-gh-primary">
 					Basic Settings
 				</h3>
 				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 					{textFields.map(({ key, label, type }) => (
 						<div key={key}>
-							<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
+							<label className="mb-1.5 block text-sm font-medium text-gh-secondary">{label}</label>
 							<input
 								type={type}
 								disabled={isSubmitting}
@@ -142,12 +142,12 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
 					))}
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">Car Group</label>
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">Car Group</label>
 						<select
 							disabled={isSubmitting}
 							value={formData.carGroup}
 							onChange={(e) => handleInputChange('carGroup', e.target.value)}
-							className="form-input w-full"
+							className="form-select w-full"
 						>
 							{carGroups.map((group) => (
 								<option key={group} value={group}>
@@ -160,13 +160,13 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
 			</div>
 
 			<div className="space-y-6">
-				<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
+				<h3 className="border-b border-gh-border-muted pb-2 text-sm font-semibold text-gh-primary">
 					Requirements & Limits
 				</h3>
 				<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
 					{numberFields.map(({ key, label, min, max }) => (
 						<div key={key}>
-							<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
+							<label className="mb-1.5 block text-sm font-medium text-gh-secondary">{label}</label>
 							<input
 								type="number"
 								disabled={isSubmitting}
@@ -182,18 +182,18 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
 			</div>
 
 			<div className="space-y-6">
-				<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
+				<h3 className="border-b border-gh-border-muted pb-2 text-sm font-semibold text-gh-primary">
 					Race Options
 				</h3>
 				<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
 					{selectFields.map(({ key, label }) => (
 						<div key={key}>
-							<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
+							<label className="mb-1.5 block text-sm font-medium text-gh-secondary">{label}</label>
 							<select
 								disabled={isSubmitting}
 								value={formData[key] as number}
 								onChange={(e) => handleInputChange(key, parseInt(e.target.value))}
-								className="form-input w-full"
+								className="form-select w-full"
 							>
 								<option value={0}>No</option>
 								<option value={1}>Yes</option>
@@ -202,14 +202,14 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
 					))}
 
 					<div>
-						<label className="mb-2 block text-sm font-medium text-gray-300">
+						<label className="mb-1.5 block text-sm font-medium text-gh-secondary">
 							Formation Lap Type
 						</label>
 						<select
 							disabled={isSubmitting}
 							value={formData.formationLapType}
 							onChange={(e) => handleInputChange('formationLapType', parseInt(e.target.value))}
-							className="form-input w-full"
+							className="form-select w-full"
 						>
 							<option value={0}>Old Limiter Lap</option>
 							<option value={1}>
@@ -221,15 +221,15 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
 				</div>
 			</div>
 
-			<div className="border-t border-gray-700 pt-6">
-				<label className="flex items-center">
+			<div className="border-t border-gh-border pt-6">
+				<label className="flex items-center gap-2 text-sm text-gh-muted">
 					<input
 						type="checkbox"
 						checked={restart}
 						onChange={(e) => setRestart(e.target.checked)}
-						className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
+						className="h-4 w-4 rounded border-gh-border bg-gh-overlay accent-gh-green focus:ring-gh-blue"
 					/>
-					<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
+					Restart server after saving
 				</label>
 			</div>
 
@@ -237,9 +237,9 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
 				<button
 					type="submit"
 					disabled={isSubmitting}
-					className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+					className="rounded-md bg-gh-btn-green border border-gh-btn-green px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-gh-btn-green-hover disabled:cursor-not-allowed disabled:opacity-40"
 				>
-					{isSubmitting ? 'Saving...' : 'Save Changes'}
+					{isSubmitting ? 'Saving…' : 'Save Changes'}
 				</button>
 			</div>
 		</form>