Visually distinguish Done/Read feedback entries

Feature description

Currently in the admin interface (the "Read" tab of /feedback), all feedback entries look the same. It is hard to distinguish when quickly scanning the page which ones are done, and which ones are marked as read. I'm aware that incomplete entries are listed at the top, but it's hard to tell where it changes.

It would be nice if they are visually more distinct, for example by lowering their opacity if they're marked as read, making the buttons change colour to be more faded if they're already 'done/read', or visually separating the cards under different headings.

Use cases

At University of Edinburgh's deployment, we use "Done" for actions that have been requested and performed (feature requests, mod action, etc), and "Read" for general comments that don't require mod action. Generally though, this means we often need to scan the page to see whether there are new requests that we haven't seen before. Currently it is not easy to see if an entry is already addressed or if it's new, and requires the brain to parse "The buttons say 'Mark as Read/Done' -> must mean it is Not Read/Not Done", which is a lot of gymnastics required for each card.

Benefits

Would benefit ComSol admins viewing feedback entries. Implementing this feature request will hopefully reduce cognitive load wasted on parsing already-done already-read entries. In turn, that might lead to more feedback being quickly addressed.

Requirements

Frontend changes to the feedback-entry.tsx component or feedback-page.tsx.

Links / References / Examples

N/A