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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user