change icon when in editing mode (fix #305)

franciscoBSalgueiro · May 22, 2024 · 720512c · 720512c
1 parent 345bc43
commit 720512c
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/src/components/boards/Board.tsx b/src/components/boards/Board.tsx
@@ -39,13 +39,13 @@ import {
   Tooltip,
   useMantineTheme,
 } from "@mantine/core";
-import { useElementSize } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
 import {
   IconArrowBack,
   IconChevronRight,
   IconDeviceFloppy,
   IconEdit,
+  IconEditOff,
   IconPlus,
   IconSwitchVertical,
   IconTarget,
@@ -327,11 +327,15 @@ function Board({
         {!disableVariations && (
           <Tooltip label="Edit Position">
             <ActionIcon
-              variant="default"
+              variant={editingMode ? "filled" : "default"}
               size="lg"
               onClick={() => toggleEditingMode()}
             >
-              <IconEdit size="1.3rem" />
+              {editingMode ? (
+                <IconEditOff size="1.3rem" />
+              ) : (
+                <IconEdit size="1.3rem" />
+              )}
             </ActionIcon>
           </Tooltip>
         )}