Use lightning and nostrich icons in qr codes

src/assets/icons/qr_lightning.svg

@@ -0,0 +1,5 @@
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="34" cy="34" r="34" fill="white"/>
+<circle cx="34" cy="34" r="30" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.3873 30.576C44.6706 30.1806 44.3872 29.6314 43.8998 29.6314H36.8748L38.2774 20.4296C38.5218 19.1875 36.9153 18.4692 36.1475 19.4771L24.6231 36.3979C24.3235 36.7912 24.6049 37.3566 25.1002 37.3566H32.0821L30.6198 47.5905C30.3952 48.8445 32.0319 49.5315 32.7744 48.495L44.3873 30.576Z" fill="white"/>
+</svg>

src/components/LnQrCodeModal/LnQrCodeModal.tsx

@@ -61,7 +61,7 @@ const LnQrCodeModal: Component<{
 
         <div class={styles.body}>
           <div class={styles.qrCode}>
-            <QrCode data={props.lnbc || ''} />
+            <QrCode data={props.lnbc || ''} type="lightning"/>
           </div>
 
           <div class={styles.description}>{description()}</div>

src/components/ProfileQrCodeModal/ProfileQrCodeModal.tsx

@@ -39,10 +39,12 @@ const ProfileQrCodeModal: Component<{
     pubkey: {
       title: 'Public key',
       data: `nostr:${props.profile.npub || hexToNpub(props.profile.pubkey)}`,
+      type: 'nostr',
     },
     lnAddress: {
       title: 'Lightning address',
       data: `lightning:${props.profile.lud16 || props.profile.lud06}`,
+      type: 'lightning',
     }
   });
 
@@ -98,7 +100,7 @@ const ProfileQrCodeModal: Component<{
               {([key, info]) =>
                 <Show when={info.data}>
                   <Tabs.Content class={styles.tabContent} value={key}>
-                    <QrCode data={info.data} />
+                    <QrCode data={info.data} type={info.type} />
                   </Tabs.Content>
                 </Show>
               }

src/components/QrCode/QrCode.tsx

@@ -1,19 +1,29 @@
 import QRCodeStyling from 'qr-code-styling';
-import { Component, createEffect, onMount } from 'solid-js';
+import { Component, createEffect } from 'solid-js';
 
-import primalLogoFire from '../../assets/icons/logo_fire.svg'
+import qrNostrich from '../../assets/icons/qr_nostrich.svg'
-import primalLogoIce from '../../assets/icons/logo_ice.svg'
+import qrLightning from '../../assets/icons/qr_lightning.svg'
-import { useSettingsContext } from '../../contexts/SettingsContext';
 
 import styles from './QrCode.module.scss';
 
 
-const QrCode: Component<{ data: string }> = (props) => {
+const QrCode: Component<{ data: string, type?: string }> = (props) => {
   let qrSlot: HTMLDivElement | undefined;
 
-  const settings = useSettingsContext();
+  const qrTypes = ['nostr', 'lightning'];
 
-  const isIce = () => ['midnight', 'ice'].includes(settings?.theme || '');
+  const qrType = () => {
+    const t = props.type && qrTypes.includes(props.type) ?
+      props.type :
+      'nostr';
+
+    const qrImages: Record<string, string> = {
+      nostr: qrNostrich,
+      lightning: qrLightning,
+    }
+
+    return qrImages[t];
+  };
 
   createEffect(() => {
     const qrCode = new QRCodeStyling({
@@ -21,17 +31,17 @@ const QrCode: Component<{ data: string }> = (props) => {
       height: 280,
       type: "svg",
       data: props.data,
-      margin: 6,
+      margin: 1,
-      image: isIce() ? primalLogoIce : primalLogoFire,
+      image: qrType(),
       qrOptions: {
         typeNumber: 0,
         mode: "Byte",
         errorCorrectionLevel :"Q",
       },
       imageOptions: {
-        hideBackgroundDots: true,
+        hideBackgroundDots: false,
         imageSize:0.2,
-        margin: 4,
+        margin: 0,
       },
       dotsOptions:{
         type: "rounded",