From dda3713c3adc2273feb42d45849c06c61118ff5d Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Wed, 18 May 2022 15:05:25 -0500
Subject: [PATCH] nice sort of opacity

---
 packages/desktop/src/index.ts                            | 4 ++--
 packages/desktop/src/styles/index.css                    | 2 ++
 .../src/tree/protected/terminal/panels/SidePanel.tsx     | 9 +++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/desktop/src/index.ts b/packages/desktop/src/index.ts
index f76b1fd..589c958 100644
--- a/packages/desktop/src/index.ts
+++ b/packages/desktop/src/index.ts
@@ -43,9 +43,9 @@ const createWindow = (): void => {
     },
     icon: './assets/1024x1024.icns',
 
-    // transparent: true,
+    transparent: true,
 
-    // backgroundColor: "#00000000",
+    backgroundColor: '#00000000',
 
     frame: false,
     roundedCorners: true,
diff --git a/packages/desktop/src/styles/index.css b/packages/desktop/src/styles/index.css
index ab899c0..b27017d 100644
--- a/packages/desktop/src/styles/index.css
+++ b/packages/desktop/src/styles/index.css
@@ -8,6 +8,8 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
+
+  background: #00000000;
 }
 
 #root {
diff --git a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
index 428478c..fc3c7e0 100644
--- a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
+++ b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
@@ -22,7 +22,7 @@ export default function SidePanel() {
 
   const { handleFlowState } = useSockets();
 
-  const { handleToggleDesktopMode, desktopMode } = useElectron();
+  const { handleToggleDesktopMode, desktopMode, isWindowFocused } = useElectron();
 
   // todo: sort
   const allChannels = useMemo(() => {
@@ -65,15 +65,16 @@ export default function SidePanel() {
 
   return (
     <div
-      className="flex flex-col w-[350px] group 
-    border-r border-r-gray-200 shadow-xl bg-white z-20 "
+      className={`flex flex-col w-[350px] group 
+    border-r border-r-gray-200 shadow-xl bg-white z-20
+    ${!isWindowFocused && ' opacity-20 '}`}
     >
       {/* user control panel */}
       <div
         className={`bg-gray-100 flex flex-row items-center gap-2
        p-4 pb-2 z-50 w-full titlebar ${
          desktopMode === 'overlayOnly' && 'border-b border-b-gray-200'
-       }`}
+       } `}
       >
         <button onClick={handleToggleDesktopMode} className={'mr-auto animate-pulse'}>
           <NoTextLogo type="small" />