Lnurl UI update (#2220)

* Update index.js

added info tooltip for LNURL-auth button

* Update index.js

* Update index.js

* Update index.js

* Update index.js

* Update index.js

* Update index.js

* use existing lightning explainer

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: k00b <k00b@stacker.news>

Author: axelvyrn

components/lightning-auth.js

@@ -45,18 +45,18 @@ function QrAuth ({ k1, encodedUrl, callbackUrl, multiAuth }) {
   )
 }
 
-function LightningExplainer ({ text, children }) {
+function LightningExplainer ({ text, children, backButton, md = 12, lg = 6 }) {
   const router = useRouter()
   return (
     <Container>
       <div className={styles.login}>
-        <div className='w-100 mb-3 text-muted pointer' onClick={() => router.back()}><BackIcon /></div>
+        {backButton && <div className='w-100 mb-3 text-muted pointer' onClick={() => router.back()}><BackIcon /></div>}
         <h3 className='w-100 pb-2'>
           {text || 'Login'} with Lightning
         </h3>
         <div className='fw-bold text-muted pb-4'>This is the most private way to use Stacker News. Just open your Lightning wallet and scan the QR code.</div>
         <Row className='w-100 text-muted'>
-          <Col className='ps-0 mb-4' md>
+          <Col className='ps-0 mb-4' md={md} lg={lg}>
             <AccordianItem
               header={`Which wallets can I use to ${(text || 'Login').toLowerCase()}?`}
               body={
@@ -92,7 +92,7 @@ function LightningExplainer ({ text, children }) {
           }
             />
           </Col>
-          <Col md className='mx-auto' style={{ maxWidth: '300px' }}>
+          <Col md={md} lg={lg} className='mx-auto' style={{ maxWidth: '300px' }}>
             {children}
           </Col>
         </Row>
@@ -101,9 +101,9 @@ function LightningExplainer ({ text, children }) {
   )
 }
 
-export function LightningAuthWithExplainer ({ text, callbackUrl, multiAuth }) {
+export function LightningAuthWithExplainer ({ text, callbackUrl, multiAuth, backButton = true, md = 12, lg = 6 }) {
   return (
-    <LightningExplainer text={text}>
+    <LightningExplainer text={text} backButton={backButton} md={md} lg={lg}>
       <LightningAuth callbackUrl={callbackUrl} multiAuth={multiAuth} />
     </LightningExplainer>
   )

pages/settings/index.js

@@ -9,7 +9,7 @@ import { gql, useMutation, useQuery } from '@apollo/client'
 import { getGetServerSideProps } from '@/api/ssrApollo'
 import LoginButton from '@/components/login-button'
 import { signIn } from 'next-auth/react'
-import { LightningAuth } from '@/components/lightning-auth'
+import { LightningAuthWithExplainer } from '@/components/lightning-auth'
 import { SETTINGS, SET_SETTINGS } from '@/fragments/users'
 import { useRouter } from 'next/router'
 import Info from '@/components/info'
@@ -706,7 +706,7 @@ function QRLinkButton ({ provider, unlink, status }) {
     ? unlink
     : () => showModal(onClose =>
       <div className='d-flex flex-column align-items-center'>
-        <LightningAuth />
+        <LightningAuthWithExplainer backButton={false} md={12} lg={12} />
       </div>)
 
   return (