Screen saver tweaks

components/system/Dialogs/ScreenSaver/StyledScreenSaver.ts

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { MAX_ZINDEX } from "utils/constants";
 
 const StyledScreenSaver = styled.iframe`
-  background-color: #000;
+  background-color: transparent;
   border: none;
   height: 100%;
   inset: 0;

components/system/Dialogs/ScreenSaver/index.tsx

@@ -4,6 +4,7 @@ import { type ComponentProcessProps } from "components/system/Apps/RenderCompone
 import { useFileSystem } from "contexts/fileSystem";
 import { useProcesses } from "contexts/process";
 import { MILLISECONDS_IN_SECOND } from "utils/constants";
+import { haltEvent } from "utils/functions";
 
 const ONE_TIME_PASSIVE_CAPTURE_EVENT = {
   capture: true,
@@ -43,13 +44,18 @@ const ScreenSaver: FC<ComponentProcessProps> = ({ id }) => {
       }),
     [readFile, url]
   );
-  const closeScreenSaver = useCallback(() => {
-    if (iframeRef.current) {
-      iframeRef.current.style.display = "none";
-    }
+  const closeScreenSaver = useCallback(
+    (event?: Event) => {
+      if (event) haltEvent(event);
 
-    close(id);
-  }, [close, id]);
+      if (iframeRef.current) {
+        iframeRef.current.style.display = "none";
+      }
+
+      close(id);
+    },
+    [close, id]
+  );
 
   useEffect(() => {
     if (url && !srcDoc[url]) loadScreenSaver();

utils/functions.ts

@@ -880,7 +880,7 @@ export const haltEvent = (
     | React.MouseEvent
 ): void => {
   try {
-    if (event.cancelable) {
+    if (event?.cancelable) {
       event.preventDefault();
       event.stopPropagation();
     }