From 60e3cfc9becb88771c22471350e9c8884a110328 Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Fri, 24 Nov 2023 23:57:53 +0530
Subject: [PATCH] (feat): implemented basic shareviaqr div styling

---
 htdocs/assets/_floatingbar.php | 15 ++++++++++-----
 htdocs/assets/style.css        | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index bd16a3f..3409c27 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -100,13 +100,18 @@
         </div>
     </div>
 </div>
-<div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto h-[45vh] md:h-[60vh] fixed inset-x-0 top-[20vh] z-40 justify-center items-center bg-bg_secondary rounded-xl hidden">
-    <div class="shareviaqr flex flex-col items-center">
-        <div class="qrwrapper">
-            <img src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&size=200x200&&color=38BDF8&format=svg" alt="shareqrcode">
+<div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto h-[45vh] md:h-[60vh] p-4 fixed inset-x-0 top-[20vh] z-40 justify-between items-center bg-bg_secondary rounded-xl hidden">
+    <div class="shareviaqr w-fit h-full flex flex-col items-center p-3">
+        <p class="self-start">Scan to Share</p>
+        <div class="bg-bg_primary p-5 rounded-lg my-3">
+            <div class="qrwrapper w-[150px] h-[150px]">
+                <img src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&color=38BDF8&bgcolor=0F172A" alt="shareqrcode">
+            </div>
         </div>
     </div>
-    <div class="extrashareopt"></div>
+    <div class="extrashareopt w-full h-full flex flex-col items-center p-3 border-l-[1px] border-accent_secondary_transparent">
+        <p class="self-start">Other Sharing Options</p>
+    </div>
 </div>
 <div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
     <div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_extratransparent transition transform duration-300">
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index eaa7453..deb9e4c 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -922,6 +922,10 @@ video {
   height: 100vh;
 }
 
+.h-\[150px\] {
+  height: 150px;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -995,6 +999,18 @@ video {
   width: 100vw;
 }
 
+.w-\[40\%\] {
+  width: 40%;
+}
+
+.w-\[60\%\] {
+  width: 60%;
+}
+
+.w-\[150px\] {
+  width: 150px;
+}
+
 .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));
@@ -1054,6 +1070,10 @@ video {
   justify-content: space-around;
 }
 
+.self-start {
+  align-self: flex-start;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1214,6 +1234,14 @@ video {
   padding: 0.30rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1294,6 +1322,10 @@ video {
   padding-right: 0.85rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }