Add light blue banner, blue when clicking sidebar + fix link in docusaurus.config.js (#5627)

* typo

* pro docs tab coloring

* sidebar selection blue

* redirecting missing

4 files changed, 14 insertions, 5 deletions

diff --git a/website/content/pro/main-menu/data-connectors/single-widget.md b/website/content/pro/main-menu/data-connectors/single-widget.md
index 1f32de98c06..78e92ead6e4 100644
--- a/website/content/pro/main-menu/data-connectors/single-widget.md
+++ b/website/content/pro/main-menu/data-connectors/single-widget.md
@@ -12,4 +12,4 @@ If your endpoint requires additional headers, don't worry. You can easily add th
 
 In addition, if your API endpoint doesn't return a a simple JSON but a nested architecture, you will be prompted with a "Data Key" parameter which you can use to grab the data of interest.
 
-If you want to do something more custom, you should look into creating [your own backend](docs/docs/pro/main-menu/data-connectors/advanced.md), or reach out to OpenBB for support.
+If you want to do something more custom, you should look into creating [your own backend](/pro/main-menu/data-connectors/advanced.md), or reach out to OpenBB for support.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 82cf9dc12e9..c559d67d072 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -35,8 +35,8 @@ const config = {
       {
         redirects: [
           {
-            from: "/terminal/usage/intros/forecasting",
-            to: "/terminal/usage/intros/forecast",
+            from: "/terminal/data-available/forecasting",
+            to: "/terminal/data-available/forecast",
           },
         ],
       },
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 3a8764aa326..e601c5095c2 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -355,6 +355,12 @@
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#062d48", endColorstr="#060709", GradientType=1);
 }
 
+/* convert to css tag */
+.header_docs_pro {
+  background: rgb(2,0,36);background: rgb(2,0,36);
+  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(36,108,155,1) 13%, rgba(66,154,205,1) 22%, rgba(43,85,107,1) 42%, rgba(12,36,53,1) 61%, rgba(6,6,6,1) 100%);
+}
+
 table {
   border-collapse: collapse;
   border: none;
diff --git a/website/src/theme/Navbar/Layout/index.js b/website/src/theme/Navbar/Layout/index.js
index 9412a3a8ae0..71d3074a687 100644
--- a/website/src/theme/Navbar/Layout/index.js
+++ b/website/src/theme/Navbar/Layout/index.js
@@ -29,7 +29,8 @@ export default function NavbarLayout({ children }) {
   const cleanedPath = pathname.replace(/\/v\d+/, "");
 
   useEffect(() => {
-    if (cleanedPath.startsWith("/terminal")) {
+    if (cleanedPath.startsWith("/terminal") ||
+      cleanedPath.startsWith("/pro")) {
       document.documentElement.style.setProperty(
         "--ifm-color-primary",
         "#669DCB",
@@ -57,6 +58,7 @@ export default function NavbarLayout({ children }) {
         "border-b border-grey-600 lg:px-12",
         {
           header_docs_terminal: cleanedPath.startsWith("/terminal"),
+          header_docs_pro: cleanedPath.startsWith("/pro"),
           header_docs_sdk:
             cleanedPath.startsWith("/sdk") ||
             cleanedPath.startsWith("/platform"),
@@ -65,7 +67,8 @@ export default function NavbarLayout({ children }) {
             !cleanedPath.startsWith("/terminal") &&
             !cleanedPath.startsWith("/sdk") &&
             !cleanedPath.startsWith("/platform") &&
-            !cleanedPath.startsWith("/bot"),
+            !cleanedPath.startsWith("/bot") &&
+            !cleanedPath.startsWith("/pro"),
         },
         "navbar",
         "navbar--fixed-top",