docs: restyle the site according to new brand DOC-1587 (#5772) (#5814)

* docs: change logos and theme colors DOC-1587

* docs: further styling

* docs: style packs component

* docs: style cve table

* docs: style getting started cards

* docs: change font

* docs: adjust size of logo and points of interest

* ci: auto-formatting prettier issues

* Optimised images with calibre/image-actions

* docs: style tooltips

* docs: change color of privacy link

* docs: update background color

* docs: update styles

* docs: remove tags from underlines

* docs: fix navbar color and add 10% opacity to admonitions

* docs: style packs

* docs: fix underlines for admonition hyperlinks

---------

Co-authored-by: vault-token-factory-spectrocloud[bot] <133815545+vault-token-factory-spectrocloud[bot]@users.noreply.github.com>
Co-authored-by: Ben Radstone <[email protected]>
Co-authored-by: Ben Radstone <[email protected]>
(cherry picked from commit 0d6a273)

Co-authored-by: Adelina Simion <[email protected]>

Author: vault-token-factory-spectrocloud[bot]

docusaurus.config.js

@@ -294,14 +294,14 @@ const config = {
         maxHeadingLevel: 3,
       },
       // Replace with your project's social card
-      image: "img/spectro-cloud-social-card.png",
+      image: "img/spectrocloud-social-card.png",
       navbar: {
         title: "",
         logo: {
           href: "/",
           target: "self",
-          width: 144,
-          height: 36,
+          width: 105,
+          height: 48,
           alt: "Spectro cloud logo",
           src: "img/spectrocloud-logo-light.svg",
           srcDark: "img/spectrocloud-logo-dark.svg",

sidebars.js

@@ -13,7 +13,7 @@
 
 const privacyIconSVG = `
   <svg style="margin-right: 20px;" role="img" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
-    <path fill="#aeb1be" d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/>
+    <path fill="#1f7a78" d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/>
   </svg>
 `;
 

src/components/CustomTable/CustomTable.module.scss

@@ -19,7 +19,7 @@
   border-radius: 50%;
   border: 8px solid;
   border-color: #e8ebee;
-  border-right-color: #528cdd;
+  border-right-color: var(--ifm-color-primary);
   animation: spin 1s infinite linear;
 }
 

src/components/CveReportsTable/CveReportsTable.tsx

@@ -109,6 +109,14 @@ export default function CveReportsTable() {
   const [activeTabKey, setActiveTabKey] = useState("palette");
   const { colorMode } = useColorMode();
   const { defaultAlgorithm, darkAlgorithm } = theme;
+  const isDark = colorMode === "dark";
+  const customTheme = {
+    algorithm: isDark ? darkAlgorithm : defaultAlgorithm, // Start with the default dark theme
+    token: {
+      colorBgContainer: isDark ? "#012121" : "#F3F0EE",
+      colorPrimary: isDark ? "#44B2AF" : "#1F7A78",
+    },
+  };
 
   useEffect(() => {
     if (isBrowser) {
@@ -172,11 +180,7 @@ export default function CveReportsTable() {
         key: "cve",
         sorter: (a, b) => a.metadata.cve.localeCompare(b.metadata.cve),
         render: (cve: string, record) => {
-          return (
-            <Link to={`/security-bulletins/reports/${record.metadata.uid.toLowerCase()}`} style={{ color: "#1890ff" }}>
-              {cve}
-            </Link>
-          );
+          return <Link to={`/security-bulletins/reports/${record.metadata.uid.toLowerCase()}`}>{cve}</Link>;
         },
       },
       {
@@ -281,7 +285,7 @@ export default function CveReportsTable() {
 
   return (
     <div className={styles.tabPane}>
-      <ConfigProvider theme={{ algorithm: colorMode === "dark" ? darkAlgorithm : defaultAlgorithm }}>
+      <ConfigProvider theme={customTheme}>
         <div className={styles.unsupportedMessage}>
           <Admonition type="warning" title="Unsupported Display Size">
             The current screen size is not supported. Use a larger display to access the CVE table.

src/components/PacksReadme/PacksReadme.antd.css

@@ -7,6 +7,6 @@ p {
   font-size: 16px;
 }
 [data-theme="dark"] .ant-select-tree-list-holder-inner {
-  background-color: #1f1f1f;
-  color: whitesmoke;
+  background-color: #012121;
+  color: var(--ifm-font-color-base);
 }

src/components/PacksReadme/PacksReadme.module.scss

@@ -133,29 +133,29 @@
   }
 }
 [data-theme="dark"] .description {
-  background-color: #1c202b;
+  background-color: #012121;
 }
 [data-theme="light"] .description {
-  background-color: #edeef4;
+  background-color: #bfe3e2;
 }
 [data-theme="dark"] .packDescSecondCol {
-  background-color: black;
-  border: 1px solid #1f263c;
+  background-color: #161514;
+  border: 1px solid var(--ifm-primary-color);
 }
 [data-theme="light"] .packDescSecondCol {
-  background-color: white;
+  background-color: #f3f0ee;
   border: 1px solid #dee1ea;
 }
 [data-theme="light"] .emptyContentDescription {
   color: #545f7e;
 }
 [data-theme="dark"] .emptyContentDescription {
   color: #b5bdd4;
-  background-color: #111726;
+  background-color: var(--ifm-background-color);
 }
 [data-theme="dark"] .emptyContentTitle {
   color: #b5bdd4;
-  background-color: #111726;
+  background-color: var(--ifm-background-color);
 }
 [data-theme="light"] .emptyContentTitle {
   color: #545f7e;

src/components/PointOfInterest/PointOfInterest.module.scss

@@ -14,7 +14,7 @@
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background: #2682fa;
+    background: var(--ifm-color-primary);
     box-shadow:
       0 0 10px rgba(0, 0, 0, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -35,7 +35,7 @@
       animation: pulse 1s infinite;
     }
     &.isVisited {
-      background: #475f74;
+      background: var(--ifm-color-primary-darker);
       &::after {
         animation: none;
       }
@@ -49,15 +49,15 @@
 @keyframes pulse {
   0% {
     transform: scale(1);
-    box-shadow: inset 0 0 1px 1px rgba(38, 130, 250, 0.8);
+    box-shadow: inset 0 0 1px 1px var(--ifm-color-primary-dark);
   }
 
   50% {
-    box-shadow: inset 0 0 1px 1px rgba(38, 130, 250, 0.8);
+    box-shadow: inset 0 0 1px 1px var(--ifm-color-primary-dark);
   }
 
   100% {
     transform: scale(1.6);
-    box-shadow: inset 0 0 1px 1px rgba(38, 130, 250, 0);
+    box-shadow: inset 0 0 1px 1px var(--ifm-color-primary-dark);
   }
 }

src/components/PointOfInterest/PointOfInterest.tsx

@@ -21,7 +21,7 @@ function Point({ description, tooltipPlacement = "right", x, y, label, wrapRef }
       getPopupContainer={(triggerNode) => wrapRef.current || triggerNode}
       trigger={["click"]}
       title={description}
-      color="#091e3b"
+      color="#012121"
       placement={tooltipPlacement as TooltipPlacement}
     >
       <div

src/components/SimpleCardGrid/SimpleCardGrid.module.scss

@@ -3,6 +3,10 @@
   grid-gap: 32px;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 2fr;
+
+  a {
+    text-decoration: none;
+  }
 }
 
 .simpleCard {

src/components/Technologies/CategorySelector/CustomLabel.module.scss

@@ -5,13 +5,6 @@
   padding-top: 5px;
   padding-left: 5px;
   padding-right: 5px;
-}
-[data-theme="dark"] .customLabel {
-  color: white;
-  background-color: #1c202b;
-}
-
-[data-theme="light"] .customLabel {
-  color: black;
-  background-color: #dee1ea;
+  color: var(--ifm-font-color-base);
+  background-color: var(--ifm-dropdown-background-color);
 }