diff options
Diffstat (limited to 'src/client/components/EditCardModal.tsx')
| -rw-r--r-- | src/client/components/EditCardModal.tsx | 169 |
1 files changed, 76 insertions, 93 deletions
diff --git a/src/client/components/EditCardModal.tsx b/src/client/components/EditCardModal.tsx index 2d04581..e38a2b1 100644 --- a/src/client/components/EditCardModal.tsx +++ b/src/client/components/EditCardModal.tsx @@ -99,18 +99,7 @@ export function EditCardModal({ role="dialog" aria-modal="true" aria-labelledby="edit-card-title" - style={{ - position: "fixed", - top: 0, - left: 0, - right: 0, - bottom: 0, - backgroundColor: "rgba(0, 0, 0, 0.5)", - display: "flex", - alignItems: "center", - justifyContent: "center", - zIndex: 1000, - }} + className="fixed inset-0 bg-ink/40 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in" onClick={(e) => { if (e.target === e.currentTarget) { handleClose(); @@ -122,88 +111,82 @@ export function EditCardModal({ } }} > - <div - style={{ - backgroundColor: "white", - padding: "1.5rem", - borderRadius: "8px", - width: "100%", - maxWidth: "500px", - margin: "1rem", - }} - > - <h2 id="edit-card-title" style={{ marginTop: 0 }}> - Edit Card - </h2> - - <form onSubmit={handleSubmit}> - {error && ( - <div role="alert" style={{ color: "red", marginBottom: "1rem" }}> - {error} - </div> - )} - - <div style={{ marginBottom: "1rem" }}> - <label - htmlFor="edit-card-front" - style={{ display: "block", marginBottom: "0.25rem" }} - > - Front - </label> - <textarea - id="edit-card-front" - value={front} - onChange={(e) => setFront(e.target.value)} - required - disabled={isSubmitting} - rows={3} - placeholder="Question or prompt" - style={{ - width: "100%", - boxSizing: "border-box", - resize: "vertical", - }} - /> - </div> - - <div style={{ marginBottom: "1rem" }}> - <label - htmlFor="edit-card-back" - style={{ display: "block", marginBottom: "0.25rem" }} - > - Back - </label> - <textarea - id="edit-card-back" - value={back} - onChange={(e) => setBack(e.target.value)} - required - disabled={isSubmitting} - rows={3} - placeholder="Answer or explanation" - style={{ - width: "100%", - boxSizing: "border-box", - resize: "vertical", - }} - /> - </div> - - <div - style={{ - display: "flex", - gap: "0.5rem", - justifyContent: "flex-end", - }} + <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg animate-scale-in"> + <div className="p-6"> + <h2 + id="edit-card-title" + className="font-display text-xl font-medium text-ink mb-6" > - <button type="button" onClick={handleClose} disabled={isSubmitting}> - Cancel - </button> - <button type="submit" disabled={isSubmitting || !isFormValid}> - {isSubmitting ? "Saving..." : "Save"} - </button> - </div> - </form> + Edit Card + </h2> + + <form onSubmit={handleSubmit} className="space-y-4"> + {error && ( + <div + role="alert" + className="bg-error/5 text-error text-sm px-4 py-3 rounded-lg border border-error/20" + > + {error} + </div> + )} + + <div> + <label + htmlFor="edit-card-front" + className="block text-sm font-medium text-slate mb-1.5" + > + Front + </label> + <textarea + id="edit-card-front" + value={front} + onChange={(e) => setFront(e.target.value)} + required + disabled={isSubmitting} + rows={3} + placeholder="Question or prompt" + className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed resize-none" + /> + </div> + + <div> + <label + htmlFor="edit-card-back" + className="block text-sm font-medium text-slate mb-1.5" + > + Back + </label> + <textarea + id="edit-card-back" + value={back} + onChange={(e) => setBack(e.target.value)} + required + disabled={isSubmitting} + rows={3} + placeholder="Answer or explanation" + className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed resize-none" + /> + </div> + + <div className="flex gap-3 justify-end pt-2"> + <button + type="button" + onClick={handleClose} + disabled={isSubmitting} + className="px-4 py-2 text-slate hover:bg-ivory rounded-lg transition-colors disabled:opacity-50" + > + Cancel + </button> + <button + type="submit" + disabled={isSubmitting || !isFormValid} + className="px-4 py-2 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" + > + {isSubmitting ? "Saving..." : "Save Changes"} + </button> + </div> + </form> + </div> </div> </div> ); |