Adjust software vulnerabilities UI (#1871)

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

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

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;
   }

frontend/pages/hosts/HostDetailsPage/_styles.scss

@@ -363,6 +363,12 @@
     }
   }
 
+  .section--users {
+    .host-details__wrapper {
+      overflow: auto;
+    }
+  }
+
   tbody {
     td {
       padding: 12px 27px;