fix sticky icon hover animation on mobile

Author: AnthonyGress

frontend/src/components/navbar/ResponsiveAppBar.tsx

@@ -235,10 +235,7 @@ export const ResponsiveAppBar = ({ children }: Props) => {
                                         display: 'flex',
                                         justifyContent: 'center',
                                         alignItems: 'center',
-                                        borderRadius: '50%',
-                                        '&:hover': {
-                                            backgroundColor: 'rgba(255, 255, 255, 0.08)'
-                                        }
+                                        borderRadius: '50%'
                                     }}
                                 >
                                     {updateAvailable ? (

frontend/src/theme/theme.ts

@@ -133,6 +133,21 @@ export const theme = createTheme({
                 }
             }
         },
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    '&:hover': {
+                        '@media (hover: hover)': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.08)'
+                        }
+                    },
+                    '&:active': {
+                        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+                        transition: 'background-color 0.1s ease-out'
+                    }
+                }
+            }
+        },
         // Style check icons in StepLabel component
         MuiStepIcon: {
             styleOverrides: {