From 1613b99389eea2eb6caf1f7cf246eeffc643ebcd Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Wed, 29 Nov 2023 21:28:57 +0530
Subject: [PATCH] (feat/refactor): added qr sharing feature notes and minor
 styling fixes

---
 htdocs/assets/_floatingbar.php |  5 +++--
 htdocs/assets/style.css        | 37 ++++++++++++++++++----------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index 9778023..fd5a876 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -101,14 +101,15 @@
     </div>
 </div>
 <div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto py-6 fixed inset-x-0 bottom-[20vh] z-40 justify-between bg-bg_secondary rounded-xl hidden">
-    <div class="shareviaqr w-fit h-full flex flex-col items-center py-3 px-7">
+    <div class="shareviaqr w-[40%] h-full flex flex-col py-3 px-7">
         <p class="self-start text-xl">Scan to Share</p>
         <div class="bg-bg_primary p-5 rounded-lg my-3">
             <div class="qrwrapper w-[150px] h-[150px]">
                 <img id="pageqrcode" src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&color=38BDF8&bgcolor=0F172A" alt="qrcode">
             </div>
         </div>
-        <button class="w-[97%] px-4 py-2 rounded-lg border-[2px] border-accent_primary text-accent_primary my-2"><i class="fa-solid fa-download"></i>&nbsp; Download QR</button>
+        <button class="w-full px-4 py-2 rounded-full border-[2px] border-accent_primary text-accent_primary my-2 hover:shadow-lg hover:rounded-lg hover:shadow-accent_primary_transparent transition transform duration-500"><i class="fa-solid fa-download"></i>&nbsp; Download QR</button>
+        <p class="text-xs text-accent_three my-2">* For better experiance please turn on auto weblink opening feature on your scanner app</p>
     </div>
     <div class="extrashareopt w-full h-full flex flex-col py-3 px-7 border-l-[1px] border-[rgba(255,_255,_255,_0.15)]">
         <p class="text-lg"><i class="fa-solid fa-user-group text-accent_primary"></i>&nbsp; Sharing Options</p>
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index f80b615..563e483 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -579,6 +579,10 @@ video {
   right: 0px;
 }
 
+.right-3 {
+  right: 0.75rem;
+}
+
 .right-\[3\.3rem\] {
   right: 3.3rem;
 }
@@ -591,6 +595,10 @@ video {
   top: 0px;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
 .top-\[-2\.5rem\] {
   top: -2.5rem;
 }
@@ -611,18 +619,6 @@ video {
   top: 4.7rem;
 }
 
-.right-3 {
-  right: 0.75rem;
-}
-
-.top-3 {
-  top: 0.75rem;
-}
-
-.right-4 {
-  right: 1rem;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -1035,6 +1031,18 @@ video {
   width: 100vw;
 }
 
+.w-\[40\%\] {
+  width: 40%;
+}
+
+.w-\[\] {
+  width: ;
+}
+
+.max-w-\[97\%\] {
+  max-width: 97%;
+}
+
 .rotate-\[15deg\] {
   --tw-rotate: 15deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1253,11 +1261,6 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
-.bg-bg_third {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 51 74 / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }