updated player tile to show timezone instead of about

packages/web/components/Player/Filter/AdjascentTimezonePlayers.tsx

@@ -78,7 +78,7 @@ export const AdjascentTimezonePlayers: React.FC<Props> = ({
           <Flex
             justify="space-between"
             w="100%"
-            maxW="80rem"
+            maxW="79rem"
             pr="4"
             align="center"
             pb={{ base: 4, md: 0 }}

packages/web/components/Player/Filter/PlayerFilter.tsx

@@ -281,7 +281,7 @@ export const PlayerFilter: React.FC<Props> = ({
         <Flex
           justify="space-between"
           w="100%"
-          maxW="80rem"
+          maxW="79rem"
           pr="4"
           align="center"
         >

packages/web/components/Player/Filter/PlayersNotFound.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 export const PlayersNotFound: React.FC = () => (
   <VStack
     w="100%"
+    maxW="79rem"
     p={{ base: 8, md: 16 }}
     spacing={{ base: 4, md: 6 }}
     color="white"

packages/web/components/Player/PlayerContacts.tsx

@@ -8,9 +8,13 @@ import { formatAddress } from 'utils/playerHelpers';
 
 type Props = {
   player: PlayerFragmentFragment;
+  disableBrightId?: boolean;
 };
 
-export const PlayerContacts: React.FC<Props> = ({ player }) => {
+export const PlayerContacts: React.FC<Props> = ({
+  player,
+  disableBrightId = false,
+}) => {
   const { verified } = useBrightIdStatus({ player });
   const [copied, handleCopy] = useCopyToClipboard();
   return (
@@ -77,7 +81,7 @@ export const PlayerContacts: React.FC<Props> = ({ player }) => {
           </Tooltip>
         </WrapItem>
       ) : null}
-      {verified ? (
+      {verified && !disableBrightId ? (
         <WrapItem>
           <Tooltip label="Verified on BrightID" closeOnClick={false} hasArrow>
             <Button

packages/web/components/Player/PlayerTile.tsx

@@ -16,89 +16,115 @@ import { PlayerAvatar } from 'components/Player/PlayerAvatar';
 import { PlayerContacts } from 'components/Player/PlayerContacts';
 import { PlayerTileMemberships } from 'components/Player/PlayerTileMemberships';
 import { SkillsTags } from 'components/Skills';
-import { PlayerFragmentFragment, Skill } from 'graphql/autogen/types';
-import React from 'react';
+import {
+  PlayerFragmentFragment,
+  /* Player_Update_Column, */ Skill,
+} from 'graphql/autogen/types';
+import React, { useMemo } from 'react';
+import { FaGlobe } from 'react-icons/fa';
+import { getPlayerTimeZoneDisplay } from 'utils/dateHelpers';
 import { getPlayerCoverImage, getPlayerName } from 'utils/playerHelpers';
 
 type Props = {
   player: PlayerFragmentFragment;
 };
 
-export const PlayerTile: React.FC<Props> = ({ player }) => (
-  <MetaTile>
-    <Box
-      bgImage={`url(${getPlayerCoverImage(player)})`}
-      bgSize="cover"
-      bgPosition="center"
-      position="absolute"
-      top="0"
-      left="0"
-      w="100%"
-      h="4.5rem"
-    />
-    <MetaTileHeader>
-      <MetaLink
-        as={`/player/${player.username}`}
-        href="/player/[username]"
-        key={player.id}
-      >
-        <VStack>
-          <PlayerAvatar player={player} size="xl" />
-          <Heading size="xs" color="white">
-            {getPlayerName(player)}
-          </Heading>
-        </VStack>
-      </MetaLink>
-      <Wrap w="100%" justify="center">
-        {player.playerType?.title ? (
+export const PlayerTile: React.FC<Props> = ({ player }) => {
+  const tzDisplay = useMemo(() => getPlayerTimeZoneDisplay(player), [player]);
+  return (
+    <MetaTile>
+      <Box
+        bgImage={`url(${getPlayerCoverImage(player)})`}
+        bgSize="cover"
+        bgPosition="center"
+        position="absolute"
+        top="0"
+        left="0"
+        w="100%"
+        h="4.5rem"
+      />
+      <MetaTileHeader>
+        <MetaLink
+          as={`/player/${player.username}`}
+          href="/player/[username]"
+          key={player.id}
+        >
+          <VStack>
+            <PlayerAvatar player={player} size="xl" />
+            <Heading size="xs" color="white">
+              {getPlayerName(player)}
+            </Heading>
+          </VStack>
+        </MetaLink>
+        <Wrap w="100%" justify="center">
+          {player.playerType?.title ? (
+            <WrapItem>
+              <MetaTag size="md">
+                {player.playerType?.title.toUpperCase()}
+              </MetaTag>
+            </WrapItem>
+          ) : null}
+          {player.rank && (
+            <WrapItem>
+              <MetaTag
+                backgroundColor={player.rank?.toLowerCase()}
+                size="md"
+                color="blackAlpha.600"
+              >
+                {player.rank}
+              </MetaTag>
+            </WrapItem>
+          )}
           <WrapItem>
-            <MetaTag size="md">
-              {player.playerType?.title.toUpperCase()}
-            </MetaTag>
+            <MetaTag size="md">{`XP: ${Math.floor(player.total_xp)}`}</MetaTag>
           </WrapItem>
-        ) : null}
-        {player.rank && (
-          <WrapItem>
-            <MetaTag
-              backgroundColor={player.rank?.toLowerCase()}
-              size="md"
-              color="blackAlpha.600"
-            >
-              {player.rank}
-            </MetaTag>
-          </WrapItem>
-        )}
-        <WrapItem>
-          <MetaTag size="md">{`XP: ${Math.floor(player.total_xp)}`}</MetaTag>
-        </WrapItem>
-      </Wrap>
-      {player.box_profile?.description ? (
+        </Wrap>
+        {/* player.box_profile?.description ? (
         <VStack spacing={2} align="stretch">
           <Text textStyle="caption">ABOUT</Text>
           <Text fontSize="sm">{player.box_profile.description}</Text>
         </VStack>
-      ) : null}
-    </MetaTileHeader>
-    <MetaTileBody>
-      {player.Player_Skills.length ? (
-        <VStack spacing={2} align="stretch">
-          <Text textStyle="caption">SKILLS</Text>
-          <SkillsTags
-            skills={player.Player_Skills.map((s) => s.Skill) as Skill[]}
-          />
-        </VStack>
-      ) : null}
+      ) : null */}
+      </MetaTileHeader>
+      <MetaTileBody>
+        {tzDisplay?.timeZone ? (
+          <VStack spacing={2} align="stretch">
+            <Text textStyle="caption">TIMEZONE</Text>
+            <HStack alignItems="baseline">
+              <FaGlobe color="blueLight" />
+              <Text fontSize="xl" mb="1">
+                {tzDisplay?.timeZone || '-'}
+              </Text>
+              {tzDisplay?.offset ? (
+                <Text fontSize="xs" mr={3}>
+                  {tzDisplay?.offset}
+                </Text>
+              ) : (
+                ''
+              )}
+            </HStack>
+          </VStack>
+        ) : null}
+        {player.Player_Skills.length ? (
+          <VStack spacing={2} align="stretch">
+            <Text textStyle="caption">SKILLS</Text>
+            <SkillsTags
+              skills={player.Player_Skills.map((s) => s.Skill) as Skill[]}
+            />
+          </VStack>
+        ) : null}
 
-      <PlayerTileMemberships player={player} />
+        <PlayerTileMemberships player={player} />
 
-      {player.Accounts.length ? (
-        <VStack spacing={2} align="stretch">
-          <Text textStyle="caption">CONTACT</Text>
-          <HStack mt="2">
-            <PlayerContacts player={player} />
-          </HStack>
-        </VStack>
-      ) : null}
-    </MetaTileBody>
-  </MetaTile>
-);
+        {player.Accounts.length ? (
+          <VStack spacing={2} align="stretch">
+            <Text textStyle="caption">CONTACT</Text>
+            <HStack mt="2">
+              <PlayerContacts player={player} disableBrightId />
+            </HStack>
+          </VStack>
+        ) : null}
+      </MetaTileBody>
+    </MetaTile>
+  );
+};

packages/web/components/Player/PlayerTileMemberships.tsx

@@ -9,29 +9,22 @@ type Props = {
 const SHOW_MEMBERSHIPS = 4;
 
 export const PlayerTileMemberships: React.FC<Props> = ({ player }) => {
-  const show = useMemo(
-    () =>
-      player.daohausMemberships.reduce(
-        (t, { moloch: { title } }) => t || !!title,
-        false,
-      ),
+  const displayMemberships = useMemo(
+    () => player.daohausMemberships.filter(({ moloch: { title } }) => !!title),
     [player.daohausMemberships],
   );
-  return show ? (
+  return displayMemberships.length > 0 ? (
     <VStack spacing={2} align="stretch">
       <Text textStyle="caption">MEMBER OF</Text>
       <Wrap>
-        {player.daohausMemberships
-          .filter((m) => m.moloch.title !== null)
-          .slice(0, SHOW_MEMBERSHIPS)
-          .map((member) => (
-            <WrapItem key={member.id}>
-              <MetaTag size="md" fontWeight="normal">
-                {member.moloch.title}
-              </MetaTag>
-            </WrapItem>
-          ))}
-        {player.daohausMemberships.length > SHOW_MEMBERSHIPS && (
+        {displayMemberships.slice(0, SHOW_MEMBERSHIPS).map((member) => (
+          <WrapItem key={member.id}>
+            <MetaTag size="md" fontWeight="normal">
+              {member.moloch.title}
+            </MetaTag>
+          </WrapItem>
+        ))}
+        {displayMemberships.length > SHOW_MEMBERSHIPS && (
           <WrapItem>
             <MetaTag size="md" fontWeight="normal">
               {`+${player.daohausMemberships.length - SHOW_MEMBERSHIPS}`}