feat(ui): usa el logo real de LinkedCorp en vez del placeholder "LC"
Reemplaza el cuadro "LC" del NavigationView y del login por los logos oficiales de /desarrollo/imgLinkedCorp: logoLinkedCorpTxtBlack (tema claro, texto negro) y logoLinkedCorpTxt (tema oscuro, texto blanco), elegido segun el tema activo. En modo compacto del sidebar (sin espacio para el texto) se usa el isotipo redondo (logoLinked1) en vez del logo con texto. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -1,6 +1,9 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { LayoutDashboard, FolderKanban, Building2, Settings } from 'lucide-react';
|
||||
import { useUi } from '../context/ui-context.jsx';
|
||||
import logoDark from '../assets/logoLinkedCorpTxt.png';
|
||||
import logoLight from '../assets/logoLinkedCorpTxtBlack.png';
|
||||
import logoIcon from '../assets/logoLinked1.png';
|
||||
|
||||
const ITEMS = [
|
||||
{ to: '/', icon: LayoutDashboard, labelKey: 'nav_dashboard', end: true },
|
||||
@@ -10,12 +13,16 @@ const ITEMS = [
|
||||
];
|
||||
|
||||
export function NavigationView({ mode }) {
|
||||
const { t } = useUi();
|
||||
const { t, theme } = useUi();
|
||||
const compact = mode === 'compact';
|
||||
return (
|
||||
<nav className={`nav-view ${mode}`}>
|
||||
<div className="nav-header">
|
||||
<div className="nav-logo">LC</div>
|
||||
{mode !== 'compact' && <div className="nav-title">{t('appName')}</div>}
|
||||
{compact ? (
|
||||
<img src={logoIcon} alt={t('appName')} className="nav-logo-icon" />
|
||||
) : (
|
||||
<img src={theme === 'light' ? logoLight : logoDark} alt={t('appName')} className="nav-logo-full" />
|
||||
)}
|
||||
</div>
|
||||
<div className="nav-items">
|
||||
{ITEMS.map((item) => (
|
||||
|
||||
@@ -5,10 +5,12 @@ import { useAuth } from '../../context/auth-context.jsx';
|
||||
import { useUi } from '../../context/ui-context.jsx';
|
||||
import { Field } from '../../components/Field.jsx';
|
||||
import { Button } from '../../components/Button.jsx';
|
||||
import logoDark from '../../assets/logoLinkedCorpTxt.png';
|
||||
import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
|
||||
|
||||
export default function LoginPage() {
|
||||
const { login } = useAuth();
|
||||
const { t } = useUi();
|
||||
const { t, theme } = useUi();
|
||||
const navigate = useNavigate();
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
@@ -33,9 +35,9 @@ export default function LoginPage() {
|
||||
<div className="login-shell">
|
||||
<form className="login-card" onSubmit={handleSubmit}>
|
||||
<div className="login-logo">
|
||||
<div className="nav-logo">LC</div>
|
||||
<div className="login-title">{t('login_title')}</div>
|
||||
<img src={theme === 'light' ? logoLight : logoDark} alt={t('appName')} className="login-logo-img" />
|
||||
</div>
|
||||
<div className="login-title">{t('login_title')}</div>
|
||||
{error && <div className="login-error">{error}</div>}
|
||||
<Field label={t('login_email')}>
|
||||
<input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoFocus />
|
||||
|
||||
@@ -52,13 +52,8 @@ button { font-family: inherit; }
|
||||
padding: 14px 12px; border-bottom: 1px solid rgb(var(--line));
|
||||
min-height: 56px;
|
||||
}
|
||||
.nav-logo {
|
||||
width: 28px; height: 28px; border-radius: var(--r-sm);
|
||||
background: rgb(var(--accent)); color: #fff;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; font-size: .8rem; flex: none;
|
||||
}
|
||||
.nav-title { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; }
|
||||
.nav-logo-icon { width: 28px; height: 28px; flex: none; object-fit: contain; }
|
||||
.nav-logo-full { height: 26px; width: auto; max-width: 100%; object-fit: contain; }
|
||||
.nav-items { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
@@ -258,8 +253,9 @@ table.list-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
|
||||
/* --- Login --- */
|
||||
.login-shell { height: 100vh; display: flex; align-items: center; justify-content: center; background: rgb(var(--canvas)); }
|
||||
.login-card { width: 340px; max-width: 92vw; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-lg); padding: 28px; }
|
||||
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
|
||||
.login-title { font-size: 1.1rem; font-weight: 700; }
|
||||
.login-logo { display: flex; align-items: center; margin-bottom: 16px; }
|
||||
.login-logo-img { height: 40px; width: auto; }
|
||||
.login-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }
|
||||
.login-error { color: rgb(var(--danger)); font-size: .78rem; margin-bottom: 10px; }
|
||||
|
||||
/* --- DetailPopup (ver DetailPopup.jsx) ---
|
||||
|
||||
Reference in New Issue
Block a user