succint zaps display
This commit is contained in:
parent
529074e0c6
commit
b8e58dbdd4
@ -17,8 +17,7 @@
|
|||||||
|
|
||||||
.zap .summary {
|
.zap .summary {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.zap .amount {
|
.zap .amount {
|
||||||
@ -33,12 +32,15 @@
|
|||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-zap .summary {
|
||||||
|
color: var(--font-secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
.zaps-summary {
|
.zaps-summary {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
margin-left: 52px;
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-zap {
|
.top-zap {
|
||||||
@ -51,13 +53,6 @@
|
|||||||
margin-right: .3em;
|
margin-right: .3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-zap .summary {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-zap .avatar {
|
.top-zap .avatar {
|
||||||
width: 21px;
|
width: 21px;
|
||||||
height: 21px;
|
height: 21px;
|
||||||
@ -67,6 +62,12 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-zap .summary {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.amount-number {
|
.amount-number {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
@ -125,10 +125,11 @@ export const ZapsSummary = ({ zaps }: ZapsSummaryProps) => {
|
|||||||
{amount && (
|
{amount && (
|
||||||
<div className={`top-zap`}>
|
<div className={`top-zap`}>
|
||||||
<div className="summary">
|
<div className="summary">
|
||||||
{zapper ? <ProfileImage pubkey={zapper} /> : <div>Anon </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> zapped</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="body">
|
<div className="body">
|
||||||
{content && (
|
{content && (
|
||||||
@ -142,12 +143,6 @@ export const ZapsSummary = ({ zaps }: ZapsSummaryProps) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{restZapsTotal > 0 && (
|
|
||||||
<div className="rest-zaps">
|
|
||||||
{restZaps.length} other{restZaps.length > 1 ? 's' : ''} zapped
|
|
||||||
<span className="amount-number">{formatShort(restZapsTotal)}</span> sats
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user