From 52b62c7dcd7b2a958bf72549acef03c2efd3b70b Mon Sep 17 00:00:00 2001
From: gillespi314 <73313222+gillespi314@users.noreply.github.com>
Date: Tue, 31 Aug 2021 15:20:53 -0500
Subject: [PATCH] Adjust software vulnerabilities UI (#1871)

---
 frontend/components/IconToolTip/IconToolTip.tsx    |  6 +++---
 .../SoftwareVulnerabilities.jsx                    | 14 +++++++-------
 .../SoftwareVulnerabilities/_styles.scss           |  8 +++++++-
 frontend/pages/hosts/HostDetailsPage/_styles.scss  |  6 ++++++
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/components/IconToolTip/IconToolTip.tsx b/frontend/components/IconToolTip/IconToolTip.tsx
index 4aa78e5d6c..4cf3ce847e 100644
--- a/frontend/components/IconToolTip/IconToolTip.tsx
+++ b/frontend/components/IconToolTip/IconToolTip.tsx
@@ -30,9 +30,9 @@ const IconToolTip = (props: IIconToolTipProps): JSX.Element => {
     svgIcon = (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
+        width="24"
+        height="24"
+        viewBox="0 -6.5 24 24"
         fill="none"
       >
         <path
diff --git a/frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/SoftwareVulnerabilities.jsx b/frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/SoftwareVulnerabilities.jsx
index 630c00f858..54614fbd79 100644
--- a/frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/SoftwareVulnerabilities.jsx
+++ b/frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/SoftwareVulnerabilities.jsx
@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
-import FleetIcon from "components/icons/FleetIcon";
 import softwareInterface from "interfaces/software";
+import FleetIcon from "../../../../../assets/images/open-new-tab-12x12@2x.png";
 
 const baseClass = "software-vulnerabilities";
 
@@ -42,10 +42,10 @@ class SoftwareVulnerabilities extends Component {
     const renderVul = (vul, index) => {
       return (
         <li key={index}>
-          Read more about{" "}
+          Read more about <b>{vul.name}</b>{" "}
           <a href={vul.details_link} target="_blank" rel="noopener noreferrer">
-            <em>{vul.name}</em> {vul.cve} vulnerability &nbsp;
-            <FleetIcon name="external-link" />
+            {vul.cve} vulnerability &nbsp;
+            <img alt="External link" src={FleetIcon} />
           </a>
         </li>
       );
@@ -62,9 +62,9 @@ class SoftwareVulnerabilities extends Component {
         <div className={`${baseClass}__count`}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
+            width="19"
+            height="19"
+            viewBox="0 -2.5 19 19"
             fill="none"
           >
             <path
diff --git a/frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/_styles.scss b/frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/_styles.scss
index 3ee368e90b..8d1bdb3d47 100644
--- a/frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/_styles.scss
@@ -4,7 +4,7 @@
   border: solid 1px $ui-fleet-black-50;
   box-sizing: border-box;
   border-radius: 10px;
-  overflow: scroll;
+  overflow: auto;
   margin-bottom: $pad-large;
   padding: $pad-large;
   padding-bottom: $pad-small;
@@ -13,9 +13,15 @@
     color: $core-vibrant-blue;
     font-weight: $bold;
     text-decoration: none;
+    img {
+      width: 12px;
+      height: 12px;
+    }
   }
 
   &__count {
+    display: flex;
+    align-content: center;
     font-size: $small;
     font-weight: $bold;
   }
diff --git a/frontend/pages/hosts/HostDetailsPage/_styles.scss b/frontend/pages/hosts/HostDetailsPage/_styles.scss
index eaf172df5b..d064c49b49 100644
--- a/frontend/pages/hosts/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/_styles.scss
@@ -363,6 +363,12 @@
     }
   }
 
+  .section--users {
+    .host-details__wrapper {
+      overflow: auto;
+    }
+  }
+
   tbody {
     td {
       padding: 12px 27px;