Merge branch 'main' into api-docs

Author: sweta1308

how-to-guides/data-insights/cost-analysis.mdx

@@ -11,9 +11,9 @@ Gain valuable insights into your resource allocation and utilization with `Cost
 
 ## Supported Connectors
 
-| Connector          | Status                       |
-| :----------------- | :--------------------------- |
-| Snowflake          | <Icon name="check" /> |
+| Connector          | Status                                     |
+| :----------------- | :----------------------------------------- |
+| Snowflake          | <Icon icon="check" color="#44a046" />    |
 
 ## Requirements
 To have cost analysis data available you will need to execute the below workflows after the metadata ingestion has run.
@@ -68,6 +68,6 @@ The table showcases frequently accessed data assets, detailing their names, last
 
 <img noZoom src="/public/images/features/data-insight/cost-analysis/frequently-used-assets.png" alt="Frequently Used Assets" />
 
-<Card title="Configure the Data Insights Report" href="/how-to-guides/data-insights/email-report" >
+<Card title="Configure the Data Insights Report" href="/how-to-guides/data-insights/email-report">
     Email the data insights report to Admins and Teams at the desired frequency.
-  </Card>
+</Card>

loader.js

@@ -0,0 +1,53 @@
+(function() {
+  const createLoader = () => {
+    const existing = document.getElementById('page-loader');
+    if (existing) existing.remove();
+
+    const loader = document.createElement('div');
+    loader.id = 'page-loader';
+    loader.className = 'page-loader';
+    document.body.appendChild(loader);
+
+    // Animate to 70%
+    requestAnimationFrame(() => loader.style.width = '70%');
+
+    return loader;
+  };
+
+  const finishLoader = (loader) => {
+    if (!loader) return;
+    loader.style.width = '100%';
+    setTimeout(() => loader.remove(), 300);
+  };
+
+  const observeContent = (loader) => {
+    const content = document.querySelector('main') || document.body; // adjust to your main content selector
+    if (!content) return;
+
+    const observer = new MutationObserver(() => {
+      finishLoader(loader);
+      observer.disconnect();
+    });
+
+    observer.observe(content, { childList: true, subtree: true });
+  };
+
+  document.addEventListener('click', function(e) {
+    const link = e.target.closest('a');
+    const sidebarItem = e.target.closest('[href]');
+    const clickedElement = link || sidebarItem;
+
+    if (
+      clickedElement &&
+      clickedElement.href &&
+      clickedElement.href.includes(window.location.origin) &&
+      !clickedElement.href.includes('#')
+    ) {
+      const loader = createLoader();
+      observeContent(loader);
+
+      // Optional fallback
+      setTimeout(() => finishLoader(loader), 5000);
+    }
+  });
+})();

public/globals.css

@@ -490,6 +490,29 @@ a.link:hover {
   width: fit-content;
 }
 
+/* Hide first breadcrumb items using CSS */
+.breadcrumb-item:first-child {
+  display: none;
+}
+
+.breadcrumb-item:last-of-type a {
+  color: #414651;
+  pointer-events: none; 
+  cursor: text;
+  text-decoration: none;
+}
+
+#page-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0%;
+  height: 3px;
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+  z-index: 9999;
+  transition: width 0.3s ease;
+}
+
 #navbar .border-b {
   border: none;
 }
@@ -509,7 +532,7 @@ a.link:hover {
 
 #navbar .nav-tabs .nav-tabs-item {
   padding: 12px 24px;
-  font-size: 18px;
+  font-size: 16px;
   white-space: nowrap;
   flex-shrink: 0;
   color: #414651;
@@ -529,6 +552,7 @@ a.link:hover {
   color: white;
   background-color: #252B37;
   border-radius: 100px;
+  font-weight: 600;
 }
 
 #navbar .h-10 {
@@ -541,6 +565,10 @@ a.link:hover {
   font-weight: 600;
 }
 
+.nav-logo {
+  height: 36px;
+}
+
 .navbar-link a:hover {
   color: #181D27;
   background-color: transparent;
@@ -735,6 +763,7 @@ body:has(.homepage-container) #search-bar-entry {
 
 .homepage-search-input::placeholder {
   color: #CECFD2;
+  font-size: 18px;
 }
 
 .homepage-search-input:hover {
@@ -914,4 +943,13 @@ article iframe,
 #chat-assistant-sheet {
   margin-top: 2rem !important;
   min-height: 90% !important;
-}
+}
+
+.chat-assistant-floating-input {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  left: auto !important;
+  margin: 0;
+  z-index: 50;
+}

public/images/icons/collate-logo.svg

@@ -17,7 +17,7 @@
   border-radius: 12px;
   border: 1px solid #EAECF5;
   display: flex;
-  height: 640px;
+  height: 612px;
   overflow: hidden;
   position: relative;
   padding: 40px 40px 40px 0px;
@@ -65,19 +65,20 @@
 .sidebar-item {
   display: block;
   width: 100%;
-  padding: 12px 20px;
-  font-size: 18px;
+  padding: 12px 22px;
+  font-size: 16px;
   color: #535862;
   cursor: pointer;
   white-space: nowrap;
   flex-shrink: 0;
   text-align: right;
   font-weight: 500;
+  border-right: 2px solid transparent;
 }
 
 .sidebar-item:hover {
   color: #414651;
-  border-right: 1px solid #D5D9EB;
+  border-right: 2px solid #D5D9EB;
 }
 
 .sidebar-item.active {
@@ -120,7 +121,7 @@
 .integration-card span {
   color: #181D27;
   font-weight: 500;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 120%;
 }