display zap summary in note footer

src/Element/NoteFooter.tsx

@@ -238,6 +238,7 @@ export default function NoteFooter(props: NoteFooterProps) {
   }
 
   return (
+    <>
     <div className="footer">
       <div className="footer-reactions">
         {tipButton()}
@@ -266,5 +267,9 @@ export default function NoteFooter(props: NoteFooterProps) {
       />
       <LNURLTip svc={author?.lud16 || author?.lud06} onClose={() => setTip(false)} show={tip} author={author?.pubkey} note={ev.Id} />
     </div>
+    <div className="zaps-container">
+     <ZapsSummary zaps={zaps} />
+    </div>
+    </>
   )
 }

src/element/Zap.css

@@ -19,11 +19,11 @@
   color: var(--highlight);
 }
 
-.amount {
+.zap .amount {
   font-size: 18px;
 }
 
-.amount:before {
+.zap .amount:before {
   content: '⚡️ ';
 }
 
@@ -40,7 +40,7 @@
 }
 
 .top-zap {
-  font-size: 12px;
+  font-size: 14px;
   border: none;
   margin: 0;
 }
@@ -61,26 +61,14 @@
   height: 21px;
 }
 
-.top-zap .profile-name {
-  font-size: 12px;
-}
-
 .top-zap .nip05 {
   display: none;
 }
 
-.top-zap .amount {
-  font-size: 12px;
-}
-
 .amount-number {
   font-weight: bold;
 }
 
-.rest-zaps {
-  font-size: 12px;
-}
-
 .rest-zaps:before {
   content: ", ";
 }