From 63943272bf3c77228628cea590c1eb88a5448ccb Mon Sep 17 00:00:00 2001 From: Fenil Shah <119055286+notlazykid@users.noreply.github.com> Date: Fri, 24 Oct 2025 15:38:45 +0530 Subject: [PATCH 1/2] Diff color left nav for Agentic security --- .../apps/dashboard/components/layouts/leftnav/LeftNav.css | 7 +++++++ .../apps/dashboard/components/layouts/leftnav/LeftNav.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.css index 4b4d4d7ec6..6f53a680f4 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.css +++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.css @@ -17,4 +17,11 @@ .Polaris-Navigation { height: calc(100% - 70px); overflow-y: hidden !important; +} + +/* Agentic Security gradient background */ +body:has(.agentic-security-nav) .Polaris-Navigation { + background: linear-gradient(180deg, #ffffff 40%, #F4EFFF 100%) !important; + border-right: 1px solid transparent !important; + border-image: linear-gradient(180deg, #ffffff 0%, #CDB4FF 50%) 1 !important; } \ No newline at end of file diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.js index a9675010fd..fd539eed2a 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.js +++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.js @@ -550,7 +550,7 @@ export default function LeftNav() { }, [dashboardCategory, leftNavSelected]) const navigationMarkup = ( -
+
Date: Mon, 27 Oct 2025 19:47:20 +0530 Subject: [PATCH 2/2] Top bar and left nav changes --- .../web/polaris_web/web/public/white_logo.svg | 4 ++++ .../components/layouts/header/Headers.css | 17 +++++++++++++++++ .../components/layouts/header/Headers.js | 4 +++- .../components/layouts/leftnav/LeftNav.css | 6 ++---- .../src/apps/dashboard/pages/home/HomePage.js | 4 +++- 5 files changed, 29 insertions(+), 6 deletions(-) create mode 100644 apps/dashboard/web/polaris_web/web/public/white_logo.svg diff --git a/apps/dashboard/web/polaris_web/web/public/white_logo.svg b/apps/dashboard/web/polaris_web/web/public/white_logo.svg new file mode 100644 index 0000000000..69e1f4c980 --- /dev/null +++ b/apps/dashboard/web/polaris_web/web/public/white_logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.css index 00aef2b842..15b779f40d 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.css +++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.css @@ -16,4 +16,21 @@ .local_icon .Polaris-Icon__Svg { fill: #2C6ECB !important; +} + +/* Agentic Security top bar */ +body:has(.agentic-security-nav) .Polaris-TopBar { + background: linear-gradient(90deg, #5C11E2 40%, #804ADC 60%) !important; +} + +body:has(.agentic-security-nav) .Polaris-TopBar__SecondaryMenu .Polaris-Icon svg { + fill: #ffffff !important; +} + +body:has(.agentic-security-nav) .Polaris-TopBar button:hover { + background: rgba(255, 255, 255, 0.1) !important; +} + +body:has(.agentic-security-nav) .logo img { + max-width: 78px !important; } \ No newline at end of file diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.js index df3df0134f..3d7d88a1e6 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.js +++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/header/Headers.js @@ -44,6 +44,8 @@ export default function Header() { const dashboardCategory = PersistStore.getState().dashboardCategory; const setDashboardCategory = PersistStore.getState().setDashboardCategory + const logoSrc = dashboardCategory === "Agentic Security" ? "/public/white_logo.svg" : "/public/akto_name_with_logo.svg"; + /* Search bar */ //const allRoutes = Store((state) => state.allRoutes) const allCollections = PersistStore((state) => state.allCollections) @@ -237,7 +239,7 @@ export default function Header() {
window.location.href = "/dashboard/observe/inventory"} className='logo'> - Akto Logo + Akto Logo
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.css index 6f53a680f4..0837a0ec8c 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.css +++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/layouts/leftnav/LeftNav.css @@ -19,9 +19,7 @@ overflow-y: hidden !important; } -/* Agentic Security gradient background */ +/* Agentic Security left nav */ body:has(.agentic-security-nav) .Polaris-Navigation { - background: linear-gradient(180deg, #ffffff 40%, #F4EFFF 100%) !important; - border-right: 1px solid transparent !important; - border-image: linear-gradient(180deg, #ffffff 0%, #CDB4FF 50%) 1 !important; + background: #ffffff !important; } \ No newline at end of file diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/home/HomePage.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/home/HomePage.js index c40c88a4e7..afcd4d5831 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/home/HomePage.js +++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/home/HomePage.js @@ -3,15 +3,17 @@ import Header from "../../components/layouts/header/Headers" import LeftNav from "../../components/layouts/leftnav/LeftNav" import Store from "../../store"; import { Outlet } from "react-router-dom"; +import PersistStore from "../../../main/PersistStore"; function HomePage() { const leftNavCollapsed = Store(state => state.leftNavCollapsed) + const dashboardCategory = PersistStore((state) => state.dashboardCategory) || "API Security"; const logo = { width: 78, topBarSource: - '/public/akto_name_with_logo.svg', + dashboardCategory === "Agentic Security" ? 'White%20logo.svg' : 'akto_name_with_logo.svg', url: '/dashboard/observe/inventory', accessibilityLabel: 'Akto Icon', };