From 7378952a8b73694e2bbe5e99cc0e66dedacc6f2b Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Thu, 3 Feb 2022 08:46:04 -0800
Subject: [PATCH] Add opaque bg to tooltip and legend.

---
 awx/ui/src/screens/TopologyView/Legend.js  | 5 +++--
 awx/ui/src/screens/TopologyView/Tooltip.js | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/awx/ui/src/screens/TopologyView/Legend.js b/awx/ui/src/screens/TopologyView/Legend.js
index 3ecc5492d5..29e0d0516b 100644
--- a/awx/ui/src/screens/TopologyView/Legend.js
+++ b/awx/ui/src/screens/TopologyView/Legend.js
@@ -23,7 +23,8 @@ const Wrapper = styled.div`
   top: -20px;
   left: 0;
   padding: 10px;
-  width: 190px;
+  width: 150px;
+  background-color: rgba(255, 255, 255, 0.85);
 `;
 const Button = styled(PFButton)`
   width: 20px;
@@ -88,7 +89,7 @@ function Legend() {
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button variant="primary" isSmall>
-              H
+              Hy
             </Button>
           </DescriptionListTerm>
           <DescriptionListDescription>Hybrid node</DescriptionListDescription>
diff --git a/awx/ui/src/screens/TopologyView/Tooltip.js b/awx/ui/src/screens/TopologyView/Tooltip.js
index 2026525260..f294e5a1ed 100644
--- a/awx/ui/src/screens/TopologyView/Tooltip.js
+++ b/awx/ui/src/screens/TopologyView/Tooltip.js
@@ -24,6 +24,7 @@ const Wrapper = styled.div`
   right: 0;
   padding: 10px;
   width: 20%;
+  background-color: rgba(255, 255, 255, 0.85);
 `;
 const Button = styled(PFButton)`
   width: 20px;