Button styling fixes

This commit re-introduces fixes for button and thumb hover states

Previously these had a subtle but clear highlight state on hover. This
change re-introduces hover states in both dark and light modes

ui/components/Button.tsx

@@ -46,6 +46,9 @@ const Button = styled(UnstyledButton)`
     line-height: 1;
     border-radius: ${(props) => props.theme.borderRadius.soft};
     font-weight: 600;
+    &:hover {
+      background-color: ${(props) => props.theme.colors.blueWithOpacity};
+    }
   }
   &.MuiButton-outlined {
     padding: 8px 12px;
@@ -58,6 +61,9 @@ export const IconButton = styled(UnstyledButton)`
     min-width: 38px;
     height: 38px;
     padding: 0;
+    &:hover {
+      background-color: ${(props) => props.theme.colors.blueWithOpacity};
+    }
   }
   &.MuiButton-text {
     padding: 0;

ui/components/DarkModeSwitch.tsx

@@ -25,7 +25,12 @@ function DarkModeSwitch({ className, darkModeEnabled }: Props) {
 export default styled(DarkModeSwitch).attrs({
   className: DarkModeSwitch.name,
 })`
-.MuiSwitch-thumb {
+  .MuiSwitch-switchBase {
+    &:hover {
+      background-color: ${(props) => props.theme.colors.blueWithOpacity};
+    }
+  }
+  .MuiSwitch-thumb {
     color: #fff;
     background-image: url(${(props) =>
       props.theme.mode === ThemeTypes.Dark
@@ -34,4 +39,5 @@ export default styled(DarkModeSwitch).attrs({
   }
   .MuiSwitch-track {
     background-color: ${(props) => props.theme.colors.primary};
+  }
 `;

ui/components/Nav.tsx

@@ -1,8 +1,10 @@
 import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 import { IconButton, Tab, Tabs, Tooltip } from "@mui/material";
+import { alpha } from "@mui/material/styles";
 import _ from "lodash";
 import React, { Dispatch, SetStateAction } from "react";
 import styled from "styled-components";
+import { ThemeTypes } from "../contexts/AppContext";
 import { formatURL } from "../lib/nav";
 import { PageRoute, V2Routes } from "../lib/types";
 import { Fade } from "../lib/utils";
@@ -81,7 +83,7 @@ const NavContent = styled.div<{ collapsed: boolean }>`
     //matches .MuiSvgIcon-root
     transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     &.selected,
-    :hover {
+    &:hover {
       background-color: ${(props) => props.theme.colors.blueWithOpacity};
     }
   }
@@ -107,6 +109,12 @@ const NavContent = styled.div<{ collapsed: boolean }>`
 const CollapseButton = styled(IconButton)`
   &.MuiIconButton-root {
     margin: 0 18px 0 4px;
+    &:hover {
+      background-color: ${(props) =>
+        props.theme.mode === ThemeTypes.Dark
+          ? alpha(props.theme.colors.primary10, 0.2)
+          : alpha(props.theme.colors.primary, 0.1)};
+    }
   }
 `;
 

ui/components/Sync/__tests__/__snapshots__/SyncActions.test.tsx.snap

@@ -113,6 +113,10 @@ exports[`SyncActions snapshots hideSyncOptions 1`] = `
   font-weight: 600;
 }
 
+.c3.MuiButton-root:hover {
+  background-color: rgba(0, 179, 236, 0.1);
+}
+
 .c3.MuiButton-outlined {
   padding: 8px 12px;
 }
@@ -476,6 +480,10 @@ exports[`SyncActions snapshots non-suspended 1`] = `
   font-weight: 600;
 }
 
+.c3.MuiButton-root:hover {
+  background-color: rgba(0, 179, 236, 0.1);
+}
+
 .c3.MuiButton-outlined {
   padding: 8px 12px;
 }
@@ -999,6 +1007,10 @@ exports[`SyncActions snapshots suspended 1`] = `
   font-weight: 600;
 }
 
+.c3.MuiButton-root:hover {
+  background-color: rgba(0, 179, 236, 0.1);
+}
+
 .c3.MuiButton-outlined {
   padding: 8px 12px;
 }

ui/components/Sync/__tests__/__snapshots__/SyncControls.test.tsx.snap

@@ -113,6 +113,10 @@ exports[`SyncControls snapshots allButtonsDisabled 1`] = `
   font-weight: 600;
 }
 
+.c2.MuiButton-root:hover {
+  background-color: rgba(0, 179, 236, 0.1);
+}
+
 .c2.MuiButton-outlined {
   padding: 8px 12px;
 }
@@ -631,6 +635,10 @@ exports[`SyncControls snapshots hasTooltipSuffix 1`] = `
   font-weight: 600;
 }
 
+.c2.MuiButton-root:hover {
+  background-color: rgba(0, 179, 236, 0.1);
+}
+
 .c2.MuiButton-outlined {
   padding: 8px 12px;
 }
@@ -1104,6 +1112,10 @@ exports[`SyncControls snapshots hideSuspend 1`] = `
   font-weight: 600;
 }
 
+.c2.MuiButton-root:hover {
+  background-color: rgba(0, 179, 236, 0.1);
+}
+
 .c2.MuiButton-outlined {
   padding: 8px 12px;
 }
@@ -1517,6 +1529,10 @@ exports[`SyncControls snapshots hideSyncOptions 1`] = `
   font-weight: 600;
 }
 
+.c2.MuiButton-root:hover {
+  background-color: rgba(0, 179, 236, 0.1);
+}
+
 .c2.MuiButton-outlined {
   padding: 8px 12px;
 }
@@ -1873,6 +1889,10 @@ exports[`SyncControls snapshots non-suspended 1`] = `
   font-weight: 600;
 }
 
+.c2.MuiButton-root:hover {
+  background-color: rgba(0, 179, 236, 0.1);
+}
+
 .c2.MuiButton-outlined {
   padding: 8px 12px;
 }

ui/components/UserSettings.tsx

@@ -39,9 +39,8 @@ const PersonButton = styled(IconButton)<{ open?: boolean }>`
     padding: ${(props) => props.theme.spacing.xs};
     background-color: ${(props) => props.theme.colors.neutralGray};
     color: ${(props) => props.theme.colors.neutral30};
-    :hover {
-      background-color: ${(props) => props.theme.colors.neutral00};
-      color: ${(props) => props.theme.colors.primary10};
+    &:hover {
+      background-color: ${(props) => props.theme.colors.blueWithOpacity};
     }
   }
 `;

ui/components/__tests__/__snapshots__/Page.test.tsx.snap

@@ -114,6 +114,10 @@ exports[`Page snapshots default 1`] = `
   text-overflow: ellipsis;
 }
 
+.c9 .MuiSwitch-switchBase:hover {
+  background-color: rgba(0, 179, 236, 0.1);
+}
+
 .c9 .MuiSwitch-thumb {
   color: #fff;
   background-image: url();
@@ -129,9 +133,8 @@ exports[`Page snapshots default 1`] = `
   color: #737373;
 }
 
-.c10.MuiIconButton-root :hover {
-  background-color: #EEEEEE;
-  color: #009CCC;
+.c10.MuiIconButton-root:hover {
+  background-color: rgba(0, 179, 236, 0.1);
 }
 
 .c13 {