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 && (