feat: add level prop to qrcode

src/common/component/QRCode.tsx

@@ -4,12 +4,14 @@ import { useAppSelector } from '../../app/store';
 
 type Props = {
     link: string,
-    size?: number
+    size?: number,
+    level?: "L" | "M" | "H" | "Q"
 }
 
-const QRCode = ({ link, size = 512 }: Props) => {
+const QRCode = ({ link, size = 512, level = "L" }: Props) => {
     const logo = useAppSelector(store => store.server.logo);
     return (
+        <div className="p-2 bg-white dark:bg-slate-200 rounded">
             <QR
                 renderAs='svg'
                 value={link}
@@ -17,8 +19,8 @@ const QRCode = ({ link, size = 512 }: Props) => {
                 size={size}
                 bgColor={"#fff"}
                 fgColor={"#000"}
-            level={"L"}
+                level={level}
-            includeMargin={true}
+                // includeMargin={true}
                 imageSettings={{
                     src: logo,
                     x: undefined,
@@ -27,6 +29,7 @@ const QRCode = ({ link, size = 512 }: Props) => {
                     width: size / 6,
                     excavate: true,
                 }} />
+        </div>
     );
 };
 

src/routes/chat/GuestBlankPlaceholder.tsx

@@ -27,7 +27,7 @@ const GuestBlankPlaceholder = () => {
       <div className="flex flex-col gap-2">
         <span className="text-gray-400 dark:text-gray-200 my-3 text-sm">{t("guest_login_tip")}</span>
         <div className="w-44 h-44 self-center mb-4">
-          <QRCode size={1200} link={`https://voce.chat/login?s=${encodeURIComponent(BASE_ORIGIN)}`} />
+          <QRCode level="Q" size={1200} link={`https://voce.chat/login?s=${encodeURIComponent(BASE_ORIGIN)}`} />
         </div>
         <Button onClick={handleSignIn} className="small">{t("sign_in")}</Button>
       </div>