diff --git a/packages/ui/src/common/components/icons/socials/Facebook.tsx b/packages/ui/src/common/components/icons/socials/Facebook.tsx index 21287f1382..3c1f5bbadc 100644 --- a/packages/ui/src/common/components/icons/socials/Facebook.tsx +++ b/packages/ui/src/common/components/icons/socials/Facebook.tsx @@ -2,18 +2,15 @@ import React from 'react' export const FacebookIcon = ({ className }: { className?: string }) => { return ( - - - - - - - - - + + ) } diff --git a/packages/ui/src/common/components/icons/socials/Linkedin.tsx b/packages/ui/src/common/components/icons/socials/Linkedin.tsx index 2b4a14afa1..cd4b50aa3b 100644 --- a/packages/ui/src/common/components/icons/socials/Linkedin.tsx +++ b/packages/ui/src/common/components/icons/socials/Linkedin.tsx @@ -2,8 +2,15 @@ import React from 'react' export const LinkedinIcon = ({ className }: { className?: string }) => { return ( - - + + ) } diff --git a/packages/ui/src/common/components/icons/socials/Telegram.tsx b/packages/ui/src/common/components/icons/socials/Telegram.tsx index 378702a205..76327bb5ad 100644 --- a/packages/ui/src/common/components/icons/socials/Telegram.tsx +++ b/packages/ui/src/common/components/icons/socials/Telegram.tsx @@ -2,18 +2,16 @@ import React from 'react' export const TelegramIcon = ({ className }: { className?: string }) => { return ( - - - - - - - - - + + + ) } diff --git a/packages/ui/src/common/components/icons/socials/Youtube.tsx b/packages/ui/src/common/components/icons/socials/Youtube.tsx index 62b3d2a152..caf0e87d1a 100644 --- a/packages/ui/src/common/components/icons/socials/Youtube.tsx +++ b/packages/ui/src/common/components/icons/socials/Youtube.tsx @@ -2,18 +2,15 @@ import React from 'react' export const YoutubeIcon = ({ className }: { className?: string }) => { return ( - - - - - - - - - + + ) } diff --git a/packages/ui/src/memberships/components/MemberInfo.tsx b/packages/ui/src/memberships/components/MemberInfo.tsx index 4844e53769..5ecb882122 100644 --- a/packages/ui/src/memberships/components/MemberInfo.tsx +++ b/packages/ui/src/memberships/components/MemberInfo.tsx @@ -14,6 +14,7 @@ import { Colors, Fonts } from '@/common/constants' import { isString } from '@/common/utils' import { useShowMemberModal } from '@/memberships/hooks/useShowMemberModal' +import { useMember } from '../hooks/useMembership' import { Member } from '../types' import { Avatar } from './Avatar' @@ -63,6 +64,8 @@ export const MemberInfo = React.memo( const showRoles = !onlyTop && !hideGroup && !showIdOrText const showId = !onlyTop && !!showIdOrText + const { member: memberDetails } = useMember(member.id) + return ( )} - {showRoles && } + {showRoles && memberDetails && ( + + )} {showId && {isString(showIdOrText) ? showIdOrText : `Member ID: ${member.id}`}} ) diff --git a/packages/ui/src/memberships/components/MemberRoles.tsx b/packages/ui/src/memberships/components/MemberRoles.tsx index d1c0064076..bb466ee63d 100644 --- a/packages/ui/src/memberships/components/MemberRoles.tsx +++ b/packages/ui/src/memberships/components/MemberRoles.tsx @@ -2,6 +2,7 @@ import React from 'react' import styled, { css } from 'styled-components' import { CountBadge, CountBadgeComponent } from '@/common/components/CountBadge' +import { FacebookIcon, TwitterIcon, YoutubeIcon, TelegramIcon, LinkedinIcon } from '@/common/components/icons/socials' import { LinkSymbol } from '@/common/components/icons/symbols' import { DarkTooltipInnerItemProps, @@ -24,6 +25,8 @@ export interface MemberRolesProps { size?: 'l' | 'm' roles: MemberRole[] wrapable?: boolean + memberDetails?: any + isOnDark?: boolean } export const rolesToMap = (roles: MemberRole[]): Map => { @@ -43,7 +46,7 @@ export const rolesToMap = (roles: MemberRole[]): Map => { return mapRoles } -export const MemberRoles = ({ size, max, wrapable, roles }: MemberRolesProps) => { +export const MemberRoles = ({ size, max, wrapable, roles, isOnDark, memberDetails }: MemberRolesProps) => { if (!roles || !roles.length) { roles = [] } @@ -91,6 +94,55 @@ export const MemberRoles = ({ size, max, wrapable, roles }: MemberRolesProps) => ) )} + {memberDetails?.externalResources && + memberDetails?.externalResources.map((item: any, key: number) => { + switch (item.source) { + case 'TELEGRAM': + return ( + + + + {item.key} + + + ) + + case 'TWITTER': + return ( + + + + + + ) + case 'LINKEDIN': + return ( + + + + + + ) + case 'YOUTUBE': + return ( + + + + + + ) + case 'FACEBOOK': + return ( + + + + + + ) + default: + break + } + })} {hiddenRoles > 0 && ( ` + width: ${({ size }) => (size === 'l' ? '24px' : '16px')}; + height: ${({ size }) => (size === 'l' ? '24px' : '16px')}; + font-size: ${({ size }) => (size === 'l' ? '10px' : '6px')}; + line-height: 1; + font-family: ${Fonts.Inter}; + font-weight: 700; + ${({ isOnDark }) => + isOnDark + ? css` + color: ${Colors.Black[300]}; + background-color: ${Colors.Black[600]}; + border-color: ${Colors.Black[600]}; + ` + : css` + color: ${Colors.Black[600]}; + background-color: ${Colors.Black[100]}; + border-color: ${Colors.Black[100]}; + `}; + + ${TooltipComponent}:hover > &, + ${TooltipComponent}:focus > & { + color: ${Colors.White} !important; + background-color: ${Colors.Blue[500]} !important; + border-color: ${Colors.Blue[500]} !important; + } +` export const MemberRoleHelpGroupItem = styled(MemberRoleHelp)` width: fit-content; min-width: ${({ size }) => (size === 'l' ? '24px' : '16px')};