AI pass on redesign

src/app/components/RecentConversation.svelte

@@ -10,6 +10,7 @@
   import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
+  import {getColor} from "@app/theme"
   import {makeRoomPath, makeSpaceChatPath} from "@app/routes"
 
   type Props = {
@@ -25,7 +26,9 @@
   const onClick = () => goto(h ? makeRoomPath(url, h) : makeSpaceChatPath(url))
 </script>
 
-<Button class="cv card2 bg-alt shadow-md" onclick={onClick}>
+<Button
+  class="cv card2 bg-alt shadow-soft block w-full transition-all motion-safe:hover:-translate-y-0.5"
+  onclick={onClick}>
   <div class="flex flex-col gap-3">
     <div class="flex items-center gap-2 text-sm">
       {#if h}
@@ -39,7 +42,10 @@
       </span>
     </div>
     <div class="flex items-start gap-3">
-      <ProfileCircle pubkey={event.pubkey} size={10} />
+      <ProfileCircle
+        pubkey={event.pubkey}
+        size={10}
+        style="box-shadow: 0 0 0 2px {getColor(event.pubkey)}" />
       <div class="min-w-0 flex-1">
         <NoteContentMinimal {event} />
       </div>