AI pass on redesign

src/app/components/RoomItem.svelte

@@ -1,14 +1,7 @@
 <script lang="ts">
   import cx from "classnames"
   import {readable} from "svelte/store"
-  import {
-    hash,
-    gte,
-    now,
-    displayList,
-    formatTimestampAsTime,
-    formatTimestampAsDate,
-  } from "@welshman/lib"
+  import {gte, now, displayList, formatTimestampAsTime, formatTimestampAsDate} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {MESSAGE, COMMENT, getTag} from "@welshman/util"
   import {
@@ -35,7 +28,7 @@
   import RoomItemMenuButton from "@app/components/RoomItemMenuButton.svelte"
   import RoomItemMenuMobile from "@app/components/RoomItemMenuMobile.svelte"
   import RoomItemContent from "@app/components/RoomItemContent.svelte"
-  import {colors} from "@app/theme"
+  import {getColor} from "@app/theme"
   import {ENABLE_ZAPS} from "@app/env"
   import {deriveEventsForUrl, deriveEvent} from "@app/repository"
   import {publishDelete} from "@app/deletes"
@@ -60,7 +53,7 @@
   const today = formatTimestampAsDate(now())
   const profileDisplay = deriveProfileDisplay(event.pubkey, [url])
   const thunk = mergeThunks($thunks.filter(t => t.event.id === event.id))
-  const [_, colorValue] = colors[hash(event.pubkey) % colors.length]
+  const colorValue = getColor(event.pubkey)
 
   const qTag = getTag("q", event.tags)
   const isQuoteOnly = Boolean(
@@ -95,10 +88,7 @@
   <div class="flex w-full gap-3 overflow-auto">
     {#if showPubkey}
       <Button onclick={openProfile} class="flex items-start pt-1.5 justify-center w-8 shrink-0">
-        <ProfileCircle
-          pubkey={event.pubkey}
-          class="border border-solid border-base-content"
-          size={8} />
+        <ProfileCircle pubkey={event.pubkey} style="box-shadow: 0 0 0 2px {colorValue}" size={8} />
       </Button>
     {:else}
       <div class="w-8 shrink-0"></div>
@@ -155,8 +145,9 @@
   </div>
   {#if !isMobile}
     <button
-      class="join absolute right-2 top-0.5 border border-solid border-neutral text-xs opacity-0 transition-all pr-2"
-      class:group-hover:opacity-100={!isMobile}>
+      class="join bg-base-100 shadow-soft absolute right-2 top-0.5 translate-y-1 rounded-full p-0.5 text-xs opacity-0 transition-all"
+      class:group-hover:opacity-100={!isMobile}
+      class:group-hover:translate-y-0={!isMobile}>
       {#if ENABLE_ZAPS}
         <RoomItemZapButton {url} {event} />
       {/if}