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",