feat: add styles

src/element/live-chat.css

@@ -12,7 +12,6 @@
   font-weight: 600;
   font-size: 24px;
   line-height: 30px;
-  padding: 0px 0px 4px;
 }
 
 .live-chat>.messages {
@@ -78,29 +77,41 @@
 
 .top-zappers h3 {
   margin: 0;
-  text-transform: uppercase;
-  font-size: 12px;
-  font-weight: 300;
-  color: #EEE;
+  font-size: 16px;
+  font-family: Outfit;
+  font-weight: 600;
 }
 
 .top-zappers-container {
   display: flex;
+  gap: 8px;
   justify-content: space-between;
+  padding-top: 12px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--border, #171717);
+  overflow-y: scroll;
 }
 
 .top-zapper {
   display: flex;
-  flex-direction: row;
+  padding: 4px 8px 4px 4px;
   align-items: center;
+  gap: 8px;
+  border-radius: 49px;
+  border: 1px solid var(--border, #171717);
 }
 
 .top-zapper .top-zapper-amount {
-  margin: 0 8px 0 4px;
+  font-size: 15px;
+  font-family: Outfit;
+  font-weight: 700;
+  line-height: 22px;
+  margin: 0;
 }
 
 .top-zapper .top-zapper-name {
   font-size: 14px;
+  margin: 0;
 }
 
 .zapper-gold-icon {

src/element/live-chat.tsx

@@ -41,7 +41,7 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
   const sortedZappers = useMemo(() => {
     const sorted = [...new Set([...zappers])];
     sorted.sort((a, b) => totalZapped(b, zaps) - totalZapped(a, zaps));
-    return sorted.slice(0, 3);
+    return sorted;
   }, [zappers]);
 
   return (
@@ -58,15 +58,13 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
               : "zapper-bronze-icon";
           return (
             <div className="top-zapper" key={pk}>
+              {pk === "anon" ? (
+                <p className="top-zapper-name">Anon</p>
+              ) : (
+                <Profile pubkey={pk} options={{ showName: false }} />
+              )}
               <Icon name="zap" className={iconClass} />
               <p className="top-zapper-amount">{formatSats(total)}</p>
-              <div className="top-zapper-name">
-                {pk === "anon" ? (
-                  <p>Anon</p>
-                ) : (
-                  <Profile pubkey={pk} options={{ showName: false }} />
-                )}
-              </div>
             </div>
           );
         })}

src/element/profile.tsx

@@ -33,9 +33,7 @@ export function Profile({
 
   return (
     <div className="profile">
-      {(options?.showAvatar ?? true) && (
-        <img alt={profile?.name || pubkey} src={profile?.picture ?? ""} />
-      )}
+      {(options?.showAvatar ?? true) && <img src={profile?.picture ?? ""} />}
       {(options?.showName ?? true) &&
         (options?.overrideName ?? getName(pubkey, profile))}
     </div>