ui overhaul

1 files changed, 24 insertions, 20 deletions

diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index 72a653c5..de8e3c98 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-
-import { HeaderButton } from ".";
+import { Tooltip } from "react-tooltip";
+import styled from "styled-components";
+import { HeaderButton, StyledTooltip, defaultBorderRadius } from ".";
 
 interface HeaderButtonWithTextProps {
   text: string;
@@ -13,25 +14,28 @@ interface HeaderButtonWithTextProps {
 
 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: (props.active ?  "3px" : "1px"), paddingLeft, borderRadius: (props.active ?  "50%" : undefined) }}
-      onMouseEnter={() => {
-        if (!props.disabled) {
-          setHover(true);
-        }
-      }}
-      onMouseLeave={() => {
-        setHover(false);
-      }}
-      onClick={props.onClick}
-    >
-      <span hidden={!hover}>{props.text}</span>
-      {props.children}
-    </HeaderButton>
+    <>
+      <HeaderButton
+        data-tooltip-id={`header_button_${props.text}`}
+        inverted={props.inverted}
+        disabled={props.disabled}
+        onMouseEnter={() => {
+          if (!props.disabled) {
+            setHover(true);
+          }
+        }}
+        onMouseLeave={() => {
+          setHover(false);
+        }}
+        onClick={props.onClick}
+      >
+        {props.children}
+      </HeaderButton>
+      <StyledTooltip id={`header_button_${props.text}`} place="bottom">
+        {props.text}
+      </StyledTooltip>
+    </>
   );
 };