web: get rid of blue box around tilt cloud status (#3548)

tilt-dev · Jul 9, 2020 · 0fb96ab · 0fb96ab
1 parent 67d142f
commit 0fb96ab
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/web/package.json b/web/package.json
@@ -26,6 +26,7 @@
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.0",
     "react-modal": "^3.10.1",
+    "react-outline-manager": "^1.2.2",
     "react-router-dom": "^5.1.0",
     "react-scripts": "3.4.1",
     "react-select": "^2.4.2",

diff --git a/web/src/SidebarAccount.tsx b/web/src/SidebarAccount.tsx
@@ -13,6 +13,7 @@ import { ReactComponent as AccountIcon } from "./assets/svg/account.svg"
 import { ReactComponent as TiltCloudLogoSvg } from "./assets/svg/logo-Tilt-Cloud.svg"
 import ButtonLink from "./ButtonLink"
 import ButtonInput from "./ButtonInput"
+import ReactOutlineManager from "react-outline-manager"
 
 export const SidebarAccountRoot = styled.div`
   position: relative; // Anchor SidebarAccountMenu
@@ -259,12 +260,14 @@ function SidebarAccount(props: SidebarAccountProps) {
   return (
     <SidebarAccountRoot>
       <SidebarAccountHeader>
-        <SidebarAccountButton
-          onClick={() => toggleAccountMenu(!accountMenuIsVisible)}
-        >
-          <SidebarAccountLabel>Your Tilt Cloud status</SidebarAccountLabel>
-          <SidebarAccountIcon />
-        </SidebarAccountButton>
+        <ReactOutlineManager>
+          <SidebarAccountButton
+            onClick={() => toggleAccountMenu(!accountMenuIsVisible)}
+          >
+            <SidebarAccountLabel>Your Tilt Cloud status</SidebarAccountLabel>
+            <SidebarAccountIcon />
+          </SidebarAccountButton>
+        </ReactOutlineManager>
       </SidebarAccountHeader>
       <SidebarAccountMenu className={accountMenuIsVisible ? "is-visible" : ""}>
         <SidebarAccountMenuHeader>

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -11373,6 +11373,11 @@ react-modal@^3.10.1:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
+react-outline-manager@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/react-outline-manager/-/react-outline-manager-1.2.2.tgz#beeceb89cf6840f63e79a68bb2f3a4cc26bdd621"
+  integrity sha512-xgoyqIDE88odLISa6uPsh+OftbFYRGZzzP4Ub8kiDJJqn5HfFuJhRdX40IMIzD0GC9WrhxuEzD6w5eTchGjYCg==
+
 react-popper-tooltip@^2.8.3:
   version "2.11.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"