From 1eb84eceb400723c5e1babc490c7fa04a9648a20 Mon Sep 17 00:00:00 2001
From: Jordan Isip <me@jordanisip.com>
Date: Thu, 8 Aug 2024 16:56:44 -0400
Subject: [PATCH] Minor style polishing on the new tune menu

---
 .../blocks/helpers/block-wrappers/TuneMenu.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx
index 0392018..725db46 100644
--- a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx
+++ b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx
@@ -1,18 +1,20 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import { ArrowDownwardOutlined, ArrowUpwardOutlined, DeleteOutlined } from '@mui/icons-material';
-import { IconButton, Paper, Stack, Tooltip } from '@mui/material';
+import { IconButton, Paper, Stack, SxProps, Tooltip } from '@mui/material';
 
 import { TEditorBlock } from '../../../editor/core';
 import { resetDocument, setSelectedBlockId, useDocument } from '../../../editor/EditorContext';
 import { ColumnsContainerProps } from '../../ColumnsContainer/ColumnsContainerPropsSchema';
 
-const STYLE: CSSProperties = {
+const sx: SxProps = {
   position: 'absolute',
   top: 0,
-  left: -52,
+  left: -56,
   borderRadius: 64,
-  padding: 2,
+  paddingX: 0.5,
+  paddingY: 1,
+  zIndex: 'fab',
 };
 
 type Props = {
@@ -147,14 +149,14 @@ export default function TuneMenu({ blockId }: Props) {
   };
 
   return (
-    <Paper style={STYLE} onClick={(ev) => ev.stopPropagation()}>
+    <Paper sx={sx} onClick={(ev) => ev.stopPropagation()}>
       <Stack>
-        <Tooltip title="Move Up" placement="left-start">
+        <Tooltip title="Move up" placement="left-start">
           <IconButton onClick={() => handleMoveClick('up')} sx={{ color: 'text.primary' }}>
             <ArrowUpwardOutlined fontSize="small" />
           </IconButton>
         </Tooltip>
-        <Tooltip title="Move Down" placement="left-start">
+        <Tooltip title="Move down" placement="left-start">
           <IconButton onClick={() => handleMoveClick('down')} sx={{ color: 'text.primary' }}>
             <ArrowDownwardOutlined fontSize="small" />
           </IconButton>