From 0bec29f2ba5d92087704d997b9d116f0b352cf2d Mon Sep 17 00:00:00 2001
From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com>
Date: Wed, 20 Mar 2024 14:13:37 +0330
Subject: UI Improvements (#2067)

---
 web/html/common/qrcode_modal.html | 49 +++++++++++++++++----------------------
 1 file changed, 21 insertions(+), 28 deletions(-)

(limited to 'web/html/common')

diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index 0e2b3a63..5cbe7858 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -1,32 +1,23 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
-        :dialog-style="{ top: '20px' }"
-        :closable="true"
-        :class="themeSwitcher.currentTheme"
-        :footer="null"
-        width="300px">
-    <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
-        {{ i18n "pages.inbounds.clickOnQRcode" }}
-    </a-tag>
-    <template v-if="app.subSettings.enable && qrModal.subId">
-        <a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
-        <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))"
-            id="qrCode-sub"
-            class="qr-bg">
-        </canvas>
-        <a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
-        <canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))"
-            id="qrCode-subJson"
-            style="width: 100%; height: 100%; display: flex; border-radius: 1rem;">
-        </canvas>
-    </template>
-    <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
-    <template v-for="(row, index) in qrModal.qrcodes">
-        <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
-        <canvas @click="copyToClipboard('qrCode-'+index, row.link)"
-            :id="'qrCode-'+index"
-            class="qr-bg"></canvas>
-    </template>
+    :dialog-style="{ top: '20px' }"
+    :closable="true"
+    :class="themeSwitcher.currentTheme"
+    :footer="null" width="300px">
+  <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
+    {{ i18n "pages.inbounds.clickOnQRcode" }}
+  </a-tag>
+  <template v-if="app.subSettings.enable && qrModal.subId">
+    <a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
+    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas></div>
+    <a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
+    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas></div>
+  </template>
+  <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
+  <template v-for="(row, index) in qrModal.qrcodes">
+    <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
+    <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas></div>
+  </template>
 </a-modal>
 
 <script>
@@ -87,8 +78,10 @@
             setQrCode(elmentId, content) {
                 new QRious({
                     element: document.querySelector('#' + elmentId),
-                    size: 260,
+                    size: 300,
                     value: content,
+                    background: 'transparent',
+                    foreground: 'black'
                 });
             },
             genSubLink(subID) {
-- 
cgit v1.2.3