From a42c1ebaf92dbfec1369680708e5f4c5084b15f9 Mon Sep 17 00:00:00 2001
From: Michael Matheus <michaelmatheus2001@gmail.com>
Date: Tue, 25 Jul 2023 06:24:06 -0300
Subject: [PATCH] feat(User Settings): change dark background modal to
 backdrop-filter blur

---
 src/components/UserSettings.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/UserSettings.tsx b/src/components/UserSettings.tsx
index 92b578a..c7f42c1 100644
--- a/src/components/UserSettings.tsx
+++ b/src/components/UserSettings.tsx
@@ -13,7 +13,7 @@ export function UserSettings({ displayModalConfig, handleModalDisplay }: UserSet
         <>
             {displayModalConfig ?
                 <>
-                    <div className="absolute dark:opacity-40 bg-gray-800 z-[50] h-screen w-full inset-0 opacity-60 visible transition-opacity" onClick={handleModalDisplay}></div>
+                    <div className="absolute backdrop-blur-sm z-[50] h-screen w-full inset-0 visible transition-all" onClick={handleModalDisplay}></div>
                     <div className="fixed dark:bg-gray-900 bg-gray-200 z-[100] bottom-4 h-fit w-11/12 p-6 opacity-100 visible transition-opacity rounded">
                         <h2 className="dark:text-gray-200 text-gray-800 font-semi-bold mb-4">Configurações</h2>
 
@@ -24,7 +24,7 @@ export function UserSettings({ displayModalConfig, handleModalDisplay }: UserSet
                 :
 
                 <>
-                    <div className="absolute dark:opacity-40 bg-gray-800 z-[50] h-screen w-full inset-0 opacity-0 invisible transition-opacity"></div>
+                    <div className="absolute backdrop-blur-sm z-[50] h-screen w-full inset-0 invisible transition-all"></div>
                     <div className="fixed z-[100] opacity-0 invisible transition-opacity">
                         <DarkModeButton />
                     </div>