Joystream · mia0115 · Dec 3, 2023 · Dec 3, 2023 · Dec 3, 2023 · Dec 4, 2023
diff --git 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 (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className={className}>
-      <g clipPath="url(#clip0_9559_15927)">
-        <path
-          d="M23.9999 12.0728C23.9996 9.77963 23.3423 7.53453 22.1057 5.60331C20.8691 3.67209 19.105 2.13563 17.0223 1.17584C14.9397 0.216044 12.6256 -0.126892 10.354 0.187628C8.08251 0.502149 5.94866 1.46095 4.20512 2.95053C2.46158 4.44011 1.18137 6.39808 0.516036 8.59265C-0.149294 10.7872 -0.171875 13.1265 0.450966 15.3335C1.07381 17.5405 2.31599 19.5228 4.03044 21.0457C5.7449 22.5687 7.85984 23.5685 10.1249 23.9268V15.5418H7.07788V12.0728H10.1249V9.42884C10.1249 6.42184 11.9169 4.75984 14.6569 4.75984C15.557 4.77275 16.455 4.85095 17.3439 4.99384V7.94784H15.8299C15.3741 7.88734 14.913 8.01031 14.5479 8.28972C14.1828 8.56913 13.9436 8.98211 13.8829 9.43784C13.8657 9.56546 13.863 9.69461 13.8749 9.82284V12.0728H17.1999L16.6679 15.5418H13.8679V23.9268C16.6919 23.4818 19.2643 22.0432 21.1218 19.8699C22.9793 17.6967 23.9999 14.9317 23.9999 12.0728Z"
-          fill="#C4CAD6"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_9559_15927">
-          <rect width="24" height="24" fill="white" />
-        </clipPath>
-      </defs>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 10h-2v2h2v6h3v-6h1.82l.18-2h-2v-.833c0-.478.096-.667.558-.667h1.442v-2.5h-2.404c-1.798 0-2.596.792-2.596 2.308v1.692z" />
     </svg>
   )
 }
diff --git 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 (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className={className}>
-      <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 8c0 .557-.447 1.008-1 1.008s-1-.45-1-1.008c0-.557.447-1.008 1-1.008s1 .452 1 1.008zm0 2h-2v6h2v-6zm3 0h-2v6h2v-2.861c0-1.722 2.002-1.881 2.002 0v2.861h1.998v-3.359c0-3.284-3.128-3.164-4-1.548v-1.093z" />
     </svg>
   )
 }
diff --git 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 (
-    <svg width="25" height="24" viewBox="0 0 25 24" fill="none" className={className}>
-      <g clipPath="url(#clip0_9559_15936)">
-        <path
-          d="M24.2844 2.41427C24.2651 2.3257 24.2227 2.24383 24.1614 2.17703C24.1001 2.11022 24.0222 2.06088 23.9356 2.03402C23.6205 1.97187 23.2945 1.99517 22.9914 2.10152C22.9914 2.10152 1.96365 9.65927 0.7629 10.4963C0.5034 10.6763 0.41715 10.7805 0.3744 10.9043C0.16665 11.4998 0.81315 11.7623 0.81315 11.7623L6.23265 13.5285C6.32419 13.5443 6.41816 13.5387 6.50715 13.512C7.74015 12.7335 18.9114 5.67902 19.5571 5.44202C19.6584 5.41127 19.7334 5.44202 19.7169 5.51702C19.4529 6.42152 9.80565 14.9948 9.7524 15.0473C9.72651 15.0685 9.70617 15.0957 9.69311 15.1265C9.68004 15.1574 9.67465 15.1909 9.6774 15.2243L9.1734 20.5125C9.1734 20.5125 8.9619 22.1625 10.6089 20.5125C11.7766 19.3433 12.8971 18.3758 13.4589 17.9055C15.3226 19.1918 17.3281 20.6145 18.1929 21.3555C18.338 21.4965 18.51 21.6067 18.6987 21.6796C18.8873 21.7526 19.0887 21.7867 19.2909 21.78C20.1159 21.7485 20.3409 20.8463 20.3409 20.8463C20.3409 20.8463 24.1719 5.43002 24.3009 3.36377C24.3129 3.16127 24.3301 3.03152 24.3316 2.89277C24.3385 2.73184 24.3226 2.57075 24.2844 2.41427Z"
-          fill="#C4CAD6"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_9559_15936">
-          <rect width="24" height="24" fill="white" transform="translate(0.333252)" />
-        </clipPath>
-      </defs>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path d="m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-23c-6.065 0-11 4.935-11 11s4.935 11 11 11 11-4.935 11-11-4.935-11-11-11z"></path>
+      <path d="m9.5 18c-.064 0-.13-.012-.191-.038-.187-.077-.309-.26-.309-.462v-3c0-.133.053-.26.146-.354l2.36-2.36-3.759 2.147c-.161.092-.359.087-.517-.013l-3-1.913c-.159-.101-.247-.283-.229-.47.019-.187.141-.348.315-.417l13-5.087c.171-.064.36-.035.5.08.141.115.207.297.175.476l-2 11c-.028.155-.128.288-.269.358s-.307.07-.447 0l-3.678-1.839-1.745 1.745c-.094.096-.222.147-.352.147zm2-3c.076 0 .152.017.224.053l3.403 1.702 1.721-9.463-11.25 4.402 1.917 1.222 6.737-3.85c.218-.123.494-.068.646.13.152.199.133.48-.044.657l-4.854 4.854v1.586l1.146-1.146c.096-.097.224-.147.354-.147z"></path>
     </svg>
   )
 }
diff --git 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 (
-    <svg width="25" height="24" viewBox="0 0 25 24" fill="none" className={className}>
-      <g clipPath="url(#clip0_9559_16883)">
-        <path
-          d="M24.1333 7.20156C24.1333 7.20156 23.9333 5.50156 23.1333 4.80156C22.2333 3.80156 21.2333 3.80156 20.7333 3.80156C17.3333 3.60156 12.3333 3.60156 12.3333 3.60156C12.3333 3.60156 7.33331 3.60156 3.93331 3.80156C3.43331 3.90156 2.43331 3.90156 1.53331 4.80156C0.833313 5.50156 0.533313 7.20156 0.533313 7.20156C0.533313 7.20156 0.333313 9.10156 0.333313 11.1016V12.9016C0.333313 14.8016 0.533313 16.8016 0.533313 16.8016C0.533313 16.8016 0.733313 18.5016 1.53331 19.2016C2.43331 20.2016 3.63331 20.1016 4.13331 20.2016C6.03331 20.4016 12.3333 20.4016 12.3333 20.4016C12.3333 20.4016 17.3333 20.4016 20.7333 20.1016C21.2333 20.0016 22.2333 20.0016 23.1333 19.1016C23.8333 18.4016 24.1333 16.7016 24.1333 16.7016C24.1333 16.7016 24.3333 14.8016 24.3333 12.8016V11.0016C24.3333 9.10156 24.1333 7.20156 24.1333 7.20156ZM9.83331 15.1016V8.40156L16.3333 11.8016L9.83331 15.1016Z"
-          fill="#C4CAD6"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_9559_16883">
-          <rect width="24" height="24" fill="white" transform="translate(0.333313)" />
-        </clipPath>
-      </defs>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width="24"
+      height="24"
+      viewBox="0 0 50 50"
+      className={className}
+    >
+      <path d="M 24.402344 9 C 17.800781 9 11.601563 9.5 8.300781 10.199219 C 6.101563 10.699219 4.199219 12.199219 3.800781 14.5 C 3.402344 16.898438 3 20.5 3 25 C 3 29.5 3.398438 33 3.898438 35.5 C 4.300781 37.699219 6.199219 39.300781 8.398438 39.800781 C 11.902344 40.5 17.898438 41 24.5 41 C 31.101563 41 37.097656 40.5 40.597656 39.800781 C 42.800781 39.300781 44.699219 37.800781 45.097656 35.5 C 45.5 33 46 29.402344 46.097656 24.902344 C 46.097656 20.402344 45.597656 16.800781 45.097656 14.300781 C 44.699219 12.101563 42.800781 10.5 40.597656 10 C 37.097656 9.5 31 9 24.402344 9 Z M 24.402344 11 C 31.601563 11 37.398438 11.597656 40.199219 12.097656 C 41.699219 12.5 42.898438 13.5 43.097656 14.800781 C 43.699219 18 44.097656 21.402344 44.097656 24.902344 C 44 29.199219 43.5 32.699219 43.097656 35.199219 C 42.800781 37.097656 40.800781 37.699219 40.199219 37.902344 C 36.597656 38.601563 30.597656 39.097656 24.597656 39.097656 C 18.597656 39.097656 12.5 38.699219 9 37.902344 C 7.5 37.5 6.300781 36.5 6.101563 35.199219 C 5.300781 32.398438 5 28.699219 5 25 C 5 20.398438 5.402344 17 5.800781 14.902344 C 6.101563 13 8.199219 12.398438 8.699219 12.199219 C 12 11.5 18.101563 11 24.402344 11 Z M 19 17 L 19 33 L 33 25 Z M 21 20.402344 L 29 25 L 21 29.597656 Z"></path>
     </svg>
   )
 }
diff --git 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 (
       <MemberInfoWrap
         isOnDark={isOnDark}
@@ -121,7 +124,15 @@ export const MemberInfo = React.memo(
             </IdHeader>
           )}
         </MemberHeaderWrapper>
-        {showRoles && <MemberRoles roles={member.roles} size={roleSize} max={maxRoles} />}
+        {showRoles && memberDetails && (
+          <MemberRoles
+            isOnDark={isOnDark}
+            roles={member.roles}
+            memberDetails={memberDetails}
+            size={roleSize}
+            max={maxRoles}
+          />
+        )}
         {showId && <MemberId>{isString(showIdOrText) ? showIdOrText : `Member ID: ${member.id}`}</MemberId>}
       </MemberInfoWrap>
     )

diff --git 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<string, MemberRole[]> => {
@@ -43,7 +46,7 @@ export const rolesToMap = (roles: MemberRole[]): Map<string, MemberRole[]> => {
   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) =>
               </Tooltip>
             )
           )}
+          {memberDetails?.externalResources &&
+            memberDetails?.externalResources.map((item: any, key: number) => {
+              switch (item.source) {
+                case 'TELEGRAM':
+                  return (
+                    <Tooltip key={key} tooltipText={`${item.source}: ${item.value}`}>
+                      <SocialLink isOnDark={isOnDark}>
+                        <TelegramIcon />
+                        {item.key}
+                      </SocialLink>
+                    </Tooltip>
+                  )
+
+                case 'TWITTER':
+                  return (
+                    <Tooltip key={key} tooltipText={`${item.source}: ${item.value}`}>
+                      <SocialLink isOnDark={isOnDark}>
+                        <TwitterIcon />
+                      </SocialLink>
+                    </Tooltip>
+                  )
+                case 'LINKEDIN':
+                  return (
+                    <Tooltip key={key} tooltipText={`${item.source}: ${item.value}`}>
+                      <SocialLink isOnDark={isOnDark}>
+                        <LinkedinIcon />
+                      </SocialLink>
+                    </Tooltip>
+                  )
+                case 'YOUTUBE':
+                  return (
+                    <Tooltip key={key} tooltipText={`${item.source}: ${item.value}`}>
+                      <SocialLink isOnDark={isOnDark}>
+                        <YoutubeIcon />
+                      </SocialLink>
+                    </Tooltip>
+                  )
+                case 'FACEBOOK':
+                  return (
+                    <Tooltip key={key} tooltipText={`${item.source}: ${item.value}`}>
+                      <SocialLink isOnDark={isOnDark}>
+                        <FacebookIcon />
+                      </SocialLink>
+                    </Tooltip>
+                  )
+                default:
+                  break
+              }
+            })}
           {hiddenRoles > 0 && (
             <Tooltip
               key="hidden"
@@ -180,6 +232,33 @@ export const MemberRoleHelp = styled(DefaultTooltip)<MemberRoleTooltipProps & Da
   }
 `
 
+export const SocialLink = styled(DefaultTooltip)<MemberRoleTooltipProps & DarkTooltipInnerItemProps>`
+  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)<MemberRoleTooltipProps & DarkTooltipInnerItemProps>`
   width: fit-content;
   min-width: ${({ size }) => (size === 'l' ? '24px' : '16px')};