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

components/accordian-item.js

@@ -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>

components/invoice.js

@@ -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} />

pages/satistics/index.js

@@ -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'>
+    <span className={classNames('d-inline-block', className)}>
-      <Icon /><small className={`text-${color} fw-bold ms-2`}>{desc}</small>
+      <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>
     )