fix: PR comments

Enterprise-CMCS · Dec 12, 2024 · 62b9002 · 62b9002
1 parent fe07aec
commit 62b9002
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/react-app/src/components/Banner/MMDLSpaBanner.tsx b/react-app/src/components/Banner/MMDLSpaBanner.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
-import XIcon from "@/assets/X_dismiss_icon.svg";
-import InfoIcon from "@/assets/info_circle_icon.svg";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { InfoCircledIcon } from "@radix-ui/react-icons";
 
 const MMDLAlertBanner = () => {
   const [isVisible, setIsVisible] = useState(true);
@@ -10,20 +10,15 @@ const MMDLAlertBanner = () => {
     localStorage.setItem("mmdlAlertDismissed", "true");
   };
 
-  const goToFAQs = () => {
-    window.open("/faq#mmdl-section", "_blank");
-  };
-
   if (!isVisible) return null;
 
   return (
     <div className="bg-[#E1F3F8] w-full flex flex-col md:flex-row relative box-border h-auto md:h-[180px] lg:h-[98px] p-4 md:p-3 gap-4">
       <div className="bg-[#00A6D2] w-[8px] h-full absolute left-0 top-0"></div>
       <div className="flex items-center flex-grow mt-2">
-        <img
-          src={InfoIcon}
-          alt="Info Icon"
-          className="object-contain w-[32px] h-[32px] p-[2.67px] mx-4 mb-14"
+        <InfoCircledIcon
+          className="object-contain w-[38px] h-[38px]  mx-4 mb-14"
+          aria-hidden="true"
         />
         <div className="flex flex-col flex-grow">
           <h3 className="font-bold text-black text-[18px] break-words pr-4">
@@ -37,18 +32,20 @@ const MMDLAlertBanner = () => {
         </div>
       </div>
       <div className="flex space-x-4">
-        <button
-          onClick={goToFAQs}
-          className="border-2 border-black rounded h-[38px] w-[116px] whitespace-nowrap top-2 left-[1108px] font-open-sans text-[16px] font-bold text-center decoration-transparent [text-decoration-skip-ink:none]"
+        <a
+          href="/faq#mmdl-section"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="border-2 border-black rounded h-[38px] px-4 text-[16px] font-open-sans font-bold text-center decoration-transparent [text-decoration-skip-ink:none] whitespace-nowrap flex items-center justify-center"
         >
           Go to FAQs
-        </button>
+        </a>
         <button
           onClick={handleDismiss}
           aria-label="Dismiss"
-          className="rounded-full w-[24px] h-[24px] left-[1108px] flex justify-center"
+          className="rounded-full w-[24px] h-[24px] flex justify-center items-center"
         >
-          <img src={XIcon} alt="Dismiss Icon" className="object-contain w-full h-full" />
+          <Cross2Icon className="object-contain w-full h-full" aria-hidden="true" />
         </button>
       </div>
     </div>

diff --git a/react-app/src/components/Layout/index.tsx b/react-app/src/components/Layout/index.tsx
@@ -154,7 +154,6 @@ export const Layout = () => {
     <div className="min-h-full flex flex-col">
       <ScrollToTop />
       <UserPrompt />
-      {/* Render the MMDLAlertBanner if the user is signed in */}
       {user?.user && <MMDLAlertBanner />}
       <UsaBanner isUserMissingRole={user?.user && customUserRoles === undefined} />
       <nav data-testid="nav-banner-d" className="bg-primary">