ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Random CSS fixes (#1370) 

* Fix missing margin-left for invoice status in /satistics

* Fix margin-bottom not applied in invoice info

* Only apply margin-left if there is something left
This commit is contained in:
ekzyis 2024-09-07 17:01:00 +02:00 committed by GitHub
parent 6b27f54502
commit 54f8a61483
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/accordian-item.js
View File

@ -4,6 +4,7 @@ import { useAccordionButton } from 'react-bootstrap/AccordionButton'
import ArrowRight from '@/svgs/arrow-right-s-fill.svg'
import ArrowDown from '@/svgs/arrow-down-s-fill.svg'
import { useContext, useEffect, useState } from 'react'
import classNames from 'classnames'
const KEY_ID = '0'
@ -30,7 +31,7 @@ function ContextAwareToggle ({ children, headerColor = 'var(--theme-grey)', even
)
}
export default function AccordianItem ({ header, body, headerColor = 'var(--theme-grey)', show }) {
export default function AccordianItem ({ header, body, className, headerColor = 'var(--theme-grey)', show }) {
const [activeKey, setActiveKey] = useState()
useEffect(() => {
@ -44,7 +45,7 @@ export default function AccordianItem ({ header, body, headerColor = 'var(--them
return (
<Accordion defaultActiveKey={activeKey} activeKey={activeKey} onSelect={handleOnSelect}>
<ContextAwareToggle show={show} eventKey={KEY_ID} headerColor={headerColor}><div style={{ color: headerColor }}>{header}</div></ContextAwareToggle>
<Accordion.Collapse eventKey={KEY_ID} className='mt-2'>
<Accordion.Collapse eventKey={KEY_ID} className={classNames('mt-2', className)}>
<div>{body}</div>
</Accordion.Collapse>
</Accordion>

4
components/invoice.js
View File

@ -109,7 +109,8 @@ export default function Invoice ({ id, query = INVOICE, modal, onPayment, onCanc
<div className='w-100'>
<AccordianItem
header='sender information'
body={<PayerData data={lud18Data} className='text-muted ms-3 mb-3' />}
body={<PayerData data={lud18Data} className='text-muted ms-3' />}
className='mb-3'
/>
</div>}
{comment &&
@ -117,6 +118,7 @@ export default function Invoice ({ id, query = INVOICE, modal, onPayment, onCanc
<AccordianItem
header='sender comments'
body={<span className='text-muted ms-3'>{comment}</span>}
className='mb-3'
/>
</div>}
<Bolt11Info bolt11={bolt11} preimage={confirmedPreimage} />

10
pages/satistics/index.js
View File

@ -18,6 +18,7 @@ import PageLoading from '@/components/page-loading'
import PayerData from '@/components/payer-data'
import { Badge } from 'react-bootstrap'
import navStyles from '../settings/settings.module.css'
import classNames from 'classnames'
export const getServerSideProps = getGetServerSideProps({ query: WALLET_HISTORY, authRequired: true })
@ -36,7 +37,7 @@ function satusClass (status) {
}
}
function Satus ({ status }) {
function Satus ({ status, className }) {
if (!status) {
return null
}
@ -85,8 +86,8 @@ function Satus ({ status }) {
}
return (
<span className='d-inline-block'>
<Icon /><small className={`text-${color} fw-bold ms-2`}>{desc}</small>
<span className={classNames('d-inline-block', className)}>
<Icon /><small className={`text-${color} fw-bold ms-1`}>{desc}</small>
</span>
)
}
@ -141,7 +142,8 @@ function Detail ({ fact }) {
(fact.description && <span className='d-block'>{fact.description}</span>)}
<PayerData data={fact.invoicePayerData} className='text-muted' header />
{fact.invoiceComment && <small className='text-muted'><b>sender says:</b> {fact.invoiceComment}</small>}
<Satus status={fact.status} />{fact.autoWithdraw && <Badge className={styles.badge} bg={null}>{fact.type === 'p2p' ? 'p2p' : 'autowithdraw'}</Badge>}
<Satus className={fact.invoiceComment ? 'ms-1' : ''} status={fact.status} />
{fact.autoWithdraw && <Badge className={styles.badge} bg={null}>{fact.type === 'p2p' ? 'p2p' : 'autowithdraw'}</Badge>}
</Link>
</div>
)