fix(preferences_wrapper): issue with null shown status

src/components/Elements/MainModal/scss/index.scss

@@ -27,6 +27,7 @@
   z-index: -2;
   transition-timing-function: ease-in;
   border-radius: map-get($modal, 'border-radius');
+  -webkit-user-select: none;
   user-select: none;
   overflow-y: auto;
   transform: scale(0);
@@ -37,6 +38,7 @@
   }
 
   .modalInfoPage {
+    -webkit-user-select: text;
     user-select: text;
   }
 }

src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx

@@ -11,7 +11,8 @@ const PreferencesWrapper = ({ children, ...props }) => {
     if (!props.setting) {
       return true;
     }
-    return localStorage.getItem(props.setting) === 'true' || props.default || false;
+    const storedValue = localStorage.getItem(props.setting);
+    return storedValue !== null ? storedValue === 'true' : props.default || false;
   });
 
   useEffect(() => {
@@ -30,8 +31,8 @@ const PreferencesWrapper = ({ children, ...props }) => {
 
   return (
     <div
-      className={`preferences transition-opacity duration-700 ease-in-out ${
-        shown ? 'opacity-100 pointer-events-auto' : 'opacity-50 pointer-events-none'
+      className={`preferences transition-all duration-1000 delay-75 ease-cubic ${
+        shown ? 'opacity-100 pointer-events-auto' : 'opacity-40 pointer-events-none'
       } bg-modal-content-light dark:bg-modal-content-dark p-10 rounded`}
     >
       {props.zoomSetting && (