fix for expiry message message (#7093)

this fixes the expiry message label and also makes the whole message a link

changes/issue-7074-fix-sandbox-expiration-message

@@ -0,0 +1 @@
+* fix for the sandbox expiration message

frontend/components/Sandbox/SandboxExpiryMessage/SandboxExpiryMessage.tsx

@@ -8,25 +8,24 @@ interface ISandboxExpiryMessageProps {
   expiry: string;
 }
 
-const SandboxExpiryMessage = ({
-  expiry,
-}: ISandboxExpiryMessageProps): JSX.Element => {
+const SandboxExpiryMessage = ({ expiry }: ISandboxExpiryMessageProps) => {
   return (
-    <div className={baseClass}>
+    <a
+      href="https://fleetdm.com/docs/deploying"
+      target="_blank"
+      rel="noreferrer"
+      className={baseClass}
+    >
       <p>Your Fleet Sandbox expires in {expiry}.</p>
-      <a
-        href="https://fleetdm.com/docs/deploying"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Learn how to renew or downgrade
+      <span>
+        Learn how to deploy Fleet
         <img
           alt="Open external link"
           className="icon-external"
           src={ExternalURLIcon}
         />
-      </a>
-    </div>
+      </span>
+    </a>
   );
 };
 

frontend/components/Sandbox/SandboxExpiryMessage/_styles.scss

@@ -9,11 +9,18 @@
   border-radius: $border-radius;
   font-size: $xx-small;
 
+  color: $core-fleet-black;
+  font-weight: $regular;
+
+  &:hover {
+    cursor: pointer;
+  }
+
   p {
     margin: 0;
   }
 
-  a {
+  span {
     display: flex;
     align-items: center;
     color: $core-fleet-black;

frontend/services/entities/config.ts

@@ -48,7 +48,6 @@ export default {
   loadSandboxExpiry: async () => {
     const instanceId = window.location.host.split(".")[0];
     const url = "https://sandbox.fleetdm.com/expires";
-    const token = local.getItem("auth_token");
 
     try {
       const { data } = await axios.get<{ timestamp: string }>(url, {