Merge branch 'main' into styled-code

1 files changed, 8 insertions, 2 deletions

diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index f9483f0f..30931f86 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -6,14 +6,20 @@ interface HeaderButtonWithTextProps {
   text: string;
   onClick?: (e: any) => void;
   children: React.ReactNode;
+  disabled?: boolean;
 }
 
 const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
   const [hover, setHover] = useState(false);
   return (
     <HeaderButton
-      style={{ padding: "3px" }}
-      onMouseEnter={() => setHover(true)}
+      disabled={props.disabled}
+      style={{ padding: "1px", paddingLeft: hover ? "4px" : "1px" }}
+      onMouseEnter={() => {
+        if (!props.disabled) {
+          setHover(true);
+        }
+      }}
       onMouseLeave={() => {
         setHover(false);
       }}