FJurmanovic/acc-server-manager-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Fran Jurmanović
2026-03-21 21:42:01 +01:00
parent 14faaf87b7
commit 097d9d99fc
5 changed files with 84 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/configuration/AssistRulesEditor.tsx
View File

@@ -96,7 +96,7 @@ export function AssistRulesEditor({ serverId, config }: AssistRulesEditorProps)
<div className="grid grid-cols-1 gap-6 md:grid-cols-2"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{assistFields.map(({ key, label, type }) => ( {assistFields.map(({ key, label, type }) => (
<div key={key}> <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' ? ( {type === 'number' ? (
<input <input
type="number" type="number"
@@ -112,7 +112,7 @@ export function AssistRulesEditor({ serverId, config }: AssistRulesEditorProps)
disabled={isSubmitting} disabled={isSubmitting}
value={formData[key]} value={formData[key]}
onChange={(e) => handleInputChange(key, e.target.value)} onChange={(e) => handleInputChange(key, e.target.value)}
className="form-input w-full" className="form-select w-full"
> >
<option value={0}>Allowed</option> <option value={0}>Allowed</option>
<option value={1}>Disabled</option> <option value={1}>Disabled</option>
@@ -122,15 +122,15 @@ export function AssistRulesEditor({ serverId, config }: AssistRulesEditorProps)
))} ))}
</div> </div>
<div className="border-t border-gray-700 pt-6"> <div className="border-t border-gh-border pt-6">
<label className="flex items-center"> <label className="flex items-center gap-2 text-sm text-gh-muted">
<input <input
type="checkbox" type="checkbox"
checked={restart} checked={restart}
onChange={(e) => setRestart(e.target.checked)} 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> </label>
</div> </div>
@@ -138,9 +138,9 @@ export function AssistRulesEditor({ serverId, config }: AssistRulesEditorProps)
<button <button
type="submit" type="submit"
disabled={isSubmitting} 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> </button>
</div> </div>
</form> </form>

26
src/components/configuration/ConfigurationEditor.tsx
View File

@@ -47,7 +47,7 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
<form onSubmit={handleSubmit} className="max-w-3xl space-y-6"> <form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<div> <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 <input
type="number" type="number"
disabled={isSubmitting} disabled={isSubmitting}
@@ -58,7 +58,7 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
</div> </div>
<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 <input
type="number" type="number"
disabled={isSubmitting} disabled={isSubmitting}
@@ -69,7 +69,7 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
</div> </div>
<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 <input
type="number" type="number"
disabled={isSubmitting} disabled={isSubmitting}
@@ -80,12 +80,12 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
</div> </div>
<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 <select
disabled={isSubmitting} disabled={isSubmitting}
value={formData.lanDiscovery} value={formData.lanDiscovery}
onChange={(e) => handleInputChange('lanDiscovery', e.target.value)} onChange={(e) => handleInputChange('lanDiscovery', e.target.value)}
className="form-input w-full" className="form-select w-full"
> >
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
@@ -93,12 +93,12 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
</div> </div>
<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 <select
disabled={isSubmitting} disabled={isSubmitting}
value={formData.registerToLobby} value={formData.registerToLobby}
onChange={(e) => handleInputChange('registerToLobby', e.target.value)} onChange={(e) => handleInputChange('registerToLobby', e.target.value)}
className="form-input w-full" className="form-select w-full"
> >
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
@@ -106,15 +106,15 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
</div> </div>
</div> </div>
<div className="border-t border-gray-700 pt-6"> <div className="border-t border-gh-border pt-6">
<label className="flex items-center"> <label className="flex items-center gap-2 text-sm text-gh-muted">
<input <input
type="checkbox" type="checkbox"
checked={restart} checked={restart}
onChange={(e) => setRestart(e.target.checked)} 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> </label>
</div> </div>
@@ -122,9 +122,9 @@ export function ConfigurationEditor({ serverId, config }: ConfigurationEditorPro
<button <button
type="submit" type="submit"
disabled={isSubmitting} 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> </button>
</div> </div>
</form> </form>

70
src/components/configuration/EventConfigEditor.tsx
View File

@@ -99,17 +99,17 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
return ( return (
<form onSubmit={handleSubmit} className="max-w-4xl space-y-8"> <form onSubmit={handleSubmit} className="max-w-4xl space-y-8">
<div className="space-y-6"> <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 Basic Event Settings
</h3> </h3>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<div> <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 <select
disabled={isSubmitting} disabled={isSubmitting}
value={formData.track} value={formData.track}
onChange={(e) => handleInputChange('track', e.target.value)} onChange={(e) => handleInputChange('track', e.target.value)}
className="form-input w-full" className="form-select w-full"
> >
<option value="barcelona">Barcelona</option> <option value="barcelona">Barcelona</option>
<option value="brands_hatch">Brands Hatch</option> <option value="brands_hatch">Brands Hatch</option>
@@ -140,7 +140,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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) Pre-Race Waiting Time (seconds)
</label> </label>
<input <input
@@ -154,7 +154,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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) Session Over Time (seconds)
</label> </label>
<input <input
@@ -168,7 +168,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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 Post Qualify Seconds
</label> </label>
<input <input
@@ -182,7 +182,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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 Post Race Seconds
</label> </label>
<input <input
@@ -198,12 +198,12 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<div className="space-y-6"> <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 Weather Settings
</h3> </h3>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<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">
Ambient Temperature (°C) Ambient Temperature (°C)
</label> </label>
<input <input
@@ -218,7 +218,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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) Cloud Level (0.0-1.0)
</label> </label>
<input <input
@@ -234,7 +234,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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 <input
type="number" type="number"
disabled={isSubmitting} disabled={isSubmitting}
@@ -248,7 +248,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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 Weather Randomness
</label> </label>
<input <input
@@ -263,14 +263,14 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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 Simracer Weather Conditions
</label> </label>
<select <select
disabled={isSubmitting} disabled={isSubmitting}
value={formData.simracerWeatherConditions} value={formData.simracerWeatherConditions}
onChange={(e) => handleInputChange('simracerWeatherConditions', e.target.value)} onChange={(e) => handleInputChange('simracerWeatherConditions', e.target.value)}
className="form-input w-full" className="form-select w-full"
> >
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
@@ -278,14 +278,14 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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 Fixed Condition Qualification
</label> </label>
<select <select
disabled={isSubmitting} disabled={isSubmitting}
value={formData.isFixedConditionQualification} value={formData.isFixedConditionQualification}
onChange={(e) => handleInputChange('isFixedConditionQualification', e.target.value)} onChange={(e) => handleInputChange('isFixedConditionQualification', e.target.value)}
className="form-input w-full" className="form-select w-full"
> >
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
@@ -295,28 +295,28 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between border-b border-gray-700 pb-2"> <div className="flex items-center justify-between border-b border-gh-border-muted pb-2">
<h3 className="text-lg font-medium text-white">Sessions</h3> <h3 className="text-sm font-semibold text-gh-primary">Sessions</h3>
<button <button
type="button" type="button"
onClick={addSession} onClick={addSession}
disabled={isSubmitting} 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> </button>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
{formData.sessions.map((session, index) => ( {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"> <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 <button
type="button" type="button"
onClick={() => removeSession(index)} onClick={() => removeSession(index)}
disabled={isSubmitting} 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 Remove
</button> </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 className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-5">
<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">
Session Type Session Type
</label> </label>
<select <select
disabled={isSubmitting} disabled={isSubmitting}
value={session.sessionType} value={session.sessionType}
onChange={(e) => handleSessionChange(index, 'sessionType', e.target.value)} 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) => ( {sessionTypes.map((type) => (
<option key={type.value} value={type.value}> <option key={type.value} value={type.value}>
@@ -342,7 +342,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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 Hour of Day
</label> </label>
<input <input
@@ -357,7 +357,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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 Day of Weekend
</label> </label>
<input <input
@@ -372,7 +372,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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 Time Multiplier
</label> </label>
<input <input
@@ -387,7 +387,7 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
<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) Duration (minutes)
</label> </label>
<input <input
@@ -407,15 +407,15 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
</div> </div>
</div> </div>
<div className="border-t border-gray-700 pt-6"> <div className="border-t border-gh-border pt-6">
<label className="flex items-center"> <label className="flex items-center gap-2 text-sm text-gh-muted">
<input <input
type="checkbox" type="checkbox"
checked={restart} checked={restart}
onChange={(e) => setRestart(e.target.checked)} 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> </label>
</div> </div>
@@ -423,9 +423,9 @@ export function EventConfigEditor({ serverId, config }: EventConfigEditorProps)
<button <button
type="submit" type="submit"
disabled={isSubmitting} 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> </button>
</div> </div>
</form> </form>

22
src/components/configuration/EventRulesEditor.tsx
View File

@@ -105,11 +105,11 @@ export function EventRulesEditor({ serverId, config }: EventRulesEditorProps) {
return ( return (
<form onSubmit={handleSubmit} className="max-w-4xl space-y-8"> <form onSubmit={handleSubmit} className="max-w-4xl space-y-8">
<div className="space-y-6"> <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"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{numberFields.map(({ key, label, min, max }) => ( {numberFields.map(({ key, label, min, max }) => (
<div key={key}> <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 <input
type="number" type="number"
disabled={isSubmitting} disabled={isSubmitting}
@@ -125,18 +125,18 @@ export function EventRulesEditor({ serverId, config }: EventRulesEditorProps) {
</div> </div>
<div className="space-y-6"> <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 Pitstop & Refuelling Rules
</h3> </h3>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{booleanFields.map(({ key, label }) => ( {booleanFields.map(({ key, label }) => (
<div key={key}> <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 <select
disabled={isSubmitting} disabled={isSubmitting}
value={formData[key] ? 'true' : 'false'} value={formData[key] ? 'true' : 'false'}
onChange={(e) => handleInputChange(key, e.target.value === 'true')} 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="false">No</option>
<option value="true">Yes</option> <option value="true">Yes</option>
@@ -146,15 +146,15 @@ export function EventRulesEditor({ serverId, config }: EventRulesEditorProps) {
</div> </div>
</div> </div>
<div className="border-t border-gray-700 pt-6"> <div className="border-t border-gh-border pt-6">
<label className="flex items-center"> <label className="flex items-center gap-2 text-sm text-gh-muted">
<input <input
type="checkbox" type="checkbox"
checked={restart} checked={restart}
onChange={(e) => setRestart(e.target.checked)} 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> </label>
</div> </div>
@@ -162,9 +162,9 @@ export function EventRulesEditor({ serverId, config }: EventRulesEditorProps) {
<button <button
type="submit" type="submit"
disabled={isSubmitting} 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> </button>
</div> </div>
</form> </form>

34
src/components/configuration/ServerSettingsEditor.tsx
View File

@@ -124,13 +124,13 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
return ( return (
<form onSubmit={handleSubmit} className="max-w-4xl space-y-8"> <form onSubmit={handleSubmit} className="max-w-4xl space-y-8">
<div className="space-y-6"> <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 Basic Settings
</h3> </h3>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{textFields.map(({ key, label, type }) => ( {textFields.map(({ key, label, type }) => (
<div key={key}> <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 <input
type={type} type={type}
disabled={isSubmitting} disabled={isSubmitting}
@@ -142,12 +142,12 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
))} ))}
<div> <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 <select
disabled={isSubmitting} disabled={isSubmitting}
value={formData.carGroup} value={formData.carGroup}
onChange={(e) => handleInputChange('carGroup', e.target.value)} onChange={(e) => handleInputChange('carGroup', e.target.value)}
className="form-input w-full" className="form-select w-full"
> >
{carGroups.map((group) => ( {carGroups.map((group) => (
<option key={group} value={group}> <option key={group} value={group}>
@@ -160,13 +160,13 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
</div> </div>
<div className="space-y-6"> <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 Requirements & Limits
</h3> </h3>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{numberFields.map(({ key, label, min, max }) => ( {numberFields.map(({ key, label, min, max }) => (
<div key={key}> <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 <input
type="number" type="number"
disabled={isSubmitting} disabled={isSubmitting}
@@ -182,18 +182,18 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
</div> </div>
<div className="space-y-6"> <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 Race Options
</h3> </h3>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{selectFields.map(({ key, label }) => ( {selectFields.map(({ key, label }) => (
<div key={key}> <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 <select
disabled={isSubmitting} disabled={isSubmitting}
value={formData[key] as number} value={formData[key] as number}
onChange={(e) => handleInputChange(key, parseInt(e.target.value))} 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={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
@@ -202,14 +202,14 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
))} ))}
<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">
Formation Lap Type Formation Lap Type
</label> </label>
<select <select
disabled={isSubmitting} disabled={isSubmitting}
value={formData.formationLapType} value={formData.formationLapType}
onChange={(e) => handleInputChange('formationLapType', parseInt(e.target.value))} 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={0}>Old Limiter Lap</option>
<option value={1}> <option value={1}>
@@ -221,15 +221,15 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
</div> </div>
</div> </div>
<div className="border-t border-gray-700 pt-6"> <div className="border-t border-gh-border pt-6">
<label className="flex items-center"> <label className="flex items-center gap-2 text-sm text-gh-muted">
<input <input
type="checkbox" type="checkbox"
checked={restart} checked={restart}
onChange={(e) => setRestart(e.target.checked)} 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> </label>
</div> </div>
@@ -237,9 +237,9 @@ export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorP
<button <button
type="submit" type="submit"
disabled={isSubmitting} 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> </button>
</div> </div>
</form> </form>