From b91fbeb9780bbb9e094384a2dcc0c82b32ae81b2 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 20 Mar 2025 00:14:15 -0700
Subject: [PATCH] Dark: better beam

---
 src/modules/beam/gather/BeamFusionGrid.tsx    |  4 ++--
 src/modules/beam/scatter/BeamScatterInput.tsx | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/modules/beam/gather/BeamFusionGrid.tsx b/src/modules/beam/gather/BeamFusionGrid.tsx
index 98bbeb7a1..835dd581b 100644
--- a/src/modules/beam/gather/BeamFusionGrid.tsx
+++ b/src/modules/beam/gather/BeamFusionGrid.tsx
@@ -99,7 +99,7 @@ export function BeamFusionGrid(props: {
     <Box sx={{
       ...(props.isMobile ? fusionGridMobileSx : fusionGridDesktopSx),
       ...(isEmpty ? {
-        backgroundColor: 'neutral.solidBg',
+        backgroundColor: isDarkMode ? 'neutral.900' : 'neutral.solidBg',
       } : {
         backgroundColor: isDarkMode ? 'success.900' : '#F2FFFA', // f8fff8 was good, too close to the gree hue
         pt: 'var(--Pad)',
@@ -121,7 +121,7 @@ export function BeamFusionGrid(props: {
         <BeamCard
           className={isEmpty ? beamCardClasses.smashTop : undefined}
           sx={{
-            backgroundColor: props.canGather ? `${GATHER_COLOR}.softBg` : undefined,
+            backgroundColor: props.canGather ? `${GATHER_COLOR}.softBg` : isDarkMode ? 'neutral.700' : undefined,
             // boxShadow: `0px 6px 16px -12px rgb(var(--joy-palette-${props.canGather ? GATHER_COLOR : 'neutral'}-darkChannel) / 40%)`,
             mb: 'auto',
           }}
diff --git a/src/modules/beam/scatter/BeamScatterInput.tsx b/src/modules/beam/scatter/BeamScatterInput.tsx
index 97abd89d2..bf4532357 100644
--- a/src/modules/beam/scatter/BeamScatterInput.tsx
+++ b/src/modules/beam/scatter/BeamScatterInput.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
-import { Box, Typography } from '@mui/joy';
+import { Box, Typography, useTheme } from '@mui/joy';
 
 import { ChatMessageMemo } from '../../../apps/chat/components/message/ChatMessage';
 
@@ -30,6 +30,12 @@ const userMessageWrapperINVSx: SxProps = {
   pt: 0,
 };
 
+const userMessageWrapperDarkINVSx: SxProps = {
+  ...userMessageWrapperSx,
+  backgroundColor: 'neutral.800',
+  pt: 0,
+};
+
 const userChatMessageSx: SxProps = {
   border: 'none',
   // border: '1px solid',
@@ -58,6 +64,7 @@ export function BeamScatterInput(props: {
   // const [showHistoryMessage, setShowHistoryMessage] = React.useState(true);
 
   // external state
+  const isDarkMode = useTheme().palette.mode === 'dark';
   const scatterShowPrevMessages = useModuleBeamStore(state => state.scatterShowPrevMessages);
 
   // derived state
@@ -87,7 +94,7 @@ export function BeamScatterInput(props: {
     return null;
 
   return (
-    <Box sx={BEAM_INVERT_BACKGROUND ? userMessageWrapperINVSx : userMessageWrapperSx}>
+    <Box sx={!BEAM_INVERT_BACKGROUND ? userMessageWrapperSx : isDarkMode ? userMessageWrapperDarkINVSx : userMessageWrapperINVSx}>
       <ChatMessageMemo
         message={lastHistoryMessage}
         fitScreen={props.isMobile}