UX improvement to public facing team pages

- Added default member avatars
- Fixed member item spacing
- Added team description (#1305)

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) => {
           />
 
           <div>
-            <Avatar alt={member.name || ""} imageSrc={member.avatar} className="w-12 h-12" />
-            <section className="space-y-2">
+            <Avatar
+              alt={member.name || ""}
+              imageSrc={getPlaceholderAvatar(member.avatar, member.username)}
+              className="w-12 h-12 -mt-4"
+            />
+            <section className="w-full mt-2 space-y-1">
               <Text variant="title">{member.name}</Text>
-              <Text variant="subtitle" className="w-6/8">
-                {member.bio}
+              <Text variant="subtitle" className="">
+                {member.bio || t("user_from_team", { user: member.name, team: team.name })}
               </Text>
             </section>
           </div>
@@ -66,7 +72,7 @@ const Team = ({ team }: TeamPageProps) => {
     }
 
     return (
-      <section className="flex flex-wrap justify-center max-w-5xl min-w-full mx-auto lg:min-w-lg gap-x-12 gap-y-6">
+      <section className="flex flex-wrap justify-center max-w-5xl min-w-full mx-auto lg:min-w-lg gap-x-6 gap-y-6">
         {members.map((member) => {
           return member.username !== null && <Member key={member.id} member={member} />;
         })}

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) {
       <div>
         <HeadSeo title={teamName} description={teamName} />
         <div className="px-4 pt-24 pb-12">
-          <div className="mb-8 text-center">
-            <Avatar alt={teamName} imageSrc={team.logo} className="w-20 h-20 mx-auto mb-4 rounded-full" />
-            <Text variant="headline">{teamName}</Text>
+          <div className="mx-auto mb-8 text-center max-w-96">
+            <Avatar
+              alt={teamName}
+              imageSrc={getPlaceholderAvatar(team.logo, team.name)}
+              className="w-20 h-20 mx-auto mb-4 rounded-full"
+            />
+            <Text variant="largetitle">{teamName}</Text>
+            <Text variant="subtitle" className="mt-2">
+              {team.bio}
+            </Text>
           </div>
           {(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
           {!showMembers.isOn && team.eventTypes.length > 0 && (

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