diff --git a/frontend/src/pages/TeamDashboardPage.css b/frontend/src/pages/TeamDashboardPage.css index 32ad5da..179538e 100644 --- a/frontend/src/pages/TeamDashboardPage.css +++ b/frontend/src/pages/TeamDashboardPage.css @@ -3,10 +3,18 @@ } .team-header { - margin-bottom: 1.5rem; + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1.5rem; + margin-bottom: 2rem; } -.team-header-info { +.team-header-left { + flex: 1; +} + +.team-header-title { display: flex; align-items: center; gap: 0.75rem; @@ -15,20 +23,8 @@ .team-header h1 { margin: 0; - font-size: 1.75rem; -} - -.team-description { - margin: 0 0 0.5rem; - color: var(--color-text-secondary); - font-size: 1rem; - max-width: 600px; -} - -.team-meta { - display: flex; - align-items: center; - gap: 1rem; + font-size: 1.5rem; + font-weight: 600; } .team-slug { @@ -36,36 +32,31 @@ color: var(--color-text-muted); } -.team-stats { +.team-description { + margin: 0 0 0.5rem; + color: var(--color-text-secondary); + font-size: 0.9375rem; + max-width: 600px; +} + +.team-stats-inline { display: flex; + align-items: center; gap: 1rem; - margin-bottom: 1.5rem; + color: var(--color-text-muted); + font-size: 0.875rem; } -.stat-card { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - padding: 1rem 1.5rem; - min-width: 120px; -} - -.stat-value { - font-size: 1.5rem; +.team-stats-inline .stat-value { font-weight: 600; color: var(--color-text); + font-size: 0.875rem; } -.stat-label { - font-size: 0.8125rem; - color: var(--color-text-muted); - margin-top: 0.25rem; -} - -.team-actions { +.team-header-actions { display: flex; - gap: 0.75rem; - margin-bottom: 2rem; + gap: 0.5rem; + flex-shrink: 0; } .team-section { @@ -106,18 +97,24 @@ letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border); + border-bottom: 2px solid var(--color-border); + border-right: 1px solid var(--color-border); +} + +.projects-table th:last-child { + border-right: none; } .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 tbody tr:last-child td { - border-bottom: none; +.projects-table td:last-child { + border-right: none; } .project-row { diff --git a/frontend/src/pages/TeamDashboardPage.tsx b/frontend/src/pages/TeamDashboardPage.tsx index 9c6d97a..1b8d4b2 100644 --- a/frontend/src/pages/TeamDashboardPage.tsx +++ b/frontend/src/pages/TeamDashboardPage.tsx @@ -95,54 +95,46 @@ function TeamDashboardPage() { />
-
-

{team.name}

- {team.user_role && ( - - {team.user_role} - +
+
+

{team.name}

+ {team.user_role && ( + + {team.user_role} + + )} + @{team.slug} +
+ {team.description && ( +

{team.description}

)} +
+ {team.project_count} projects + {team.member_count} members +
- {team.description && ( -

{team.description}

+ {isAdminOrOwner && ( +
+ + + + + + + + Members + + + + + + + Settings + +
)} -
- @{team.slug} -
-
-
-
{team.project_count}
-
Projects
-
-
-
{team.member_count}
-
Members
-
-
- - {isAdminOrOwner && ( -
- - - - - - Settings - - - - - - - - - Members - -
- )} - {showProjectForm && (
setShowProjectForm(false)}>
e.stopPropagation()}> diff --git a/frontend/src/pages/TeamsPage.css b/frontend/src/pages/TeamsPage.css index 23870f4..d79f901 100644 --- a/frontend/src/pages/TeamsPage.css +++ b/frontend/src/pages/TeamsPage.css @@ -8,50 +8,40 @@ .teams-header { display: flex; justify-content: space-between; - align-items: flex-start; - margin-bottom: 2rem; + align-items: center; + margin-bottom: 1.5rem; gap: 1rem; } +.teams-header__content { + display: flex; + align-items: center; + gap: 1.5rem; +} + .teams-header__content h1 { margin: 0; - font-size: 1.75rem; - font-weight: 600; -} - -.teams-header__subtitle { - margin: 0.25rem 0 0; - color: var(--color-text-muted); - font-size: 0.9375rem; -} - -/* Stats */ -.teams-stats { - display: flex; - gap: 2rem; - padding: 1rem 1.5rem; - background: var(--color-bg-secondary); - border-radius: var(--radius-lg); - margin-bottom: 1.5rem; -} - -.teams-stat { - display: flex; - flex-direction: column; - align-items: center; -} - -.teams-stat__value { font-size: 1.5rem; font-weight: 600; - color: var(--color-text); } -.teams-stat__label { - font-size: 0.75rem; +.teams-header__stats { + display: flex; + align-items: center; + gap: 1rem; color: var(--color-text-muted); - text-transform: uppercase; - letter-spacing: 0.05em; + font-size: 0.875rem; +} + +.teams-header__stats span { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.teams-header__stats .stat-value { + font-weight: 600; + color: var(--color-text); } /* Search */ @@ -203,18 +193,24 @@ letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border); + border-bottom: 2px solid var(--color-border); + border-right: 1px solid var(--color-border); +} + +.teams-table th:last-child { + border-right: none; } .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 tbody tr:last-child td { - border-bottom: none; +.teams-table td:last-child { + border-right: none; } .team-row { diff --git a/frontend/src/pages/TeamsPage.tsx b/frontend/src/pages/TeamsPage.tsx index 37c4c56..102acf1 100644 --- a/frontend/src/pages/TeamsPage.tsx +++ b/frontend/src/pages/TeamsPage.tsx @@ -115,7 +115,13 @@ function TeamsPage() {

Teams

-

Organize projects and collaborate with your team

+ {!loading && totalTeams > 0 && ( +
+ {totalTeams} teams + {ownedTeams} owned + {totalProjects} projects +
+ )}
- {/* Stats */} - {!loading && totalTeams > 0 && ( -
-
- {totalTeams} - Teams -
-
- {ownedTeams} - Owned -
-
- {totalProjects} - Projects -
-
- )} - {/* Search */} {!loading && totalTeams > 3 && (