fancy stuff might be overkill

packages/desktop/src/tree/protected/FlowState.tsx

@@ -27,7 +27,7 @@ export default function FlowState({ handleReconnect }: { handleReconnect: () =>
   }, []);
 
   return (
-    <div className="flex flex-col flex-1 justify-center items-center relative">
+    <div className="flex flex-col flex-1 justify-center items-center relative bg-gray-100">
       {/* <img src="https://source.unsplash.com/random/?nature" /> */}
       <FullMottoLogo type={LogoType.small} className={'absolute bottom-5 mx-auto'} />
 

packages/desktop/src/tree/protected/terminal/line/LineRow.tsx

@@ -9,6 +9,7 @@ import moment from 'moment';
 import { useKeyPressEvent } from 'react-use';
 import toast from 'react-hot-toast';
 import { LineMemberState } from '@nirvana/core/models/line.model';
+import useElectron from '../../../../providers/ElectronProvider';
 
 export default React.memo(function LineRow({
   index,
@@ -22,6 +23,7 @@ export default React.memo(function LineRow({
   isSelected: boolean;
 }) {
   const { user } = useAuth();
+  const { desktopMode, isWindowFocused } = useElectron();
 
   const isUserTunedIn = useMemo(
     () => line.tunedInMemberIds?.includes(user._id.toString()),
@@ -131,9 +133,17 @@ export default React.memo(function LineRow({
       onClick={handleActivateLine}
       role={'presentation'}
       className={`flex flex-row items-center justify-start gap-2 px-4 py-4 hover:bg-gray-200 
-      cursor-pointer transition-all relative z-50 rounded  
+      cursor-pointer transition-all relative z-50  
       ${isUserToggleTuned && ' bg-gray-100 shadow-2xl '}
       ${isSelected && ' bg-gray-200 shadow-2xl'}
+
+      ${
+        !isWindowFocused &&
+        desktopMode === 'overlayOnly' &&
+        isSelected &&
+        ' bg-transparent opacity-100 '
+      }
+      ${!isWindowFocused && desktopMode === 'overlayOnly' && !isSelected && ' bg-transparent '}
       `}
     >
       {/* channel picture */}

packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx

@@ -24,7 +24,7 @@ export default function SidePanel() {
 
   const { handleToggleDesktopMode, desktopMode, isWindowFocused } = useElectron();
 
-  // todo: sort
+  // todo: sort based on content blocks and my last activity date
   const allChannels = useMemo(() => {
     let channels = Object.values(roomsMap);
 
@@ -66,15 +66,15 @@ 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
+    border-r border-r-gray-200 shadow-xl z-20  ${desktopMode === 'mainApp' && ' bg-white '}`}
-    ${!isWindowFocused && desktopMode === 'overlayOnly' && ' 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'
-       } `}
+       } ${!isWindowFocused && desktopMode === 'overlayOnly' && ' opacity-20 '}
+      `}
       >
         <button onClick={handleToggleDesktopMode} className={'mr-auto animate-pulse'}>
           <NoTextLogo type="small" />