fix(embed): show team name instead of author name (#8368)

Author: CompuIves

packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js

@@ -6,22 +6,46 @@ export const Container = styled.div(
  display: 'flex',
  alignItems: 'center',
  marginBottom: 4,
+ marginTop: 2,
  })
 );
 
 export const Avatar = styled.img(
  css({
  size: '24px',
- borderRadius: '2px',
+ borderRadius: '50%',
  border: '1px solid',
  borderColor: 'grays.400',
  })
 );
 
-export const Name = styled.span(
+export const AvatarPlaceholder = styled.div(
+ css({
+ width: 24,
+ height: 24,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ fontWeight: 'medium',
+ borderRadius: '50%',
+ backgroundColor: 'grays.600',
+ })
+);
+
+export const PrimaryName = styled.span(
+ css({
+ display: 'inline-block',
+ fontSize: 3,
+ marginLeft: 2,
+ marginBottom: '1px',
+ })
+);
+
+export const AuthorName = styled.span(
  css({
  display: 'inline-block',
  fontSize: 2,
  marginLeft: 2,
+ color: 'grays.400',
  })
 );

packages/app/src/embed/components/Sidebar/AvatarBlock/index.js

@@ -1,10 +1,29 @@
 import React from 'react';
-import { Container, Avatar, Name } from './elements';
+import {
+ Container,
+ Avatar,
+ PrimaryName,
+ AuthorName,
+ AvatarPlaceholder,
+} from './elements';
 
-const AvatarBlock = ({ url, name }) => (
+const AvatarBlock = ({ url, name, teamName }) => (
  <Container>
- <Avatar src={url} />
- <Name>{name}</Name>
+ {url ? (
+ <Avatar src={url} />
+ ) : (
+ <AvatarPlaceholder>{teamName.charAt(0).toUpperCase()}</AvatarPlaceholder>
+ )}
+ <div style={{ display: 'flex', flexDirection: 'column' }}>
+ {teamName && teamName !== name ? (
+ <>
+ <PrimaryName>{teamName}</PrimaryName>
+ <AuthorName>{name}</AuthorName>
+ </>
+ ) : (
+ <PrimaryName>{name}</PrimaryName>
+ )}
+ </div>
  </Container>
 );
 

packages/app/src/embed/components/Sidebar/SandboxInfo/index.tsx

@@ -17,9 +17,11 @@ export const SandboxInfo: FunctionComponent<Props> = ({ sandbox }) => {
  <Container>
  <Title title={title}>{title}</Title>
  {sandbox.description && <Description>{sandbox.description}</Description>}
+
  {sandbox.author && (
  <AvatarBlock
- url={sandbox.author.avatarUrl}
+ teamName={sandbox.team?.name}
+ url={sandbox.team?.avatarUrl}
  name={sandbox.author.username}
  />
  )}