vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: style top bar workspace header and search wrapper via custom CSS classes

Browse source
This commit is contained in:
vickytechkey 2026-08-20 21:36:08 +05:30
parent e4f136f92a
commit aecaa89913
2 changed files with 67 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/App.tsx
View file

@ -2001,24 +2001,22 @@ export default function App() {
<main className="workspace-container bg-background">
{/* Top Workspace Header */}
<header className="h-16 border-b border-[#D9C5B2] bg-white flex items-center justify-between px-8 sticky top-0 z-30">
<div className="flex items-center gap-2 max-w-md w-full">
<header className="dashboard-header">
<div className="search-wrapper">
<span className="material-symbols-outlined text-secondary">search</span>
<input
type="text"
placeholder="Search products, orders, transactions..."
className="w-full bg-transparent border-none focus:outline-none focus:ring-0 text-sm placeholder:text-secondary-fixed-dim"
/>
</div>
<div className="flex items-center gap-4">
<div className="header-actions">
<button className="text-secondary hover:text-on-surface relative">
<span className="material-symbols-outlined">notifications</span>
<span className="absolute top-1 right-1 w-2 h-2 bg-primary rounded-full"></span>
</button>
<button className="text-secondary hover:text-on-surface">
<span className="material-symbols-outlined">help_outline</span>
</button>
<div className="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-sm">
<div className="avatar-badge">
{CONFIG.logoLetter}
</div>
</div>

63
src/index.css
View file

@ -1557,3 +1557,66 @@ aside.menu {
color: #ffffff;
font-weight: 600;
}
/* Dashboard Top Bar Header */
.dashboard-header {
height: 4rem;
border-bottom: 1px solid var(--border);
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
position: sticky;
top: 0;
z-index: 30;
box-sizing: border-box;
}
.search-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
background-color: var(--surface-container-low);
padding: 0.5rem 1rem;
border-radius: 9999px;
border: 1px solid var(--border);
width: 24rem;
}
.search-wrapper input {
border: none;
background: transparent;
outline: none;
width: 100%;
font-size: 0.875rem;
}
.header-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.avatar-badge {
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--primary-container);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
}
.header-actions button {
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
}