diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx index b0160a93cc..5751f54ea3 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx +++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx @@ -17,6 +17,7 @@ import EditTeamModal from "../components/EditTeamModal"; import { IEditTeamFormData } from "../components/EditTeamModal/EditTeamModal"; import AddHostsRedirectModal from "./components/AddHostsModal/AddHostsRedirectModal"; +import BackChevron from "../../../../../assets/images/icon-chevron-down-9x6@2x.png"; import PencilIcon from "../../../../../assets/images/icon-pencil-14x14@2x.png"; import TrashIcon from "../../../../../assets/images/icon-trash-14x14@2x.png"; @@ -159,17 +160,22 @@ const TeamDetailsWrapper = (props: ITeamDetailsPageProps): JSX.Element => { ); } + const hostsCount = team.host_count; + const hostsTotalDisplay = hostsCount === 1 ? "1 host" : `${hostsCount} hosts`; return (
- - Back to teams + + back chevron + Back to teams

{team.name}

- 0 hosts + + {hostsTotalDisplay} +
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/_styles.scss b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/_styles.scss index 2e86139d25..e3bb857169 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/_styles.scss +++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/_styles.scss @@ -8,12 +8,20 @@ } &__back-link { - color: $core-vibrant-blue; + display: flex; + align-items: center; + height: 16px; font-size: $x-small; + color: $core-vibrant-blue; font-weight: $bold; text-decoration: none; } + #back-chevron { + width: 16px; + margin-right: $pad-small; + } + &__nav-header { padding-top: 15px; position: sticky;