fix(theme): Revert incorrect 'Ersen' branding to '777 Wolfpack'
Some checks are pending
Deploy to Production / deploy (push) Waiting to run
Test / backend-test (push) Waiting to run
Test / frontend-test (push) Waiting to run

- Restored original 777 Wolfpack logos and titles
- Corrected terminology in Navbar, Breadcrumbs, and Login Page
- Reverted cyber-themed labels to project-appropriate operations terms
This commit is contained in:
fullsizemalt 2025-12-19 19:20:58 -08:00
parent 876432e458
commit 6cb668bc92
4 changed files with 51 additions and 40 deletions

View file

@ -7,9 +7,8 @@ import {
Command, Command,
Bell, Bell,
LogOut, LogOut,
Search,
Settings, Settings,
Shield,
Terminal
} from 'lucide-react'; } from 'lucide-react';
import { usePermissions } from '../../hooks/usePermissions'; import { usePermissions } from '../../hooks/usePermissions';
import { getFilteredNavSections, type NavSection } from '../../lib/navigation'; import { getFilteredNavSections, type NavSection } from '../../lib/navigation';
@ -49,17 +48,19 @@ export function Navbar({ onOpenMobileMenu }: NavbarProps) {
<div className="flex items-center gap-12"> <div className="flex items-center gap-12">
<Link to="/dashboard" className="flex items-center gap-3 group relative z-50"> <Link to="/dashboard" className="flex items-center gap-3 group relative z-50">
<div className="relative"> <div className="relative">
<div className="w-9 h-9 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20 group-hover:scale-105 transition-transform duration-500"> <img
<Shield className="text-white" size={20} strokeWidth={2.5} /> src="/assets/logo-777-wolfpack.jpg"
</div> alt="777 Wolfpack"
<div className="absolute -bottom-1 -right-1 w-3 h-3 bg-emerald-500 rounded-full border-2 border-white dark:border-[#050505] animate-pulse" /> className="w-9 h-9 rounded-lg shadow-md ring-1 ring-slate-900/5 group-hover:scale-105 transition-transform duration-500"
/>
<div className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-emerald-500 rounded-full border-2 border-white dark:border-[#050505] animate-pulse" />
</div> </div>
<div className="hidden sm:block"> <div className="hidden sm:block">
<h1 className="text-sm font-bold text-slate-900 dark:text-white leading-tight tracking-tighter uppercase italic"> <h1 className="text-sm font-bold text-slate-900 dark:text-white leading-tight tracking-tighter uppercase italic">
ERSEN OS 777 Wolfpack
</h1> </h1>
<p className="text-[9px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-[0.3em] leading-none"> <p className="text-[9px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-[0.3em] leading-none">
Operational Node Operations Terminal
</p> </p>
</div> </div>
</Link> </Link>
@ -83,8 +84,8 @@ export function Navbar({ onOpenMobileMenu }: NavbarProps) {
onClick={() => dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))} onClick={() => dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}
className="hidden md:flex items-center gap-3 px-4 py-2 text-xs font-bold text-slate-500 bg-slate-100/50 hover:bg-white dark:bg-slate-900/50 dark:hover:bg-slate-800 transition-all rounded-full border border-slate-200/50 dark:border-slate-800 group" className="hidden md:flex items-center gap-3 px-4 py-2 text-xs font-bold text-slate-500 bg-slate-100/50 hover:bg-white dark:bg-slate-900/50 dark:hover:bg-slate-800 transition-all rounded-full border border-slate-200/50 dark:border-slate-800 group"
> >
<Terminal size={12} className="group-hover:text-indigo-500 transition-colors" /> <Search size={12} className="group-hover:text-indigo-500 transition-colors" />
<span className="uppercase tracking-widest">Execute...</span> <span className="uppercase tracking-widest">Search...</span>
<kbd className="hidden lg:inline-flex h-5 items-center gap-1 rounded bg-slate-200 dark:bg-slate-800 px-1.5 font-mono text-[9px] text-slate-500"> <kbd className="hidden lg:inline-flex h-5 items-center gap-1 rounded bg-slate-200 dark:bg-slate-800 px-1.5 font-mono text-[9px] text-slate-500">
K K
</kbd> </kbd>
@ -152,9 +153,9 @@ function UserDropdown() {
className="absolute top-full right-0 mt-3 w-64 p-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-2xl border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl z-50 ring-1 ring-black/5" className="absolute top-full right-0 mt-3 w-64 p-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-2xl border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl z-50 ring-1 ring-black/5"
> >
<div className="px-3 py-3 border-b border-slate-100 dark:border-slate-800 mb-2"> <div className="px-3 py-3 border-b border-slate-100 dark:border-slate-800 mb-2">
<p className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Authenticated As</p> <p className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Authenticated</p>
<p className="text-sm font-bold text-slate-900 dark:text-white truncate"> <p className="text-sm font-bold text-slate-900 dark:text-white truncate">
{user?.name || 'Authorized Operator'} {user?.name || 'Administrator'}
</p> </p>
<p className="text-[10px] text-slate-500 truncate font-mono mt-1"> <p className="text-[10px] text-slate-500 truncate font-mono mt-1">
{user?.email} {user?.email}
@ -167,7 +168,7 @@ function UserDropdown() {
className="flex items-center gap-3 px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 dark:text-slate-400 dark:hover:text-indigo-400 dark:hover:bg-indigo-500/10 rounded-xl transition-all" className="flex items-center gap-3 px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 dark:text-slate-400 dark:hover:text-indigo-400 dark:hover:bg-indigo-500/10 rounded-xl transition-all"
> >
<Settings size={14} /> <Settings size={14} />
Terminal Config Settings
</Link> </Link>
<button <button
@ -178,7 +179,7 @@ function UserDropdown() {
className="w-full flex items-center gap-3 px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/20 rounded-xl transition-all" className="w-full flex items-center gap-3 px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/20 rounded-xl transition-all"
> >
<LogOut size={14} /> <LogOut size={14} />
Terminate Session Sign Out
</button> </button>
</motion.div> </motion.div>
)} )}
@ -224,7 +225,7 @@ function NavDropdown({ section, currentPath }: { section: NavSection, currentPat
className="absolute top-full left-0 mt-2 w-72 p-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-2xl border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl z-50" className="absolute top-full left-0 mt-2 w-72 p-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-2xl border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl z-50"
> >
<div className="grid gap-1"> <div className="grid gap-1">
<p className="px-3 py-1.5 text-[9px] font-bold text-slate-400 uppercase tracking-[0.2em]">{section.label} Protocol</p> <p className="px-3 py-1.5 text-[9px] font-bold text-slate-400 uppercase tracking-[0.2em]">{section.label}</p>
{section.items.map(item => ( {section.items.map(item => (
<Link <Link
key={item.id} key={item.id}

View file

@ -7,9 +7,9 @@ interface BreadcrumbItem {
path: string; path: string;
} }
// Route mapping for Ersen System // Route mapping for 777 Wolfpack System
const ROUTE_CONFIG: Record<string, { label: string; parent?: string }> = { const ROUTE_CONFIG: Record<string, { label: string; parent?: string }> = {
'/': { label: 'Command Center' }, '/': { label: 'Dashboard' },
'/dashboard': { label: 'Operational Overview', parent: '/' }, '/dashboard': { label: 'Operational Overview', parent: '/' },
'/walkthrough': { label: 'Daily Walkthrough', parent: '/' }, '/walkthrough': { label: 'Daily Walkthrough', parent: '/' },
'/tasks': { label: 'Tasks', parent: '/' }, '/tasks': { label: 'Tasks', parent: '/' },
@ -120,13 +120,13 @@ export function getPageTitle(pathname: string): string {
for (const route of DYNAMIC_ROUTES) { for (const route of DYNAMIC_ROUTES) {
const match = pathname.match(route.pattern); const match = pathname.match(route.pattern);
if (match) { if (match) {
return `${route.getLabel(match)} | Ersen OS`; return `${route.getLabel(match)} | 777 Wolfpack`;
} }
} }
const config = ROUTE_CONFIG[pathname]; const config = ROUTE_CONFIG[pathname];
if (config) { if (config) {
return `${config.label} | Ersen OS`; return `${config.label} | 777 Wolfpack`;
} }
return 'Ersen OS - Operational Management'; return '777 Wolfpack - Grow Ops Manager';
} }

View file

@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
import { cn } from '../../lib/utils'; import { cn } from '../../lib/utils';
/** /**
* Ersen UI Primitives * 777 Wolfpack UI Primitives
* High-performance, high-density components for operational management. * High-performance, high-density components for operational management.
*/ */

View file

@ -16,7 +16,7 @@ export default function LoginPage() {
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
document.title = 'Ersen OS | Authentication'; document.title = '777 Wolfpack | Authentication';
}, []); }, []);
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
@ -47,15 +47,20 @@ export default function LoginPage() {
transition={{ duration: 1, ease: "easeOut" }} transition={{ duration: 1, ease: "easeOut" }}
className="relative z-10 flex flex-col items-center text-center p-12 space-y-8" className="relative z-10 flex flex-col items-center text-center p-12 space-y-8"
> >
<div className="w-24 h-24 rounded-3xl bg-indigo-500 flex items-center justify-center shadow-2xl shadow-indigo-500/20 rotate-3"> <div className="relative group">
<Lock className="text-white -rotate-3" size={48} strokeWidth={2.5} /> <img
src="/assets/logo-777-wolfpack.jpg"
alt="777 Wolfpack"
className="w-24 h-24 rounded-3xl shadow-2xl transition-transform duration-slow ease-out-expo group-hover:scale-105"
/>
<div className="absolute inset-0 rounded-3xl bg-indigo-500 opacity-0 group-hover:opacity-10 transition-opacity duration-normal blur-xl" />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<h2 className="text-5xl font-bold tracking-tighter bg-gradient-to-b from-white to-slate-500 bg-clip-text text-transparent"> <h2 className="text-5xl font-bold tracking-tighter bg-gradient-to-b from-white to-slate-500 bg-clip-text text-transparent">
ERSEN OS 777 WOLFPACK
</h2> </h2>
<p className="text-slate-500 font-mono text-sm tracking-[0.3em] uppercase"> <p className="text-slate-500 font-mono text-sm tracking-[0.3em] uppercase">
Operational Infrastructure Operations Infrastructure
</p> </p>
</div> </div>
@ -65,16 +70,16 @@ export default function LoginPage() {
<div key={i} className="w-8 h-8 rounded-full border-2 border-[#050505] bg-slate-800" /> <div key={i} className="w-8 h-8 rounded-full border-2 border-[#050505] bg-slate-800" />
))} ))}
</div> </div>
<p className="text-xs text-slate-400 font-medium">Security Verified Nodes Active</p> <p className="text-xs text-slate-400 font-medium">Operations Center</p>
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" /> <div className="w-2 h-2 rounded-full bg-emerald-500" />
</div> </div>
</motion.div> </motion.div>
{/* Decorative elements */} {/* Decorative elements */}
<div className="absolute bottom-12 left-12 text-[10px] font-mono text-slate-700 tracking-tighter uppercase leading-none"> <div className="absolute bottom-12 left-12 text-[10px] font-mono text-slate-700 tracking-tighter uppercase leading-none">
Distributed ledger validated<br /> 777 Wolfpack Operations<br />
Secure tunnel engaged<br /> Grow Ops Manager<br />
v4.2.0-stable v1.0.0
</div> </div>
</div> </div>
@ -87,14 +92,19 @@ export default function LoginPage() {
className="w-full max-w-sm space-y-12" className="w-full max-w-sm space-y-12"
> >
<div className="space-y-3"> <div className="space-y-3">
<motion.div variants={itemVariants} className="lg:hidden w-12 h-12 rounded-xl bg-indigo-500 flex items-center justify-center mb-8 shadow-lg shadow-indigo-500/20"> <motion.div variants={itemVariants} className="lg:hidden relative group w-fit mb-8">
<Lock className="text-white" size={24} /> <img
src="/assets/logo-777-wolfpack.jpg"
alt="777 Wolfpack"
className="w-12 h-12 rounded-xl shadow-lg transition-transform duration-300 group-hover:scale-105"
/>
<div className="absolute inset-0 rounded-xl bg-indigo-500 opacity-0 group-hover:opacity-10 transition-opacity blur-lg" />
</motion.div> </motion.div>
<motion.h1 variants={itemVariants} className="text-3xl font-bold tracking-tight text-white lg:text-4xl"> <motion.h1 variants={itemVariants} className="text-3xl font-bold tracking-tight text-white lg:text-4xl">
Authenticate Sign In
</motion.h1> </motion.h1>
<motion.p variants={itemVariants} className="text-slate-400 text-sm"> <motion.p variants={itemVariants} className="text-slate-400 text-sm">
Access your mission-critical operations portal. Access your operations portal.
</motion.p> </motion.p>
</div> </div>
@ -115,13 +125,13 @@ export default function LoginPage() {
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest ml-1">Secure Email</label> <label className="text-xs font-bold text-slate-500 uppercase tracking-widest ml-1">Email</label>
<div className="relative group"> <div className="relative group">
<input <input
type="email" type="email"
required required
className="w-full bg-slate-900/50 border border-slate-800 rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/40 focus:border-indigo-500 transition-all placeholder:text-slate-600" className="w-full bg-slate-900/50 border border-slate-800 rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/40 focus:border-indigo-500 transition-all placeholder:text-slate-600"
placeholder="terminal@ersen.xyz" placeholder="you@example.com"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
disabled={isLoading} disabled={isLoading}
@ -131,7 +141,7 @@ export default function LoginPage() {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest ml-1">Access Key</label> <label className="text-xs font-bold text-slate-500 uppercase tracking-widest ml-1">Password</label>
<div className="relative group"> <div className="relative group">
<input <input
type="password" type="password"
@ -157,7 +167,7 @@ export default function LoginPage() {
<Loader2 className="animate-spin" size={20} /> <Loader2 className="animate-spin" size={20} />
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span>Initiate Protocol</span> <span>Continue</span>
<ChevronRight size={18} className="group-hover:translate-x-1 transition-transform" /> <ChevronRight size={18} className="group-hover:translate-x-1 transition-transform" />
</div> </div>
)} )}
@ -171,7 +181,7 @@ export default function LoginPage() {
<Shield className="text-slate-700" size={14} /> <Shield className="text-slate-700" size={14} />
</div> </div>
<p className="text-[11px] text-slate-500 leading-relaxed text-center"> <p className="text-[11px] text-slate-500 leading-relaxed text-center">
This system is for the exclusive use of authorized Ersen personnel. All activity is logged and monitored for compliance integrity. This system is for the exclusive use of authorized personnel. All activity is logged and monitored for compliance integrity.
</p> </p>
</motion.div> </motion.div>
</motion.div> </motion.div>