feat: restyle all 5 config form tabs to GitHub-dark

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.
This commit is contained in:
2026-03-21 21:42:01 +01:00
parent 14faaf87b7
commit 097d9d99fc
5 changed files with 84 additions and 84 deletions

View File

@@ -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>