Merge pull request #540 from btorresgil/cert-expire-advisory

chore(swfw): Add cert expire banner to Orchestration Hub
PaloAltoNetworks · Nov 20, 2023 · a0f1c90 · a0f1c90
2 parents a9b66c4 + 752397d
commit a0f1c90
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 0 deletions.
diff --git a/src/components/CertExpireBanner/index.js b/src/components/CertExpireBanner/index.js
@@ -0,0 +1,31 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import "./styles.scss";
+
+export default function CertExpireBanner() {
+  return (
+    <div className="banner-cert-expire">
+      <h4>
+        <div className="banner-cert-expire__line1">
+          Emergency Update Required
+        </div>
+        <div className="banner-cert-expire__line2">
+          PAN-OS Root Certificate Expiration
+        </div>
+      </h4>
+      <div className="view-advisory-link">
+        <Link
+          to="https://live.paloaltonetworks.com/t5/customer-advisories/emergency-update-required-pan-os-root-and-default-certificate/ta-p/564672"
+          className="tab-item__link"
+        >
+          <span>View Advisory</span>
+          <img
+            src="/img/icons/arrow-forward.svg"
+            alt="Forward arrow icon"
+            height="15"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/CertExpireBanner/styles.scss b/src/components/CertExpireBanner/styles.scss
@@ -0,0 +1,47 @@
+html[data-theme="dark"] {
+  .banner-cert-expire {
+    color: black;
+  }
+}
+
+.banner-cert-expire {
+  background-color: #ffffff;
+  padding: 13px;
+  width: 100%;
+  max-width: 30em;
+  position: relative;
+  top: 10px;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 4px;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
+  z-index: 100;
+
+  h4 {
+    margin-bottom: 0.4em;
+    font-family: "Montserrat", sans-serif;
+  }
+
+  &__line2 {
+    font-weight: 500;
+  }
+
+  // .view-advisory-link {
+  // margin: 0.5em 0;
+  // }
+
+  .tab-item__link {
+    display: flex;
+    align-items: center;
+    color: var(--ifm-color-main);
+
+    img {
+      max-width: 25px;
+      margin-left: 0.25em;
+    }
+
+    :hover {
+      color: var(--ifm-color-main);
+    }
+  }
+}
diff --git a/src/pages/swfw.js b/src/pages/swfw.js
@@ -14,6 +14,7 @@ import {
 import "./swfw.scss";
 import CloudCard from "../components/CloudCard";
 import LinkList from "../components/LinkList";
+import CertExpireBanner from "../components/CertExpireBanner";
 
 export default function SWFWLandingPage() {
   return (
@@ -22,6 +23,7 @@ export default function SWFWLandingPage() {
       title={SWFW_METADATA.title}
       wrapperClassName="swfw-landing-page"
     >
+      <CertExpireBanner />
       <div className="swfw-landing-page__container">
         <section className={`product-hero-container swfw swfw-hero-container`}>
           <div className={`product-hero__inner-content swfw`}>

diff --git a/src/pages/swfw.scss b/src/pages/swfw.scss
@@ -61,6 +61,12 @@ html[data-theme="dark"] {
     max-width: 1200px;
     align-self: center;
     overflow: visible;
+
+    // to accomodate the cert expiration banner
+    @media (min-width: 1068px) {
+      position: relative;
+      top: -40px;
+    }
   }
 
   html[data-theme="dark"] {