diff --git a/src/components/Lnbc/Lnbc.module.scss b/src/components/Lnbc/Lnbc.module.scss index 0fd0588..af8e7c2 100644 --- a/src/components/Lnbc/Lnbc.module.scss +++ b/src/components/Lnbc/Lnbc.module.scss @@ -150,6 +150,170 @@ } } } + + &.noBack { + background-color: unset; + } +} + +.lnbcAlter { + width: 100%; + min-height: 158px; + background-color: none; + border-radius: var(--border-radius-small); + display: flex; + flex-direction: column; + gap: 6px; + padding: 12px 0; + position: relative; + + .paymentOverlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--background-site); + opacity: 0.6; + display: flex; + justify-content: center; + align-items: center; + } + + .header { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + height: 20px; + + .title { + display: flex; + justify-content: flex-start; + align-items: center; + + color: white; + + font-size: 15px; + font-weight: 700; + line-height: 16px; + } + + .headerActions { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 2px; + + button { + .qrIcon { + width: 18px; + height: 18px; + display: inline-block; + margin: 0px; + background-color: white; + -webkit-mask: url(../../assets/icons/qr_code.svg) no-repeat 0px / 18px; + mask: url(../../assets/icons/qr_code.svg) no-repeat 0px / 18px; + } + .copyIcon { + width: 18px; + height: 18px; + display: inline-block; + margin: 0px; + background-color: white; + -webkit-mask: url(../../assets/icons/copy_border.svg) no-repeat 0px / 18px; + mask: url(../../assets/icons/copy_border.svg) no-repeat 0px / 18px; + } + + &:hover { + .qrIcon, .copyIcon { + background-color: white; + } + } + } + + .copyDone { + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + + .checkIcon { + width: 18px; + height: 18px; + display: inline-block; + margin: 0px; + background-color: var(--success-bright); + -webkit-mask: url(../../assets/icons/check.svg) no-repeat 0px / 18px; + mask: url(../../assets/icons/check.svg) no-repeat 0px / 18px; + } + } + } + } + + .body { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: 8px; + + .description { + color: white; + + font-size: 15px; + font-weight: 400; + line-height: 18px; + } + + .amount { + color: white; + + font-size: 24px; + font-weight: 600; + line-height: 24px; + } + } + + .footer { + height: 36px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: flex-end; + + .expiryDate { + color: white; + + font-size: 15px; + font-weight: 400; + line-height: 18px; + letter-spacing: 0.15px; + } + .expiredDate { + color: white; + + font-size: 15px; + font-weight: 400; + line-height: 18px; + letter-spacing: 0.15px; + } + + .payAction { + height: 36px; + min-width: 120px; + button { + width: 100%; + height: 100%; + color: var(--accent); + background-color: white; + } + } + } + + &.noBack { + background-color: unset; + } } .lnIcon { diff --git a/src/components/Lnbc/Lnbc.tsx b/src/components/Lnbc/Lnbc.tsx index c8e83bb..b60b96c 100644 --- a/src/components/Lnbc/Lnbc.tsx +++ b/src/components/Lnbc/Lnbc.tsx @@ -22,7 +22,7 @@ import { useIntl } from '@cookbook/solid-intl'; import { lnInvoice } from '../../translations'; -const Lnbc: Component< { id?: string, lnbc: string } > = (props) => { +const Lnbc: Component< { id?: string, lnbc: string, alternative?: boolean, noBack?: boolean } > = (props) => { const app = useAppContext(); const toast = useToastContext(); @@ -151,8 +151,17 @@ const Lnbc: Component< { id?: string, lnbc: string } > = (props) => { } }; + const klass = () => { + let k = props.alternative ? styles.lnbcAlter : styles.lnbc; + if (props.noBack) { + k += ` ${styles.noBack}` + } + + return k; + } + return ( -