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 5f4e5389..2ff95854 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 c8b3c628..df0caf67 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 2e9671a7..aa1ed6ea 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 1b3258ed..febac943 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