feat: zap styles

src/element/live-chat.css

@@ -101,6 +101,10 @@
   float: left;
 }
 
+.live-chat .message .profile {
+  color: #34D2FE;
+}
+
 .live-chat .message.streamer .profile {
   color: #F838D9;
 }
@@ -121,14 +125,10 @@
   margin-left: 8px;
 }
 
-.live-chat .messages .pill {
+.live-chat .messages {
   color: white;
 }
 
-.live-chat .messages .pill:hover {
-  cursor: default;
-}
-
 .live-chat .zap {
   display: flex;
   align-items: center;
@@ -190,3 +190,34 @@
 .zap-icon {
   color: #FFCB44;
 }
+
+.zap-container {
+  position: relative;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  background: black;
+  background-clip: padding-box;
+  padding: 8px 12px;
+}
+
+.zap-container:before {
+  content: '';
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  z-index: -1;
+  margin: -1px;
+  background: linear-gradient(to bottom right, #FF902B, #F83838);
+  border-radius: inherit;
+}
+
+.zap-container .profile {
+  color: #FFCB44;
+}
+
+.zap-container .zap-amount {
+  color: #FFCB44;
+}
+
+.zap-content {
+  margin-top: 8px;
+}

src/element/live-chat.tsx

@@ -157,7 +157,7 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
     return null;
   }
   return (
-    <div className="pill">
+    <div className="zap-container">
       <div className="zap">
         <Icon name="zap" className="zap-icon" />
         <Profile
@@ -167,10 +167,11 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
             overrideName: parsed.anonZap ? "Anon" : undefined,
           }}
         />
-        {formatSats(parsed.amount)}
-        &nbsp; sats
+        zapped you
+        <span className="zap-amount">{formatSats(parsed.amount)}</span>
+        sats
       </div>
-      {parsed.content && <p>{parsed.content}</p>}
+      {parsed.content && <div className="zap-content">{parsed.content}</div>}
     </div>
   );
 }