From 29309500a61b874cdbedba8a851f7626e19f518f Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 11 Apr 2023 16:12:26 -0700
Subject: [PATCH] Blur backdrop

---
 src-web/components/Overlay.tsx     | 4 ++--
 src-web/components/core/Dialog.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src-web/components/Overlay.tsx b/src-web/components/Overlay.tsx
index 4610bdd1..0751ad97 100644
--- a/src-web/components/Overlay.tsx
+++ b/src-web/components/Overlay.tsx
@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import FocusTrap from 'focus-trap-react';
-import type { ReactNode } from 'react';
 import { motion } from 'framer-motion';
+import type { ReactNode } from 'react';
 import { Portal } from './Portal';
 
 interface Props {
@@ -33,7 +33,7 @@ export function Overlay({ zIndex = 30, open, onClose, portalName, children }: Pr
             <div
               aria-hidden
               onClick={onClose}
-              className="absolute inset-0 bg-gray-600/60 dark:bg-black/50"
+              className="absolute inset-0 bg-gray-600/30 dark:bg-black/30 backdrop-blur-sm"
             />
             {/* Add region to still be able to drag the window */}
             <div data-tauri-drag-region className="absolute top-0 left-0 right-0 h-md" />
diff --git a/src-web/components/core/Dialog.tsx b/src-web/components/core/Dialog.tsx
index 6d89962d..4a960242 100644
--- a/src-web/components/core/Dialog.tsx
+++ b/src-web/components/core/Dialog.tsx
@@ -55,7 +55,7 @@ export function Dialog({
               className,
               'relative bg-gray-50 pointer-events-auto',
               'max-h-[80vh] p-5 rounded-lg overflow-auto',
-              'dark:border border-gray-200 shadow-md shadow-black/10',
+              'dark:border border-highlight shadow shadow-black/10',
               size === 'sm' && 'w-[25rem]',
               size === 'md' && 'w-[45rem]',
               size === 'full' && 'w-[80vw]',