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

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

View File

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

View File

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

View File

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

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>