From ba0b80a38e923dee443567c1cff17f743dfc22d3 Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Sun, 19 Nov 2023 21:37:43 +0530
Subject: [PATCH] (refactor): changed view now button hover effect on featured
 projects section in projects page

---
 htdocs/assets/js/floatingbar-config.js |  2 +-
 htdocs/assets/style.css                | 63 ++++++++++++++++++++++++++
 htdocs/projects.php                    |  2 +-
 3 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js
index a268c3e..7ba45d0 100644
--- a/htdocs/assets/js/floatingbar-config.js
+++ b/htdocs/assets/js/floatingbar-config.js
@@ -255,7 +255,7 @@ function inject_search_results (results, keyword) {
     
             profileDiv.innerHTML = `
             <span class="flex items-center">
-                <span class="wrapper mx-1 w-[35px] rounded-lg overflow-hidden">
+                <span class="wrapper mx-1 w-[35px] rounded-md overflow-hidden">
                     <img src="${result.photo}" alt="${result.name.toLowerCase().replace(/\s/g, '')}">
                 </span>
                 <span class="flex flex-col">
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index 77ceed2..f1c0b1d 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -1074,6 +1074,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border-\[1px\] {
   border-width: 1px;
 }
@@ -1121,6 +1125,21 @@ video {
   border-color: rgb(217 217 217 / var(--tw-border-opacity));
 }
 
+.border-accent_four {
+  --tw-border-opacity: 1;
+  border-color: rgb(172 203 222 / var(--tw-border-opacity));
+}
+
+.border-bg_secondary {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 41 59 / var(--tw-border-opacity));
+}
+
+.border-bg_primary {
+  --tw-border-opacity: 1;
+  border-color: rgb(15 23 42 / var(--tw-border-opacity));
+}
+
 .border-l-accent_primary {
   --tw-border-opacity: 1;
   border-left-color: rgb(56 189 248 / var(--tw-border-opacity));
@@ -1160,6 +1179,40 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
+.bg-accent_secondary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-accent_three {
+  --tw-bg-opacity: 1;
+  background-color: rgb(217 217 217 / var(--tw-bg-opacity));
+}
+
+.bg-accent_secondary_transparent {
+  background-color: rgba(255, 255, 255, 0.30);
+}
+
+.bg-\[rgba\(255\2c _255\2c _255\2c _0\.5\)\] {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.bg-\[rgba\(255\2c _255\2c _255\2c _0\.7\)\] {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.bg-\[rgba\(255\2c _255\2c _255\2c _0\.6\)\] {
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
+.bg-\[rgba\(255\2c _255\2c _255\2c _0\.3\)\] {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.bg-\[rgba\(255\2c _255\2c _255\2c _0\.25\)\] {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1540,11 +1593,21 @@ video {
   background-color: rgb(38 51 74 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-accent_primary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
+}
+
 .hover\:text-accent_secondary:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-bg_primary:hover {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+
 .hover\:shadow-\[0px_0px_30px\]:hover {
   --tw-shadow: 0px 0px 30px;
   --tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color);
diff --git a/htdocs/projects.php b/htdocs/projects.php
index 9c52b1d..4a682d2 100644
--- a/htdocs/projects.php
+++ b/htdocs/projects.php
@@ -144,7 +144,7 @@ $years = create_project_years_array($conn);
                                     <div class='overlay absolute w-full h-full bg-gradient-to-r from-bg_third z-20 flex-col p-3 hidden group-hover:flex'>
                                         <h6 class='text-xl mb-1'>".$featured_item['name']."</h6>
                                         <p class='text-xs font-[300] mb-4 text-accent_three'>".$featured_item['description']."</p>
-                                        <a class='text-sm font-[300] bg-gradient-to-r from-accent_secondary_transparent border-[1px] border-accent_secondary px-3 py-[0.15rem] w-fit rounded-full hover:rounded' href='".$featured_item['link']."' target='_blank'>View Now</a>
+                                        <a class='text-sm font-[300] bg-[rgba(255,_255,_255,_0.25)] border-[1px] border-accent_secondary text-accent_secondary px-3 py-[0.15rem] w-fit rounded-full hover:rounded hover:bg-accent_secondary hover:text-bg_primary hover:shadow-lg hover:shadow-accent_secondary_transparent transition transform duration-500' href='".$featured_item['link']."' target='_blank'>View Now</a>
                                     </div>
                                     <img class='opacity-[0.75]' src='".$featured_item['thumbnail']."' alt='".strtolower($featured_item['name'])."'>
                                 </div>