gitea_admin/krishnasales_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nav bar colors added

Browse Source
This commit is contained in:
suryacp23 2026-07-27 16:34:06 +05:30
parent 45e1a2f82c
commit c75e3e0107
10 changed files with 40 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/buttons/Button.tsx
View File

@ -20,11 +20,11 @@ const SIZES: Record<ButtonSize, string> = {
sm: 'h-[34px] px-3.5 text-[13px] rounded-sm', sm: 'h-[34px] px-3.5 text-[13px] rounded-sm',
md: 'h-[42px] px-[18px] text-base rounded-md', md: 'h-[42px] px-[18px] text-base rounded-md',
lg: 'h-[50px] px-6 text-md 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<ButtonVariant, string> = { const VARIANTS: Record<ButtonVariant, string> = {
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', navy: 'bg-navy-900 text-on-navy border border-transparent shadow-sm',
secondary: 'bg-card text-strong border border-border-default shadow-xs', secondary: 'bg-card text-strong border border-border-default shadow-xs',
ghost: 'bg-transparent text-body border border-transparent', ghost: 'bg-transparent text-body border border-transparent',

6
src/components/rv/RecordView.tsx
View File

@ -174,13 +174,13 @@ export function RecordView({
setShowFilters(true); setShowFilters(true);
}} }}
className={cn( 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)]", "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-[var(--z-bg-primary-400)] text-white border border-[var(--z-bg-primary-400)] hover:opacity-90" "bg-[#1F4D36] text-white border border-[#1F4D36] hover:opacity-90"
)} )}
> >
<SlidersHorizontal size={16} className="text-white" /> <SlidersHorizontal size={16} className="text-white" />
{Object.values(activeFilters).filter(Boolean).length > 0 && ( {Object.values(activeFilters).filter(Boolean).length > 0 && (
<span className="absolute -top-1 -right-1 bg-white text-[var(--z-text-primary-400)] text-[10px] w-4 h-4 flex items-center justify-center rounded-full font-bold shadow-sm border border-[var(--z-bg-primary-400)]"> <span className="absolute -top-1 -right-1 bg-white text-[#1F4D36] text-[10px] w-4 h-4 flex items-center justify-center rounded-full font-bold shadow-sm border border-[#1F4D36]">
{Object.values(activeFilters).filter(Boolean).length} {Object.values(activeFilters).filter(Boolean).length}
</span> </span>
)} )}

2
src/screens/AllDailyLogsPage.tsx
View File

@ -38,7 +38,7 @@ export function AllDailyLogsPage() {
{/* Global Floating Action Button for Punch In */} {/* Global Floating Action Button for Punch In */}
<button <button
onClick={() => { setIsCreating(true); setCreateTitle("Punch In"); }} onClick={() => { setIsCreating(true); setCreateTitle("Punch In"); }}
className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[var(--z-bg-primary-400)] rounded-3xl flex items-center justify-center shadow-[0_4px_12px_rgba(var(--z-bg-primary-400-rgb),0.4)] text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer" className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[#1F4D36] rounded-3xl flex items-center justify-center shadow-lg text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer"
> >
<ClipboardList size={24} className="text-white" /> <ClipboardList size={24} className="text-white" />
</button> </button>

2
src/screens/CallsPage.tsx
View File

@ -168,7 +168,7 @@ export function CallsPage() {
{/* Global Floating Action Button for Add Call */} {/* Global Floating Action Button for Add Call */}
<button <button
onClick={() => { setIsCreating(true); setCreateTitle("Log Visit"); }} onClick={() => { setIsCreating(true); setCreateTitle("Log Visit"); }}
className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[var(--z-bg-primary-400)] rounded-3xl flex items-center justify-center shadow-[0_4px_12px_rgba(var(--z-bg-primary-400-rgb),0.4)] text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95" className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[#1F4D36] rounded-3xl flex items-center justify-center shadow-lg text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer"
> >
<Phone size={20} className="text-white" /> <Phone size={20} className="text-white" />
</button> </button>

4
src/screens/ConsoleLayout.tsx
View File

@ -33,12 +33,12 @@ export function ConsoleLayout() {
type="button" type="button"
aria-label="Toggle Menu" aria-label="Toggle Menu"
onClick={() => setIsMenuOpen(true)} 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"
> >
<Menu size={20} /> <Menu size={20} />
</button> </button>
<div className="flex flex-col justify-center leading-none"> <div className="flex flex-col justify-center leading-none">
<span className="text-base font-extrabold text-on-navy tracking-[-0.01em] leading-none nav-title">Krishna Sales</span> <span className="text-white font-extrabold text-on-navy tracking-[-0.01em] leading-none nav-title">Krishna Sales</span>
{/* <span className="text-2xs text-on-navy-muted">Sandbox {APP_ID}{user?.name ? ` · ${user.name}` : ''}</span> */} {/* <span className="text-2xs text-on-navy-muted">Sandbox {APP_ID}{user?.name ? ` · ${user.name}` : ''}</span> */}
</div> </div>
</div> </div>

2
src/screens/DailyLogsPage.tsx
View File

@ -37,7 +37,7 @@ export function DailyLogsPage() {
{/* Global Floating Action Button for Punch In */} {/* Global Floating Action Button for Punch In */}
<button <button
onClick={() => { setIsCreating(true); setCreateTitle("Punch In"); }} onClick={() => { setIsCreating(true); setCreateTitle("Punch In"); }}
className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[var(--z-bg-primary-400)] rounded-3xl flex items-center justify-center shadow-[0_4px_12px_rgba(var(--z-bg-primary-400-rgb),0.4)] text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer" className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[#1F4D36] rounded-3xl flex items-center justify-center shadow-lg text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer"
> >
<ClipboardList size={24} className="text-white" /> <ClipboardList size={24} className="text-white" />
</button> </button>

2
src/screens/OrdersPage.tsx
View File

@ -169,7 +169,7 @@ export function OrdersPage() {
<button <button
onClick={() => { setIsCreating(true); setCreateTitle("Place Order"); }} onClick={() => { setIsCreating(true); setCreateTitle("Place Order"); }}
className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[var(--z-bg-primary-400)] rounded-3xl flex items-center justify-center shadow-[0_4px_12px_rgba(var(--z-bg-primary-400-rgb),0.4)] text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer" className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[#1F4D36] rounded-3xl flex items-center justify-center shadow-lg text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer"
> >
<ShoppingBag size={24} className="text-white" /> <ShoppingBag size={24} className="text-white" />
</button> </button>

2
src/screens/StoresPage.tsx
View File

@ -68,7 +68,7 @@ export function StoresPage() {
{/* Global Floating Action Button for Create Store */} {/* Global Floating Action Button for Create Store */}
<button <button
onClick={() => { setIsCreating(true); setCreateTitle("Create Store"); }} onClick={() => { setIsCreating(true); setCreateTitle("Create Store"); }}
className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[var(--z-bg-primary-400)] rounded-3xl flex items-center justify-center shadow-[0_4px_12px_rgba(var(--z-bg-primary-400-rgb),0.4)] text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer" className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-[#1F4D36] rounded-3xl flex items-center justify-center shadow-lg text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer"
> >
<Store size={24} className="text-white" /> <Store size={24} className="text-white" />
</button> </button>

17
src/screens/screen.css
View File

@ -5,7 +5,7 @@
.nav-menu-icon, .nav-menu-icon,
.nav-title { .nav-title {
color: var(--nav-item-color) color: rgb(248, 221, 221);
} }
.sidebar-menu-icon, .sidebar-menu-icon,
@ -21,7 +21,8 @@
.bottom-nav-icon, .bottom-nav-icon,
.bottom-nav-text { .bottom-nav-text {
color: var(--text-faint); /* fallback */ color: var(--text-faint);
/* fallback */
} }
.bottom-nav-icon.active { .bottom-nav-icon.active {
@ -31,4 +32,16 @@
.bottom-nav-text.active { .bottom-nav-text.active {
color: var(--nav-item-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);
} }

26
src/styles/styles.css
View File

@ -192,9 +192,9 @@
/* root variable */ /* root variable */
:root { :root {
--primary-color: #1d4ed8; --primary-color: #1F4D36;
--primary-color-300: #93c5fd; --primary-color-300: #42785d;
--secondary-color: #f9fafb; --secondary-color: #fdf4e4de;
--font-color: #10182b; --font-color: #10182b;
--font-family: "IBM Plex Sans", serif; --font-family: "IBM Plex Sans", serif;
--light-font-color: #667085; --light-font-color: #667085;
@ -211,10 +211,10 @@
/* Navbar background color */ /* 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-color: #10182b;
--nav-item-active: #1b84ff; --nav-item-active: #1F4D36;
--nav-item-active-bg: #c0d4ed45; --nav-item-active-bg: rgba(31, 77, 54, 0.1);
--nav-item-border-bottom: transparent; --nav-item-border-bottom: transparent;
--nav-dropdown-bg: #fff; --nav-dropdown-bg: #fff;
@ -231,22 +231,22 @@
--nav-left-separator-line: #484848; --nav-left-separator-line: #484848;
/* tiles card */ /* tiles card */
--tiles-card-bg: #fff; --tiles-card-bg: #FFFBF4;
--tiles-card-border: #e5e7eb; --tiles-card-border: #e5e7eb00;
--tiles-font-color: #10182b; --tiles-font-color: #1F4D36;
--tiles-font-size: 16px; --tiles-font-size: 16px;
--tiles-count-size: 20px; --tiles-count-size: 20px;
/* button */ /* button */
--z-btn-primary-bg: #0058be; --z-btn-primary-bg: #1F4D36;
--z-btn-primary-color: #fff; --z-btn-primary-color: #fff;
--primary-btn-active: #196ed0; --primary-btn-active: #1d613f;
--primary-btn-activeClr: #fff; --primary-btn-activeClr: #fff;
--z-btn-secondary-bg: #f4f4f4; --z-btn-secondary-bg: #f4f4f4;
--z-btn-secondary-color: #10182b; --z-btn-secondary-color: #10182b;
--secondary-btn-active-bg: #eaeaea; --secondary-btn-active-bg: #eaeaea;
--z-btn-outline-color: #0058be; --z-btn-outline-color: #1F4D36;
--z-btn-outline-border: #0058be; --z-btn-outline-border: #1F4D36;
--button-height: 36px; --button-height: 36px;
--z-btn-sm-height: 32px; --z-btn-sm-height: 32px;