From 4ce879e5dcaa045e5fde11fa6729a8ae0332a6dd Mon Sep 17 00:00:00 2001 From: Jamie Pine <32987599+jamiepine@users.noreply.github.com> Date: Thu, 16 Dec 2021 16:12:06 -0800 Subject: [PATCH] UX improvement to public facing team pages - Added default member avatars - Fixed member item spacing - Added team description (#1305) --- components/team/screens/Team.tsx | 16 +++++++++++----- pages/team/[slug].tsx | 14 +++++++++++--- public/static/locales/en/common.json | 1 + 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/components/team/screens/Team.tsx b/components/team/screens/Team.tsx index 9b249187..4fbcf49f 100644 --- a/components/team/screens/Team.tsx +++ b/components/team/screens/Team.tsx @@ -5,6 +5,7 @@ import Link from "next/link"; import { TeamPageProps } from "pages/team/[slug]"; import React from "react"; +import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar"; import { useLocale } from "@lib/hooks/useLocale"; import Avatar from "@components/ui/Avatar"; @@ -25,6 +26,7 @@ const Team = ({ team }: TeamPageProps) => { "flex flex-col", "space-y-4", "p-4", + "min-w-full sm:min-w-64 sm:max-w-64", "bg-white dark:bg-neutral-900 dark:border-0 dark:bg-opacity-8", "border border-neutral-200", "hover:cursor-pointer", @@ -47,11 +49,15 @@ const Team = ({ team }: TeamPageProps) => { />
- -
+ +
{member.name} - - {member.bio} + + {member.bio || t("user_from_team", { user: member.name, team: team.name })}
@@ -66,7 +72,7 @@ const Team = ({ team }: TeamPageProps) => { } return ( -
+
{members.map((member) => { return member.username !== null && ; })} diff --git a/pages/team/[slug].tsx b/pages/team/[slug].tsx index 22ef79c1..9949e5f8 100644 --- a/pages/team/[slug].tsx +++ b/pages/team/[slug].tsx @@ -3,6 +3,7 @@ import { GetServerSidePropsContext } from "next"; import Link from "next/link"; import React from "react"; +import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar"; import { useLocale } from "@lib/hooks/useLocale"; import useTheme from "@lib/hooks/useTheme"; import { useToggleQuery } from "@lib/hooks/useToggleQuery"; @@ -63,9 +64,16 @@ function TeamPage({ team }: TeamPageProps) {
-
- - {teamName} +
+ + {teamName} + + {team.bio} +
{(showMembers.isOn || !team.eventTypes.length) && } {!showMembers.isOn && team.eventTypes.length > 0 && ( diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json index c3e1da9d..cb4d418f 100644 --- a/public/static/locales/en/common.json +++ b/public/static/locales/en/common.json @@ -427,6 +427,7 @@ "leave_team": "Leave team", "confirm_leave_team": "Yes, leave team", "leave_team_confirmation_message": "Are you sure you want to leave this team? You will no longer be able to book using it.", + "user_from_team": "{{user}} from {{team}}", "preview": "Preview", "link_copied": "Link copied!", "title": "Title",