components/rating/rating-modal.tsx uses raw HTML and inline styles instead of the project's design system:
<div className="modal"> ... </div>
<button onClick={onClose}>Close</button>
<button onClick={handleSubmit} disabled={loading}>Submit</button>
<textarea style={{ width: '100%', marginBottom: 8 }} />
{error && <div style={{ color: 'red', marginBottom: 8 }}>{error}</div>}This is the only component in the repo that does this. Every other dialog uses shadcn Dialog or AlertDialog primitives with semantic tokens.
What to do
Rebuild the component using:
Dialog + DialogContent + DialogHeader + DialogTitle + DialogDescription + DialogFooter from components/ui/dialogButton from components/ui/button (use variant="ghost" for Cancel, default for Submit)Textarea from components/ui/textarea- Replace inline
style={{...}} with Tailwind classes
- Replace
color: 'red' with the text-destructive token
- Keep the props (
contributor, bounty, onSubmit, onClose) unchanged so the existing caller in components/bounty/bounty-sidebar.tsx keeps working
Acceptance criteria
- No
<div className="modal">, raw <button>, raw <textarea>, or style={{...}} in the file
- Modal matches the visual treatment of other AlertDialogs in the bounty surface
- Submit and Cancel buttons behave identically to before
- Success state and error state render correctly
pnpm tsc --noEmit and pnpm lint pass
Files
components/rating/rating-modal.tsx
components/rating/rating-modal.tsxuses raw HTML and inline styles instead of the project's design system:This is the only component in the repo that does this. Every other dialog uses shadcn
DialogorAlertDialogprimitives with semantic tokens.What to do
Rebuild the component using:
Dialog+DialogContent+DialogHeader+DialogTitle+DialogDescription+DialogFooterfromcomponents/ui/dialogButtonfromcomponents/ui/button(usevariant="ghost"for Cancel, default for Submit)Textareafromcomponents/ui/textareastyle={{...}}with Tailwind classescolor: 'red'with thetext-destructivetokencontributor,bounty,onSubmit,onClose) unchanged so the existing caller incomponents/bounty/bounty-sidebar.tsxkeeps workingAcceptance criteria
<div className="modal">, raw<button>, raw<textarea>, orstyle={{...}}in the filepnpm tsc --noEmitandpnpm lintpassFiles
components/rating/rating-modal.tsx