From ed65c895167ff3c92f73a54c32e93e3b5dab7577 Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Sun, 11 Sep 2022 13:46:01 +0300
Subject: [PATCH] blur backdrops for better background image support

---
 src/components/bookmarks/item.jsx              | 2 +-
 src/components/services/item.jsx               | 2 +-
 src/components/widgets/resources/usage-bar.jsx | 2 +-
 src/components/widgets/search/search.jsx       | 3 ++-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/bookmarks/item.jsx b/src/components/bookmarks/item.jsx
index 5f4e53897..2ff958543 100644
--- a/src/components/bookmarks/item.jsx
+++ b/src/components/bookmarks/item.jsx
@@ -6,7 +6,7 @@ export default function Item({ bookmark }) {
       <button
         type="button"
         onClick={() => window.open(bookmark.href, "_blank").focus()}
-        className="w-full text-left mb-3 cursor-pointer rounded-md font-medium text-theme-700 hover:text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/10 dark:bg-white/10 dark:hover:bg-white/20"
+        className="w-full text-left mb-3 cursor-pointer rounded-md font-medium text-theme-700 hover:text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/10 dark:bg-white/10 dark:hover:bg-white/20 backdrop-blur-md"
       >
         <div className="flex">
           <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index c8b3c6280..df0caf677 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -28,7 +28,7 @@ export default function Item({ service }) {
         <div
           className={`${
             service.href && service.href !== "#" ? "cursor-pointer " : "cursor-default "
-          }transition-all h-15 overflow-hidden mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/20 dark:bg-white/10 dark:hover:bg-white/20`}
+          }transition-all h-15 mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/20 dark:bg-white/10 dark:hover:bg-white/20 backdrop-blur-md`}
         >
           <div className="flex">
             {service.icon && (
diff --git a/src/components/widgets/resources/usage-bar.jsx b/src/components/widgets/resources/usage-bar.jsx
index 2e9671a7e..aa1ed6ead 100644
--- a/src/components/widgets/resources/usage-bar.jsx
+++ b/src/components/widgets/resources/usage-bar.jsx
@@ -1,6 +1,6 @@
 export default function UsageBar({ percent }) {
   return (
-    <div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-white/20">
+    <div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-white/20 backdrop-blur-md">
       <div
         className="bg-theme-800/70 h-1 rounded-full dark:bg-white/50"
         style={{
diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index 1b3258ed1..febac9432 100644
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -62,7 +62,8 @@ export default function Search({ options }) {
           bg-white/50 dark:bg-white/10
           focus:ring-theme-500 dark:focus:ring-white/50
           focus:border-theme-500 dark:focus:border-white/50
-          border border-theme-300 dark:border-theme-200/50"
+          border border-theme-300 dark:border-theme-200/50
+          backdrop-blur-md"
         placeholder={t("search.placeholder")}
         onChange={(s) => setQuery(s.currentTarget.value)}
         required