From 7bd646181430babb9520809ce56b2339cda54f90 Mon Sep 17 00:00:00 2001
From: 7heMech <83923848+7heMech@users.noreply.github.com>
Date: Sun, 2 Mar 2025 16:39:26 +0000
Subject: [PATCH] fix styling of qr

---
 components/dashboard/links/QRCode.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/links/QRCode.vue b/components/dashboard/links/QRCode.vue
index 3ef8ba8c..1e1dfdbe 100644
--- a/components/dashboard/links/QRCode.vue
+++ b/components/dashboard/links/QRCode.vue
@@ -2,7 +2,7 @@
 import { Button } from '#components'
 import { Download } from 'lucide-vue-next'
 import QRCodeStyling from 'qr-code-styling'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps({
   data: {
@@ -102,12 +102,14 @@ onMounted(() => {
     <div
       ref="qrCodeEl"
       :data-text="data"
+      class="bg-white p-1 rounded-lg"
     />
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-4">
       <div class="relative flex items-center">
         <div
-          class="w-8 h-8 rounded-full border cursor-pointer overflow-hidden"
+          class="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-600 cursor-pointer overflow-hidden"
           :style="{ backgroundColor: color }"
+          title="Change QR code color"
         >
           <input
             v-model="color"