Krow/krow_talent_app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update position page design

Browse Source
This commit is contained in:
Aravind
2026-08-13 21:41:14 +05:30
parent 6340962907
commit 1c653264b5
124 changed files with 5746 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/layouts/AdminLayout.jsx
View File

@@ -179,7 +179,11 @@ export default function AdminLayout() {
return (
<AssistantPanelProvider role="admin" pathname={location.pathname}>
<div className="min-h-screen bg-surface-subtle">
{/* Transparent so the ambient canvas painted behind the app reads through.
An opaque shell here would cover it and every Admin page would lose the
tint at once — which is exactly why the canvas is one layer and not a
background repeated on each page. */}
<div className="min-h-screen">
{/* Single bar header in the new Admin design system */}
<header className="sticky top-0 z-40 border-b border-border bg-white/85 backdrop-blur-xl">
<div className="flex h-14 items-center justify-between gap-4 px-4 lg:px-6">

31
src/layouts/Layout.jsx
View File

@@ -117,8 +117,11 @@ export default function Layout() {
navigate(`/positions${param}`);
};
/* The shell is transparent so the ambient canvas reads through. The coloured
mesh and hard-coded slate that used to sit here were this product's own
background, which is the thing the theme pass exists to unify. */
return (
<div className="min-h-screen gradient-mesh bg-[#F8FAFC]">
<div className="min-h-screen">
{/* Header */}
<header className="sticky top-0 z-40 glass border-b border-white/40">
<div className="mx-auto max-w-container-wide px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
@@ -144,7 +147,7 @@ export default function Layout() {
{isActive(item.path) && (
<motion.div
layoutId="navPill"
className="absolute inset-0 rounded-full bg-[#0A39DF]"
className="absolute inset-0 rounded-full bg-[#0838E0]"
transition={{ type: 'spring', stiffness: 400, damping: 30 }}
/>
)}
@@ -157,7 +160,7 @@ export default function Layout() {
{/* Role switcher */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="hidden md:inline-flex items-center gap-1.5 h-9 px-3 rounded-full border border-white/60 bg-white/70 backdrop-blur-sm text-[12px] font-semibold text-[#0A39DF] hover:bg-white transition-colors">
<button className="hidden md:inline-flex items-center gap-1.5 h-9 px-3 rounded-full border border-white/60 bg-white/70 backdrop-blur-sm text-[12px] font-semibold text-[#0838E0] hover:bg-white transition-colors">
<Users className="w-3.5 h-3.5" />
{ROLE_LABEL[activeRole]}
<ChevronDown className="w-3 h-3" />
@@ -168,7 +171,7 @@ export default function Layout() {
<DropdownMenuItem
key={r}
onClick={() => handleRoleChange(r)}
className={cn('cursor-pointer', r === activeRole && 'text-[#0A39DF] font-semibold')}
className={cn('cursor-pointer', r === activeRole && 'text-[#0838E0] font-semibold')}
>
{ROLE_LABEL[r]}
</DropdownMenuItem>
@@ -179,7 +182,7 @@ export default function Layout() {
{/* User menu */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="hidden md:inline-flex items-center justify-center w-9 h-9 rounded-full bg-[#0A39DF] text-white text-[13px] font-semibold shadow-lg shadow-blue-500/20 hover:scale-105 transition-transform">
<button className="hidden md:inline-flex items-center justify-center w-9 h-9 rounded-full bg-[#0838E0] text-white text-[13px] font-semibold shadow-lg shadow-blue-500/20 hover:scale-105 transition-transform">
{user?.full_name?.[0]?.toUpperCase() || user?.email?.[0]?.toUpperCase() || <UserIcon className="w-4 h-4" />}
</button>
</DropdownMenuTrigger>
@@ -254,7 +257,7 @@ export default function Layout() {
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search positions..."
type="text"
className="w-full pl-9 pr-4 h-9 text-[13px] rounded-full border border-white/60 bg-white/70 backdrop-blur-sm focus:bg-white focus:border-[#0A39DF] focus:outline-none transition-all"
className="w-full pl-9 pr-4 h-9 text-[13px] rounded-full border border-white/60 bg-white/70 backdrop-blur-sm focus:bg-white focus:border-[#0838E0] focus:outline-none transition-all"
/>
</form>
@@ -263,7 +266,7 @@ export default function Layout() {
<select
value={statusFilter}
onChange={(e) => handleStatusChange(e.target.value)}
className="appearance-none w-full sm:w-auto h-9 pl-3 pr-8 text-[13px] font-medium rounded-full border border-white/60 bg-white/70 backdrop-blur-sm focus:border-[#0A39DF] focus:outline-none cursor-pointer"
className="appearance-none w-full sm:w-auto h-9 pl-3 pr-8 text-[13px] font-medium rounded-full border border-white/60 bg-white/70 backdrop-blur-sm focus:border-[#0838E0] focus:outline-none cursor-pointer"
>
{STATUS_OPTIONS.map((s) => (
<option key={s} value={s}>{s}</option>
@@ -273,7 +276,7 @@ export default function Layout() {
</div>
<button
onClick={() => navigate('/positions/new')}
className="inline-flex items-center gap-1.5 bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[13px] font-semibold px-4 py-2 rounded-full transition-all shrink-0 hover:scale-[1.02] shadow-sm"
className="inline-flex items-center gap-1.5 bg-[#0838E0] hover:bg-[#062BAF] text-white text-[13px] font-semibold px-4 py-2 rounded-full transition-all shrink-0 hover:scale-[1.02] shadow-sm"
>
<Plus className="w-4 h-4" />
{/* The second row leaves room for the label on mobile too */}
@@ -299,7 +302,7 @@ export default function Layout() {
onClick={() => { handleRoleChange(r); setMenuOpen(false); }}
className={cn(
'flex-1 py-2 rounded-xl text-[12px] font-semibold transition-all',
r === activeRole ? 'bg-[#0A39DF] text-white' : 'bg-white/60 text-[#374151]'
r === activeRole ? 'bg-[#0838E0] text-white' : 'bg-white/60 text-[#374151]'
)}
>
{ROLE_LABEL[r]}
@@ -314,7 +317,7 @@ export default function Layout() {
className={cn(
'px-4 py-2.5 rounded-xl text-[14px] font-medium transition-all',
isActive(item.path)
? 'bg-[#EFF6FF] text-[#0A39DF]'
? 'bg-[#EEF3FE] text-[#0838E0]'
: 'text-[#374151] hover:bg-white/60'
)}
>
@@ -325,7 +328,7 @@ export default function Layout() {
onClick={() => { setMenuOpen(false); isTalent ? window.dispatchEvent(new CustomEvent('krow:open-owliver')) : navigate('/identity'); }}
className={cn(
'px-4 py-2.5 rounded-xl text-[14px] font-medium transition-all text-left w-full',
isActive('/identity') ? 'bg-[#EFF6FF] text-[#0A39DF]' : 'text-[#374151] hover:bg-white/60'
isActive('/identity') ? 'bg-[#EEF3FE] text-[#0838E0]' : 'text-[#374151] hover:bg-white/60'
)}
>
{isTalent ? 'Build Profile with Owliver' : 'Create KROW Identity'}
@@ -335,7 +338,7 @@ export default function Layout() {
onClick={() => setMenuOpen(false)}
className={cn(
'px-4 py-2.5 rounded-xl text-[14px] font-medium transition-all',
isActive('/me') ? 'bg-[#EFF6FF] text-[#0A39DF]' : 'text-[#374151] hover:bg-white/60'
isActive('/me') ? 'bg-[#EEF3FE] text-[#0838E0]' : 'text-[#374151] hover:bg-white/60'
)}
>
My KROW ID
@@ -345,7 +348,7 @@ export default function Layout() {
onClick={() => setMenuOpen(false)}
className={cn(
'px-4 py-2.5 rounded-xl text-[14px] font-medium transition-all',
isActive('/profile') ? 'bg-[#EFF6FF] text-[#0A39DF]' : 'text-[#374151] hover:bg-white/60'
isActive('/profile') ? 'bg-[#EEF3FE] text-[#0838E0]' : 'text-[#374151] hover:bg-white/60'
)}
>
Profile
@@ -360,7 +363,7 @@ export default function Layout() {
{!isTalent && (
<button
onClick={() => { setMenuOpen(false); navigate('/positions/new'); }}
className="mt-2 inline-flex items-center justify-center gap-1.5 bg-[#0A39DF] text-white text-[14px] font-semibold px-4 py-2.5 rounded-xl transition-all"
className="mt-2 inline-flex items-center justify-center gap-1.5 bg-[#0838E0] text-white text-[14px] font-semibold px-4 py-2.5 rounded-xl transition-all"
>
<Plus className="w-4 h-4" />
New Position