From 2808773a80fb6f889b30b6596f6877d260dd0486 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 30 Dec 2022 17:27:52 -0600
Subject: [PATCH] Add backdrop-blur behind modals

---
 CHANGELOG.md                          | 1 +
 app/soapbox/components/modal-root.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 490404721..63fa009a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Compatibility: rudimentary support for Takahē.
+- UI: added backdrop blur behind modals.
 
 ### Changed
 - Posts: letterbox images to 19:6 again.
diff --git a/app/soapbox/components/modal-root.tsx b/app/soapbox/components/modal-root.tsx
index a43d2d638..37fc058b6 100644
--- a/app/soapbox/components/modal-root.tsx
+++ b/app/soapbox/components/modal-root.tsx
@@ -241,7 +241,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       <div
         role='presentation'
         id='modal-overlay'
-        className='fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90'
+        className='fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90 backdrop-blur'
         onClick={handleOnClose}
       />