Refine qr code feature

.vscode/settings.json

@@ -56,6 +56,7 @@
     "Provia",
     "pushstate",
     "qaub",
+    "Qrcode",
     "QRSTUVWXYZ",
     "ratelimit",
     "ratelimiter",

README.md

@@ -178,7 +178,7 @@ Create Upstash Redis store from storage tab of Vercel dashboard and link to your
 - `NEXT_PUBLIC_GEO_PRIVACY = 1` disables collection/display of location-based data (⚠️ re-compresses uploaded images in order to remove GPS information)
 - `NEXT_PUBLIC_ALLOW_PUBLIC_DOWNLOADS = 1` enables public photo downloads for all visitors (⚠️ may result in increased bandwidth usage)
 - `NEXT_PUBLIC_SOCIAL_NETWORKS`
-  - Comma-separated list of social networks and sharing options to show in share modal
+  - Comma-separated list of share modal options
   - Accepted values:
     - `x` (default)
     - `threads`

src/admin/config/AdminAppConfigurationClient.tsx

@@ -912,14 +912,14 @@ export default function AdminAppConfigurationClient({
             {renderEnvVars(['NEXT_PUBLIC_ALLOW_PUBLIC_DOWNLOADS'])}
           </ChecklistRow>
           <ChecklistRow
-            title="Social networks and sharing"
+            title="Share modal options"
             status={hasSocialKeys}
             optional
           >
             {renderOrderedKeyList(socialKeys, SOCIAL_KEYS)}
             <div>
-              Configure order and visibility of social networks and sharing 
+              Configure order and visibility of share modal 
-              options (seen in share modal) by storing comma-separated values
+              options by storing comma-separated values
               (accepts {'"all"'} or {'"none"'},
               defaults to {renderCommaSeparatedList(DEFAULT_SOCIAL_KEYS)})
             </div>

src/share/ShareModal.tsx

@@ -10,7 +10,7 @@ import { toastSuccess } from '@/toast';
 import { SOCIAL_NETWORKS } from '@/app/config';
 import { useAppState } from '@/app/AppState';
 import useOnPathChange from '@/utility/useOnPathChange';
-import { IoArrowUp } from 'react-icons/io5';
+import { IoArrowUp, IoCloseSharp } from 'react-icons/io5';
 import MaskedScroll from '@/components/MaskedScroll';
 import { useAppText } from '@/i18n/state/client';
 import SocialButton from '@/social/SocialButton';
@@ -97,7 +97,7 @@ export default function ShareModal({
         ) : (
           <div className="flex flex-col items-center gap-4 p-4">
             <div className={clsx(
-              'p-3 bg-white rounded-2xl shadow-lg border',
+              'p-3 bg-white rounded-2xl shadow-lg outline-medium',
               'flex items-center justify-center',
             )}>
               <Image
@@ -141,7 +141,7 @@ export default function ShareModal({
           {SOCIAL_NETWORKS.map(key =>
             key === 'qrcode' ? (
               renderButton(
-                <TbQrcode size={18} />,
+                showQR ? <IoCloseSharp size={18} /> : <TbQrcode size={18} />,
                 () => setShowQR(q => !q),
                 false,
                 appText.tooltip.shareQRCode,