Only use hover effect in CellButton if the onClick prop is provided

1 files changed, 21 insertions, 16 deletions

diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
index a55ffc1153..68f1dc1f32 100644
--- a/gui/src/renderer/components/cell/CellButton.tsx
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -4,29 +4,34 @@ import { colors } from '../../../config.json';
 import { CellDisabledContext } from './Container';
 import { CellSectionContext } from './Section';
 
-interface IStyledCellButtonProps {
+interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   selected?: boolean;
   containedInSection: boolean;
 }
 
-const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => ({
-  display: 'flex',
-  padding: '0 16px 0 22px',
-  marginBottom: '1px',
-  flex: 1,
-  alignItems: 'center',
-  alignContent: 'center',
-  cursor: 'default',
-  border: 'none',
-  backgroundColor: props.selected
+export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => {
+  const backgroundColor = props.selected
     ? colors.green
     : props.containedInSection
     ? colors.blue40
-    : colors.blue,
-  ':not(:disabled):hover': {
-    backgroundColor: props.selected ? colors.green : colors.blue80,
-  },
-}));
+    : colors.blue;
+  const backgroundColorHover = props.selected ? colors.green : colors.blue80;
+
+  return {
+    display: 'flex',
+    padding: '0 16px 0 22px',
+    marginBottom: '1px',
+    flex: 1,
+    alignItems: 'center',
+    alignContent: 'center',
+    cursor: 'default',
+    border: 'none',
+    backgroundColor,
+    ':not(:disabled):hover': {
+      backgroundColor: props.onClick ? backgroundColorHover : backgroundColor,
+    },
+  };
+});
 
 interface ICellButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   selected?: boolean;