Mia.Wu/test_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix settings ui

Browse Source
This commit is contained in:
Mia Wu
2026-06-09 11:09:03 -04:00
parent 0796982fd7
commit 834ab81a94
4 changed files with 19 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/ConfigModal.jsx
+19 -29
View File
@@ -273,19 +273,21 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
return (
<>
<div className="fixed inset-0 z-40 flex items-center justify-center bg-black/60">
<div className="bg-slate-900 border border-slate-700 rounded-xl w-full max-w-3xl mx-4 shadow-2xl">
<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="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 */}
<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">
<h2 className="text-slate-100 font-semibold">Settings</h2>
<span className="text-slate-500 text-xs">Admin</span>
</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 className="px-5 pt-4">
<div className="inline-flex rounded-lg border border-slate-700 overflow-hidden">
<div className="px-4 py-4 sm:px-5">
<div className="inline-flex max-w-full flex-wrap rounded-lg border border-slate-700 overflow-hidden">
<button
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'}`}
@@ -301,7 +303,7 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
</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 */}
{saveError && (
<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">
Manually set avg minutes per test type. Leave blank to use calculated average from completed tests.
</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 }) => (
<div key={key}>
<label className="text-slate-400 text-xs block mb-1">{label}</label>
@@ -555,17 +557,17 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
</div>
{/* 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' ? (
<>
<button
onClick={handleRescanResults}
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>
<div className="flex gap-2">
<div className="ml-auto flex flex-col items-end gap-2 sm:flex-row sm:flex-wrap sm:justify-end">
<button
onClick={handleRescanResults}
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>
<button
onClick={handleSaveTimes}
disabled={isSavingTimes || isPending || isRescanning}
@@ -573,12 +575,6 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
>
{isSavingTimes ? 'Saving…' : 'Save Times'}
</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
onClick={handleSave}
disabled={isPending || isRescanning || isSavingTimes}
@@ -590,12 +586,6 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
</>
) : (
<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>