Add Learn More link to unknown version UI, styled with white text

Author: iansltx

frontend/components/CustomLink/CustomLink.tsx

@@ -12,7 +12,7 @@ interface ICustomLinkProps {
   /** Icon wraps on new line with last word */
   multiline?: boolean;
   iconColor?: Colors;
-  color?: "core-fleet-blue" | "core-fleet-black";
+  color?: "core-fleet-blue" | "core-fleet-black" | "core-fleet-white";
   /** Restricts access via keyboard when CustomLink is part of disabled UI */
   disableKeyboardNavigation?: boolean;
 }
@@ -31,6 +31,7 @@ const CustomLink = ({
 }: ICustomLinkProps): JSX.Element => {
   const customLinkClass = classnames(baseClass, className, {
     [`${baseClass}--black`]: color === "core-fleet-black",
+    [`${baseClass}--white`]: color === "core-fleet-white",
   });
 
   const target = newTab ? "_blank" : "";

frontend/components/CustomLink/_styles.scss

@@ -13,4 +13,12 @@
   &--black {
     color: $core-fleet-black;
   }
+
+  &--black {
+    color: $core-fleet-black;
+  }
+
+  &--white {
+    color: $core-fleet-white;
+  }
 }

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/SoftwarePackageCard.tsx

@@ -30,6 +30,8 @@ import Tag from "components/Tag";
 import SoftwareIcon from "pages/SoftwarePage/components/icons/SoftwareIcon";
 import endpoints from "utilities/endpoints";
 import URL_PREFIX from "router/url_prefix";
+import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
+import CustomLink from "components/CustomLink";
 
 import DeleteSoftwareModal from "../DeleteSoftwareModal";
 import EditSoftwareModal from "../EditSoftwareModal";
@@ -318,7 +320,20 @@ const SoftwareInstallerCard = ({
   const versionInfo = version ? (
     <span>{version}</span>
   ) : (
-    <TooltipWrapper tipContent={`Fleet couldn't read the version from ${name}`}>
+    <TooltipWrapper
+      tipContent={
+        <span>
+          Fleet couldn&apos;t read the version from ${name}.{" "}
+          <CustomLink
+            newTab
+            url={`${LEARN_MORE_ABOUT_BASE_LINK}/read-package-version`}
+            text="Learn more"
+            color="core-fleet-white"
+            iconColor="core-fleet-white"
+          />
+        </span>
+      }
+    >
       Version (unknown)
     </TooltipWrapper>
   );

frontend/styles/var/colors.scss

@@ -1,5 +1,6 @@
 // Core
 $core-fleet-black: #192147;
+$core-fleet-white: #ffffff;
 $core-fleet-blue: #3e4771;
 $core-vibrant-blue: #6a67fe;
 $core-vibrant-red: #ff5c83;