succint zaps display

src/Element/Zap.css

@@ -17,8 +17,7 @@
 
 .zap .summary {
   display: flex;
-  align-items: center;
+  flex-direction: row;
-  justify-content: space-between;
 }
 
 .zap .amount {
@@ -33,12 +32,15 @@
   content: '';
 }
 
+.top-zap .summary {
+  color: var(--font-secondary-color);
+}
+
 .zaps-summary {
   margin-top: 8px;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  margin-left: 52px;
-  justify-content: center;
 }
 
 .top-zap {
@@ -51,13 +53,6 @@
   margin-right: .3em;
 }
 
-.top-zap .summary {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
 .top-zap .avatar {
   width: 21px;
   height: 21px;
@@ -67,6 +62,12 @@
   display: none;
 }
 
+.top-zap .summary {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .amount-number {
   font-weight: bold;
 }

src/Element/Zap.tsx

@@ -125,10 +125,11 @@ export const ZapsSummary = ({ zaps }: ZapsSummaryProps) => {
       {amount && (
         <div className={`top-zap`}>
           <div className="summary">
-            {zapper ? <ProfileImage pubkey={zapper} /> : <div>Anon&nbsp;</div>}
+            {zapper && <ProfileImage pubkey={zapper} />}
-            <div className="amount">
+            {restZaps.length > 0 && (
-              zapped <span className="amount-number">{formatShort(amount)}</span> sats
+              <span>and {restZaps.length} other{restZaps.length > 1 ? 's' : ''}</span>
-            </div>
+            )}
+            <span>&nbsp;zapped</span>
           </div>
           <div className="body">
             {content && (
@@ -142,12 +143,6 @@ export const ZapsSummary = ({ zaps }: ZapsSummaryProps) => {
           </div>
         </div>
       )}
-      {restZapsTotal > 0 && (
-        <div className="rest-zaps">
-          {restZaps.length} other{restZaps.length > 1 ? 's' : ''} zapped&nbsp;
-          <span className="amount-number">{formatShort(restZapsTotal)}</span> sats
-        </div>
-      )}
     </div>
   )
 }