From 8c12ca6f10685725b539663bdc9488d171346242 Mon Sep 17 00:00:00 2001 From: goldwolf Date: Sun, 3 Dec 2023 16:05:06 -0400 Subject: [PATCH 1/4] add-social-link --- .../components/icons/socials/Facebook.tsx | 21 +++-- .../components/icons/socials/Linkedin.tsx | 11 ++- .../components/icons/socials/Telegram.tsx | 22 +++-- .../components/icons/socials/Twitter.tsx | 26 ++++-- .../components/icons/socials/Youtube.tsx | 21 +++-- .../src/memberships/components/MemberInfo.tsx | 12 ++- .../memberships/components/MemberRoles.tsx | 80 ++++++++++++++++++- 7 files changed, 148 insertions(+), 45 deletions(-) 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/Twitter.tsx b/packages/ui/src/common/components/icons/socials/Twitter.tsx index b5e425cae8..cfd11412ca 100644 --- a/packages/ui/src/common/components/icons/socials/Twitter.tsx +++ b/packages/ui/src/common/components/icons/socials/Twitter.tsx @@ -2,11 +2,27 @@ import React from 'react' export const TwitterIcon = ({ 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..da8194f19d 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' @@ -62,6 +63,7 @@ export const MemberInfo = React.memo( const showMemberModal = useShowMemberModal(member.id) const showRoles = !onlyTop && !hideGroup && !showIdOrText const showId = !onlyTop && !!showIdOrText + const { member: memberDetails } = useMember(member.id) return ( )} - {showRoles && } + {showRoles && ( + + )} {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..0bad396114 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,54 @@ export const MemberRoles = ({ size, max, wrapable, roles }: MemberRolesProps) => ) )} + {memberDetails?.externalResources && + memberDetails?.externalResources.map((item: any) => { + switch (item.source) { + case 'TELEGRAM': + return ( + + + + + + ) + + 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')}; From ef916810874d81837864e0255bfc4fadea6875a8 Mon Sep 17 00:00:00 2001 From: goldwolf Date: Sun, 3 Dec 2023 16:43:20 -0400 Subject: [PATCH 2/4] m --- packages/ui/src/memberships/components/MemberRoles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/memberships/components/MemberRoles.tsx b/packages/ui/src/memberships/components/MemberRoles.tsx index 0bad396114..f51808edef 100644 --- a/packages/ui/src/memberships/components/MemberRoles.tsx +++ b/packages/ui/src/memberships/components/MemberRoles.tsx @@ -114,7 +114,7 @@ export const MemberRoles = ({ size, max, wrapable, roles, isOnDark, memberDetail ) - case 'LINKEDIN': + case 'LINKEDIN': return ( From 3b28821bee12c272c30e30acfbac551d794f3bf9 Mon Sep 17 00:00:00 2001 From: goldwolf Date: Sun, 3 Dec 2023 16:45:01 -0400 Subject: [PATCH 3/4] m1 --- packages/ui/src/memberships/components/MemberRoles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/memberships/components/MemberRoles.tsx b/packages/ui/src/memberships/components/MemberRoles.tsx index f51808edef..0bad396114 100644 --- a/packages/ui/src/memberships/components/MemberRoles.tsx +++ b/packages/ui/src/memberships/components/MemberRoles.tsx @@ -114,7 +114,7 @@ export const MemberRoles = ({ size, max, wrapable, roles, isOnDark, memberDetail ) - case 'LINKEDIN': + case 'LINKEDIN': return ( From 2805d526d6a728ff3ddd5db59a09af18dbdef8e1 Mon Sep 17 00:00:00 2001 From: goldwolf Date: Mon, 4 Dec 2023 10:24:31 -0400 Subject: [PATCH 4/4] yarn lint --- .../common/components/icons/socials/Twitter.tsx | 16 ++-------------- .../ui/src/memberships/components/MemberInfo.tsx | 3 ++- .../src/memberships/components/MemberRoles.tsx | 13 +++++++------ 3 files changed, 11 insertions(+), 21 deletions(-) diff --git a/packages/ui/src/common/components/icons/socials/Twitter.tsx b/packages/ui/src/common/components/icons/socials/Twitter.tsx index cfd11412ca..8fc2b3bbc3 100644 --- a/packages/ui/src/common/components/icons/socials/Twitter.tsx +++ b/packages/ui/src/common/components/icons/socials/Twitter.tsx @@ -6,23 +6,11 @@ export const TwitterIcon = ({ className }: { className?: string }) => { xmlns="http://www.w3.org/2000/svg" width="24" height="24" + viewBox="0 0 24 24" fill="currentColor" - viewBox="0 0 256 256" className={className} > - - - - - + ) } diff --git a/packages/ui/src/memberships/components/MemberInfo.tsx b/packages/ui/src/memberships/components/MemberInfo.tsx index da8194f19d..5ecb882122 100644 --- a/packages/ui/src/memberships/components/MemberInfo.tsx +++ b/packages/ui/src/memberships/components/MemberInfo.tsx @@ -63,6 +63,7 @@ export const MemberInfo = React.memo( const showMemberModal = useShowMemberModal(member.id) const showRoles = !onlyTop && !hideGroup && !showIdOrText const showId = !onlyTop && !!showIdOrText + const { member: memberDetails } = useMember(member.id) return ( @@ -123,7 +124,7 @@ export const MemberInfo = React.memo( )} - {showRoles && ( + {showRoles && memberDetails && ( { + memberDetails?.externalResources.map((item: any, key: number) => { switch (item.source) { case 'TELEGRAM': return ( - + + {item.key} ) case 'TWITTER': return ( - + @@ -116,7 +117,7 @@ export const MemberRoles = ({ size, max, wrapable, roles, isOnDark, memberDetail ) case 'LINKEDIN': return ( - + @@ -124,7 +125,7 @@ export const MemberRoles = ({ size, max, wrapable, roles, isOnDark, memberDetail ) case 'YOUTUBE': return ( - + @@ -132,7 +133,7 @@ export const MemberRoles = ({ size, max, wrapable, roles, isOnDark, memberDetail ) case 'FACEBOOK': return ( - +