fix: Toggle button visual order (#4128)

theopensystemslab · Jan 9, 2025 · c9412ae · c9412ae
1 parent 10a746e
commit c9412ae
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/editor.planx.uk/src/ui/editor/ToggleIconButton.tsx b/editor.planx.uk/src/ui/editor/ToggleIconButton.tsx
@@ -23,15 +23,16 @@ const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({
     <Tooltip title={tooltip} placement="right">
       <IconButton
         aria-label={ariaLabel}
+        aria-pressed={isToggled}
         onClick={onToggle}
         size="large"
         sx={(theme) => ({
           position: "relative",
           background: theme.palette.background.paper,
           padding: theme.spacing(1),
           color: isToggled
-            ? theme.palette.text.disabled
-            : theme.palette.text.primary,
+            ? theme.palette.text.primary
+            : theme.palette.text.disabled,
 
           "&:hover": {
             background: theme.palette.common.white,
@@ -45,7 +46,7 @@ const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({
             top: "55%",
             left: "48%",
             transform: "translate(-50%, -50%)",
-            opacity: isToggled ? 1 : 0,
+            opacity: isToggled ? 0 : 1,
             transition: "opacity 0.2s ease-in-out",
           }}
         >