From 29f9f22eff8eefeffeb9132a0795ec684813152f Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Wed, 14 Aug 2024 01:10:24 -0700
Subject: [PATCH] ERC x LFS: UX update2

---
 src/common/livefile/liveFile.icons.ts         |  2 ++
 .../workspace/WorkspaceLiveFilePicker.tsx     | 19 +++++++++++--------
 .../livefile-patch/useLiveFilePatch.tsx       |  4 ++--
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/common/livefile/liveFile.icons.ts b/src/common/livefile/liveFile.icons.ts
index 52f835cce..286258514 100644
--- a/src/common/livefile/liveFile.icons.ts
+++ b/src/common/livefile/liveFile.icons.ts
@@ -6,12 +6,14 @@ import MultipleStopIcon from '@mui/icons-material/MultipleStop';
 import SaveIcon from '@mui/icons-material/SaveOutlined';
 import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
 // import UploadFileIcon from '@mui/icons-material/UploadFile';
+import { LiveFilePatchIcon } from '~/common/components/icons/LiveFilePatchIcon';
 
 export const LiveFileIcon = styled(MultipleStopIcon)({
   rotate: '90deg',
 });
 
 export { FileOpenOutlinedIcon as LiveFileChooseIcon };
+export { LiveFilePatchIcon as LiveFilePatchIcon };
 export { MobiledataOffIcon as LiveFileCloseIcon };
 export { SaveIcon as LiveFileSaveIcon };
 export { SystemUpdateAltIcon as LiveFileReloadIcon };
diff --git a/src/common/stores/workspace/WorkspaceLiveFilePicker.tsx b/src/common/stores/workspace/WorkspaceLiveFilePicker.tsx
index 795c25b06..4fbd3460f 100644
--- a/src/common/stores/workspace/WorkspaceLiveFilePicker.tsx
+++ b/src/common/stores/workspace/WorkspaceLiveFilePicker.tsx
@@ -6,8 +6,7 @@ import CodeIcon from '@mui/icons-material/Code';
 
 import type { LiveFileId, LiveFileMetadata } from '~/common/livefile/liveFile.types';
 import { CloseableMenu } from '~/common/components/CloseableMenu';
-import { LiveFileChooseIcon } from '~/common/livefile/liveFile.icons';
-import { LiveFilePatchIcon } from '~/common/components/icons/LiveFilePatchIcon';
+import { LiveFileChooseIcon, LiveFileIcon } from '~/common/livefile/liveFile.icons';
 import { TooltipOutlined } from '~/common/components/TooltipOutlined';
 import { getFirstFileSystemFileHandle } from '~/common/util/fileSystemUtils';
 import { useDragDropDataTransfer } from '~/common/components/useDragDropDataTransfer';
@@ -100,10 +99,13 @@ export function WorkspaceLiveFilePicker(props: {
   const { dragContainerSx, dropComponent, handleContainerDragEnter, handleContainerDragStart } =
     useDragDropDataTransfer(true, 'Select', LiveFileChooseIcon as typeof SvgIcon, 'startDecorator', true, handleDataTransferDrop);
 
+  // styles
+  const containerSx = React.useMemo(() => ({
+    ...dragContainerSx,
+    display: 'flex',
+    alignItems: 'center',
+  }), [dragContainerSx]);
 
-  // Note: in the future let this be, we can show a file picker that adds LiveFiles to the workspace
-  // if (!haveLiveFiles)
-  //   return null;
 
   const showRemove = !!liveFileId && props.allowRemove === true;
 
@@ -113,10 +115,10 @@ export function WorkspaceLiveFilePicker(props: {
     <Box
       onDragEnter={handleContainerDragEnter}
       onDragStart={handleContainerDragStart}
-      sx={dragContainerSx}
+      sx={containerSx}
     >
       {!liveFileId ? (
-        <TooltipOutlined title={props.labelTooltip} color='success' placement='top-end'>
+        <TooltipOutlined title={props.labelTooltip} placement='top-end'>
           <Button
             variant='plain'
             color='neutral'
@@ -133,7 +135,8 @@ export function WorkspaceLiveFilePicker(props: {
           size='sm'
           onClick={handleToggleMenu}
         >
-          <LiveFilePatchIcon color='success' />
+          <LiveFileIcon />
+          {/*<LiveFilePatchIcon color='success' />*/}
         </IconButton>
       )}
 
diff --git a/src/modules/blocks/enhanced-code/livefile-patch/useLiveFilePatch.tsx b/src/modules/blocks/enhanced-code/livefile-patch/useLiveFilePatch.tsx
index 70ca33391..4c828dbea 100644
--- a/src/modules/blocks/enhanced-code/livefile-patch/useLiveFilePatch.tsx
+++ b/src/modules/blocks/enhanced-code/livefile-patch/useLiveFilePatch.tsx
@@ -96,8 +96,8 @@ export function useLiveFilePatch(title: string, code: string, isPartial: boolean
       <WorkspaceLiveFilePicker
         allowRemove
         autoSelectName={title}
-        labelButton='Insert...'
-        labelTooltip='Insert this code into a file'
+        labelButton='Insert ...'
+        labelTooltip='Apply this change to your file'
         liveFileId={liveFileId}
         onSelectFileOpen={handleSelectFilePicker}
         onSelectFileSystemFileHandle={handleSelectFileSystemFileHandle}