fix: cell zIndex UI bug

frontend/src/components/Cell.jsx

@@ -19,7 +19,7 @@ const Cell = ({ cell }) => {
     let squareColor = getSquareColor(square);
 
     let marked = isSquareMarked(square);
-    let borderColor = isOver ? '#77777777' : 'transparent';
+    let borderColor = isOver ? '#77777744' : 'transparent';
     let borderWidth = type ? '3px' : '5px'
 
     const handleClick = () => {
@@ -30,22 +30,17 @@ const Cell = ({ cell }) => {
     }
 
     let content = null;
-    if (marked) {
+    if (marked && !type) {
         content = <Mark />
     } else if (type) {
         content = <Piece cell={cell} />
     }
 
     return (
-        <Flex ref={setNodeRef} style={{ aspectRatio: '1/1' }} sx={theme => {
+        <Flex ref={setNodeRef} sx={theme => {
             let color = theme.colors.lime;
-            return { backgroundColor: squareColor === 'b' ? color[8] : color[1], filter: 'saturate(0.5)' }
+            return { backgroundColor: squareColor === 'b' ? '#769854' : '#e8edcd', aspectRatio: '1/1' }
         }} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
-            {
-                isOver ?
-                    <div style={{ width: '100%', height: '100%', position: 'absolute', borderWidth, boxSizing: 'border-box', borderStyle: 'solid', borderColor }}></div>
-                    : null
-            }
             {content}
         </Flex>
     )

frontend/src/components/Piece.jsx

@@ -46,17 +46,19 @@ const Piece = ({ cell }) => {
         }
     });
 
-    let borderColor = marked ? '#77777766' : 'transparent'
+    let borderColor = marked ? '#77777744' : 'transparent'
 
     const style = transform ? {
         transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
         cursor: isDragging ? 'grabbing' : 'pointer',
-        zIndex: isDragging ? 1000 : 10,
+        zIndex: 1000,
         aspectRatio: '1',
         touchAction: 'none',
         borderRadius: '10px',
         outline: 'none'
-    } : undefined;
+    } : {
+        zIndex: 10
+    };
 
     useEffect(() => {
         if (isDragging) {
@@ -67,15 +69,17 @@ const Piece = ({ cell }) => {
 
     if (logo) {
         return (
-            <div style={{ position: 'relative' }}>
-                <div style={{ position: 'absolute', borderRadius: '50%', boxSizing: 'border-box', borderWidth: '8px', width: '100%', height: '100%', borderStyle: 'solid', borderColor }}>
+            <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+                <div style={{ borderRadius: '50%', position: 'absolute', boxSizing: 'border-box', borderWidth: '7px', width: '100%', height: '100%', borderStyle: 'solid', borderColor }}>
+                </div>
+                <div style={{ width: '100%', height: '100%' }}>
+                    <Image classNames={{ root: classes['chess-piece'] }} ref={setNodeRef} style={style} sx={{ cursor: 'pointer' }} {...listeners} {...attributes} src={`/src/assets/images/${logo}.png`} />
                 </div>
-                <Image classNames={{ root: classes['chess-piece'] }} ref={setNodeRef} style={style} sx={{ cursor: 'pointer' }} {...listeners} {...attributes} src={`/src/assets/images/${logo}.png`} />
             </div>
         )
     } else {
         return (
-            <div style={{ width: '100%', zIndex: 100 }}></div>
+            <div style={{ width: '100%' }}></div>
         )
     }
 }