fix settings ui
This commit is contained in:
@@ -273,19 +273,21 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="fixed inset-0 z-40 flex items-center justify-center bg-black/60">
|
<div className="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/60 p-2 sm:items-center sm:p-4">
|
||||||
<div className="bg-slate-900 border border-slate-700 rounded-xl w-full max-w-3xl mx-4 shadow-2xl">
|
<div className="flex max-h-[calc(100dvh-1rem)] w-full max-w-3xl flex-col overflow-y-auto rounded-xl border border-slate-700 bg-slate-900 shadow-2xl sm:max-h-[calc(100dvh-2rem)]">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-800">
|
<div className="flex flex-none items-center justify-between border-b border-slate-800 px-4 py-3 sm:px-5 sm:py-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<h2 className="text-slate-100 font-semibold">Settings</h2>
|
<h2 className="text-slate-100 font-semibold">Settings</h2>
|
||||||
<span className="text-slate-500 text-xs">Admin</span>
|
<span className="text-slate-500 text-xs">Admin</span>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={onClose} className="text-slate-400 hover:text-slate-200">✕</button>
|
<button onClick={onClose} className="rounded p-1 text-slate-400 hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="px-5 pt-4">
|
<div className="px-4 py-4 sm:px-5">
|
||||||
<div className="inline-flex rounded-lg border border-slate-700 overflow-hidden">
|
<div className="inline-flex max-w-full flex-wrap rounded-lg border border-slate-700 overflow-hidden">
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('general')}
|
onClick={() => setActiveTab('general')}
|
||||||
className={`px-3 py-1.5 text-sm ${activeTab === 'general' ? 'bg-slate-700 text-slate-100' : 'bg-slate-900 text-slate-300 hover:bg-slate-800'}`}
|
className={`px-3 py-1.5 text-sm ${activeTab === 'general' ? 'bg-slate-700 text-slate-100' : 'bg-slate-900 text-slate-300 hover:bg-slate-800'}`}
|
||||||
@@ -301,7 +303,7 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="px-5 py-4 space-y-6">
|
<div className="space-y-6 px-4 pb-4 sm:px-5">
|
||||||
{/* Error banner */}
|
{/* Error banner */}
|
||||||
{saveError && (
|
{saveError && (
|
||||||
<div className="bg-red-950/50 border border-red-700 rounded-lg px-4 py-3 text-red-300 text-sm">
|
<div className="bg-red-950/50 border border-red-700 rounded-lg px-4 py-3 text-red-300 text-sm">
|
||||||
@@ -385,7 +387,7 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
|
|||||||
<p className="text-slate-500 text-xs mb-3">
|
<p className="text-slate-500 text-xs mb-3">
|
||||||
Manually set avg minutes per test type. Leave blank to use calculated average from completed tests.
|
Manually set avg minutes per test type. Leave blank to use calculated average from completed tests.
|
||||||
</p>
|
</p>
|
||||||
<div className="grid grid-cols-3 gap-3">
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||||
{AVG_FIELDS.map(({ key, label }) => (
|
{AVG_FIELDS.map(({ key, label }) => (
|
||||||
<div key={key}>
|
<div key={key}>
|
||||||
<label className="text-slate-400 text-xs block mb-1">{label}</label>
|
<label className="text-slate-400 text-xs block mb-1">{label}</label>
|
||||||
@@ -555,17 +557,17 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<div className="flex justify-between gap-2 px-5 py-4 border-t border-slate-800">
|
<div className="flex flex-col gap-3 border-t border-slate-800 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
|
||||||
{activeTab === 'general' ? (
|
{activeTab === 'general' ? (
|
||||||
<>
|
<>
|
||||||
<button
|
<div className="ml-auto flex flex-col items-end gap-2 sm:flex-row sm:flex-wrap sm:justify-end">
|
||||||
onClick={handleRescanResults}
|
<button
|
||||||
disabled={isRescanning || isPending || isSavingTimes}
|
onClick={handleRescanResults}
|
||||||
className="px-4 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 disabled:opacity-50 transition-colors"
|
disabled={isRescanning || isPending || isSavingTimes}
|
||||||
>
|
className="px-4 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 disabled:opacity-50 transition-colors"
|
||||||
{isRescanning ? 'Rescanning…' : 'Save Results'}
|
>
|
||||||
</button>
|
{isRescanning ? 'Rescanning…' : 'Save Results'}
|
||||||
<div className="flex gap-2">
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={handleSaveTimes}
|
onClick={handleSaveTimes}
|
||||||
disabled={isSavingTimes || isPending || isRescanning}
|
disabled={isSavingTimes || isPending || isRescanning}
|
||||||
@@ -573,12 +575,6 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
|
|||||||
>
|
>
|
||||||
{isSavingTimes ? 'Saving…' : 'Save Times'}
|
{isSavingTimes ? 'Saving…' : 'Save Times'}
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="px-4 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 transition-colors"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
onClick={handleSave}
|
onClick={handleSave}
|
||||||
disabled={isPending || isRescanning || isSavingTimes}
|
disabled={isPending || isRescanning || isSavingTimes}
|
||||||
@@ -590,12 +586,6 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div className="ml-auto">
|
<div className="ml-auto">
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="px-4 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 transition-colors"
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user