From 6010c2bab00d78875616084e4e85a4cffb851f79 Mon Sep 17 00:00:00 2001
From: Mehdi Dara <pyrexrj@gmail.com>
Date: Sun, 21 Jan 2024 21:28:10 +0330
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Backdrop=20blur=20for=20the=20navig?=
 =?UTF-8?q?ation=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LinksDropdown.tsx     | 2 +-
 src/components/buttons/IconPatch.tsx | 2 +-
 src/components/layout/BrandPill.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/LinksDropdown.tsx b/src/components/LinksDropdown.tsx
index 90be9a17..c0da66ee 100644
--- a/src/components/LinksDropdown.tsx
+++ b/src/components/LinksDropdown.tsx
@@ -109,7 +109,7 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
   return (
     <div className="relative is-dropdown">
       <div
-        className="cursor-pointer tabbable rounded-full flex gap-2 text-white items-center py-2 px-3 bg-pill-background bg-opacity-50 hover:bg-pill-backgroundHover transition-[background,transform] duration-100 hover:scale-105"
+        className="cursor-pointer tabbable rounded-full flex gap-2 text-white items-center py-2 px-3 bg-pill-background bg-opacity-50 hover:bg-pill-backgroundHover backdrop-blur-lg transition-[background,transform] duration-100 hover:scale-105"
         tabIndex={0}
         onClick={toggleOpen}
         onKeyUp={(evt) => evt.key === "Enter" && toggleOpen()}
diff --git a/src/components/buttons/IconPatch.tsx b/src/components/buttons/IconPatch.tsx
index 302d14b2..b9a7e525 100644
--- a/src/components/buttons/IconPatch.tsx
+++ b/src/components/buttons/IconPatch.tsx
@@ -25,7 +25,7 @@ export function IconPatch(props: IconPatchProps) {
   return (
     <div className={props.className || undefined} onClick={props.onClick}>
       <div
-        className={`flex items-center justify-center rounded-full border-2 border-transparent bg-pill-background bg-opacity-50 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`}
+        className={`flex items-center justify-center rounded-full border-2 border-transparent backdrop-blur-lg bg-pill-background bg-opacity-50 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`}
       >
         <Icon icon={props.icon} />
       </div>
diff --git a/src/components/layout/BrandPill.tsx b/src/components/layout/BrandPill.tsx
index 814f90e6..109dbd2c 100644
--- a/src/components/layout/BrandPill.tsx
+++ b/src/components/layout/BrandPill.tsx
@@ -16,7 +16,7 @@ export function BrandPill(props: {
         "flex items-center space-x-2 rounded-full px-4 py-2 text-type-logo",
         props.backgroundClass ?? "bg-pill-background bg-opacity-50",
         props.clickable
-          ? "transition-[transform,background-color] hover:scale-105 hover:bg-pill-backgroundHover hover:text-type-logo active:scale-95"
+          ? "transition-[transform,background-color] hover:scale-105 hover:bg-pill-backgroundHover backdrop-blur-lg hover:text-type-logo active:scale-95"
           : "",
       )}
     >