From d0ffed85927e8f265695c0a716f10ec32e92e082 Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Sat, 11 Feb 2023 13:49:10 +0100
Subject: [PATCH] refactor(web/radial): move center icon into absolute div

fixes annoying issues when trying to rotate the icon
---
 web/src/features/menu/radial/index.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx
index b8619c3..0356010 100644
--- a/web/src/features/menu/radial/index.tsx
+++ b/web/src/features/menu/radial/index.tsx
@@ -44,9 +44,15 @@ const useStyles = createStyles((theme) => ({
       cursor: 'pointer',
     },
   },
+  centerIconContainer: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    pointerEvents: 'none',
+  },
   centerIcon: {
     color: '#fff',
-    pointerEvents: 'none',
   },
 }));
 
@@ -120,7 +126,6 @@ const RadialMenu: React.FC = () => {
                 </>
               );
             })}
-            {/* TODO: rotate go back icon */}
             <g
               transform={`translate(175, 175)`}
               onClick={() => {
@@ -133,16 +138,16 @@ const RadialMenu: React.FC = () => {
             >
               <circle r={30} className={classes.centerCircle} />
             </g>
+          </svg>
+          <div className={classes.centerIconContainer}>
             <FontAwesomeIcon
               icon={!menu.sub ? 'xmark' : 'arrow-rotate-left'}
+              fixedWidth
               className={classes.centerIcon}
               color="#fff"
-              width={28}
-              height={28}
-              x={175 - 28 / 2}
-              y={175 - 28 / 2}
+              size="2x"
             />
-          </svg>
+          </div>
         </ScaleFade>
       </Box>
     </>