From d26b434eb1bf3aa084f00fa0eb143e43591713c3 Mon Sep 17 00:00:00 2001
From: Ty Dunn <ty@tydunn.com>
Date: Tue, 4 Jul 2023 22:23:04 -0700
Subject: stop inside of circle

---
 extension/react-app/src/components/HeaderButtonWithText.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'extension/react-app/src/components/HeaderButtonWithText.tsx')

diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index 3ddac93c..72a653c5 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -8,15 +8,17 @@ interface HeaderButtonWithTextProps {
   children: React.ReactNode;
   disabled?: boolean;
   inverted?: boolean;
+  active?: boolean;
 }
 
 const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
   const [hover, setHover] = useState(false);
+  const paddingLeft = (props.disabled ? (props.active ?  "3px" : "1px"): (hover ? "4px" : "1px"));
   return (
     <HeaderButton
       inverted={props.inverted}
       disabled={props.disabled}
-      style={{ padding: "1px", paddingLeft: hover ? "4px" : "1px" }}
+      style={{ padding: (props.active ?  "3px" : "1px"), paddingLeft, borderRadius: (props.active ?  "50%" : undefined) }}
       onMouseEnter={() => {
         if (!props.disabled) {
           setHover(true);
-- 
cgit v1.2.3-70-g09d2