Fix table borders, single team nav link, remove dashboard stats
- Use explicit border color (#e2e8f0) for table cell borders - Navbar shows 'Team' (singular) linking directly to team dashboard when user has only 1 team - Navbar shows 'Teams' (plural) linking to teams list when user has multiple teams - Remove project/member counts from team dashboard header
This commit is contained in:
@@ -2,6 +2,8 @@ import { ReactNode, useState, useRef, useEffect } from 'react';
|
||||
import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { GlobalSearch } from './GlobalSearch';
|
||||
import { listTeams } from '../api';
|
||||
import { TeamDetail } from '../types';
|
||||
import './Layout.css';
|
||||
|
||||
interface LayoutProps {
|
||||
@@ -13,8 +15,22 @@ function Layout({ children }: LayoutProps) {
|
||||
const navigate = useNavigate();
|
||||
const { user, loading, logout } = useAuth();
|
||||
const [showUserMenu, setShowUserMenu] = useState(false);
|
||||
const [userTeams, setUserTeams] = useState<TeamDetail[]>([]);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Fetch user's teams
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
listTeams({ limit: 10 }).then(data => {
|
||||
setUserTeams(data.items);
|
||||
}).catch(() => {
|
||||
setUserTeams([]);
|
||||
});
|
||||
} else {
|
||||
setUserTeams([]);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
// Close menu when clicking outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
@@ -77,15 +93,18 @@ function Layout({ children }: LayoutProps) {
|
||||
</svg>
|
||||
Dashboard
|
||||
</Link>
|
||||
{user && (
|
||||
<Link to="/teams" className={location.pathname.startsWith('/teams') ? 'active' : ''}>
|
||||
{user && userTeams.length > 0 && (
|
||||
<Link
|
||||
to={userTeams.length === 1 ? `/teams/${userTeams[0].slug}` : '/teams'}
|
||||
className={location.pathname.startsWith('/teams') ? 'active' : ''}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
Teams
|
||||
{userTeams.length === 1 ? 'Team' : 'Teams'}
|
||||
</Link>
|
||||
)}
|
||||
<a href="/docs" className="nav-link-muted">
|
||||
|
||||
@@ -39,20 +39,6 @@
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.team-stats-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.team-stats-inline .stat-value {
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.team-header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@@ -88,6 +74,11 @@
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.projects-table th,
|
||||
.projects-table td {
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.projects-table th {
|
||||
text-align: left;
|
||||
padding: 0.75rem 1rem;
|
||||
@@ -97,26 +88,15 @@
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-bg-secondary);
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.projects-table th:last-child {
|
||||
border-right: none;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.projects-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.projects-table td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.project-row {
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
|
||||
@@ -108,10 +108,6 @@ function TeamDashboardPage() {
|
||||
{team.description && (
|
||||
<p className="team-description">{team.description}</p>
|
||||
)}
|
||||
<div className="team-stats-inline">
|
||||
<span><span className="stat-value">{team.project_count}</span> projects</span>
|
||||
<span><span className="stat-value">{team.member_count}</span> members</span>
|
||||
</div>
|
||||
</div>
|
||||
{isAdminOrOwner && (
|
||||
<div className="team-header-actions">
|
||||
|
||||
@@ -184,6 +184,11 @@
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.teams-table th,
|
||||
.teams-table td {
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.teams-table th {
|
||||
text-align: left;
|
||||
padding: 0.75rem 1rem;
|
||||
@@ -193,26 +198,15 @@
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-bg-secondary);
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.teams-table th:last-child {
|
||||
border-right: none;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.teams-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.teams-table td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.team-row {
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
|
||||
Reference in New Issue
Block a user