From c75e3e010785c2c925f9ba58216bea36014911aa Mon Sep 17 00:00:00 2001 From: suryacp23 Date: Mon, 27 Jul 2026 16:34:06 +0530 Subject: [PATCH] nav bar colors added --- src/components/buttons/Button.tsx | 4 ++-- src/components/rv/RecordView.tsx | 6 +++--- src/screens/AllDailyLogsPage.tsx | 2 +- src/screens/CallsPage.tsx | 2 +- src/screens/ConsoleLayout.tsx | 4 ++-- src/screens/DailyLogsPage.tsx | 2 +- src/screens/OrdersPage.tsx | 2 +- src/screens/StoresPage.tsx | 2 +- src/screens/screen.css | 17 +++++++++++++++-- src/styles/styles.css | 26 +++++++++++++------------- 10 files changed, 40 insertions(+), 27 deletions(-) diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx index 44b5df6..ec2746f 100644 --- a/src/components/buttons/Button.tsx +++ b/src/components/buttons/Button.tsx @@ -20,11 +20,11 @@ const SIZES: Record = { sm: 'h-[34px] px-3.5 text-[13px] rounded-sm', md: 'h-[42px] px-[18px] text-base rounded-md', lg: 'h-[50px] px-6 text-md rounded-md', - fab: 'h-[56px] w-[56px] text-sm rounded-full', + fab: 'h-[56px] w-[56px] text-sm rounded-full !bg-[#1F4D36] text-white shadow-lg', }; const VARIANTS: Record = { - primary: 'z-btn border border-transparent shadow-blue-600/30', + primary: 'z-btn border border-transparent shadow-emerald-900/30', navy: 'bg-navy-900 text-on-navy border border-transparent shadow-sm', secondary: 'bg-card text-strong border border-border-default shadow-xs', ghost: 'bg-transparent text-body border border-transparent', diff --git a/src/components/rv/RecordView.tsx b/src/components/rv/RecordView.tsx index 474fb7f..3e964f4 100644 --- a/src/components/rv/RecordView.tsx +++ b/src/components/rv/RecordView.tsx @@ -174,13 +174,13 @@ export function RecordView({ setShowFilters(true); }} className={cn( - "relative flex items-center justify-center w-11 h-11 rounded-lg transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-[var(--z-bg-primary-400)]", - "bg-[var(--z-bg-primary-400)] text-white border border-[var(--z-bg-primary-400)] hover:opacity-90" + "relative flex items-center justify-center w-11 h-11 rounded-lg transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-[#1F4D36]", + "bg-[#1F4D36] text-white border border-[#1F4D36] hover:opacity-90" )} > {Object.values(activeFilters).filter(Boolean).length > 0 && ( - + {Object.values(activeFilters).filter(Boolean).length} )} diff --git a/src/screens/AllDailyLogsPage.tsx b/src/screens/AllDailyLogsPage.tsx index c0c9dec..0afbf32 100644 --- a/src/screens/AllDailyLogsPage.tsx +++ b/src/screens/AllDailyLogsPage.tsx @@ -38,7 +38,7 @@ export function AllDailyLogsPage() { {/* Global Floating Action Button for Punch In */} diff --git a/src/screens/CallsPage.tsx b/src/screens/CallsPage.tsx index 69f713e..fa96502 100644 --- a/src/screens/CallsPage.tsx +++ b/src/screens/CallsPage.tsx @@ -168,7 +168,7 @@ export function CallsPage() { {/* Global Floating Action Button for Add Call */} diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx index 017e13c..0a88a6a 100644 --- a/src/screens/ConsoleLayout.tsx +++ b/src/screens/ConsoleLayout.tsx @@ -33,12 +33,12 @@ export function ConsoleLayout() { type="button" aria-label="Toggle Menu" onClick={() => setIsMenuOpen(true)} - className="inline-flex items-center justify-center size-9 rounded-md text-on-navy-muted hover:text-white hover:bg-white/10 transition-colors duration-150 cursor-pointer nav-menu-icon" + className="inline-flex items-center justify-center size-9 rounded-md text-white hover:text-white hover:bg-white/10 transition-colors duration-150 cursor-pointer nav-menu-icon" >
- Krishna Sales + Krishna Sales {/* Sandbox {APP_ID}{user?.name ? ` ยท ${user.name}` : ''} */}
diff --git a/src/screens/DailyLogsPage.tsx b/src/screens/DailyLogsPage.tsx index 4f12025..035a086 100644 --- a/src/screens/DailyLogsPage.tsx +++ b/src/screens/DailyLogsPage.tsx @@ -37,7 +37,7 @@ export function DailyLogsPage() { {/* Global Floating Action Button for Punch In */} diff --git a/src/screens/OrdersPage.tsx b/src/screens/OrdersPage.tsx index 5833822..5b141af 100644 --- a/src/screens/OrdersPage.tsx +++ b/src/screens/OrdersPage.tsx @@ -169,7 +169,7 @@ export function OrdersPage() { diff --git a/src/screens/StoresPage.tsx b/src/screens/StoresPage.tsx index 6daba45..0e0baf6 100644 --- a/src/screens/StoresPage.tsx +++ b/src/screens/StoresPage.tsx @@ -68,7 +68,7 @@ export function StoresPage() { {/* Global Floating Action Button for Create Store */} diff --git a/src/screens/screen.css b/src/screens/screen.css index 19a0507..417810d 100644 --- a/src/screens/screen.css +++ b/src/screens/screen.css @@ -5,7 +5,7 @@ .nav-menu-icon, .nav-title { - color: var(--nav-item-color) + color: rgb(248, 221, 221); } .sidebar-menu-icon, @@ -21,7 +21,8 @@ .bottom-nav-icon, .bottom-nav-text { - color: var(--text-faint); /* fallback */ + color: var(--text-faint); + /* fallback */ } .bottom-nav-icon.active { @@ -31,4 +32,16 @@ .bottom-nav-text.active { color: var(--nav-item-active); +} + +.sidebar-menu-icon:hover, +.sidebar-item:hover, +.bottom-nav-icon:hover, +.bottom-nav-text:hover { + color: var(--nav-item-active); +} + +.sidebar-item:hover, +.bottom-nav-icon:hover { + background: var(--nav-item-active-bg); } \ No newline at end of file diff --git a/src/styles/styles.css b/src/styles/styles.css index ca559c1..77668b6 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -192,9 +192,9 @@ /* root variable */ :root { - --primary-color: #1d4ed8; - --primary-color-300: #93c5fd; - --secondary-color: #f9fafb; + --primary-color: #1F4D36; + --primary-color-300: #42785d; + --secondary-color: #fdf4e4de; --font-color: #10182b; --font-family: "IBM Plex Sans", serif; --light-font-color: #667085; @@ -211,10 +211,10 @@ /* Navbar background color */ - --nav-bg-color: #fff; + --nav-bg-color: linear-gradient(91deg, #063b21 0.17%, #0d663a 99.89%); --nav-item-color: #10182b; - --nav-item-active: #1b84ff; - --nav-item-active-bg: #c0d4ed45; + --nav-item-active: #1F4D36; + --nav-item-active-bg: rgba(31, 77, 54, 0.1); --nav-item-border-bottom: transparent; --nav-dropdown-bg: #fff; @@ -231,22 +231,22 @@ --nav-left-separator-line: #484848; /* tiles card */ - --tiles-card-bg: #fff; - --tiles-card-border: #e5e7eb; - --tiles-font-color: #10182b; + --tiles-card-bg: #FFFBF4; + --tiles-card-border: #e5e7eb00; + --tiles-font-color: #1F4D36; --tiles-font-size: 16px; --tiles-count-size: 20px; /* button */ - --z-btn-primary-bg: #0058be; + --z-btn-primary-bg: #1F4D36; --z-btn-primary-color: #fff; - --primary-btn-active: #196ed0; + --primary-btn-active: #1d613f; --primary-btn-activeClr: #fff; --z-btn-secondary-bg: #f4f4f4; --z-btn-secondary-color: #10182b; --secondary-btn-active-bg: #eaeaea; - --z-btn-outline-color: #0058be; - --z-btn-outline-border: #0058be; + --z-btn-outline-color: #1F4D36; + --z-btn-outline-border: #1F4D36; --button-height: 36px; --z-btn-sm-height: 32px;