diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx index e570ddd9..f2c22f69 100644 --- a/packages/react-chat/src/components/Members/Member.tsx +++ b/packages/react-chat/src/components/Members/Member.tsx @@ -5,9 +5,10 @@ import { useMessengerContext } from "../../contexts/messengerProvider"; import { Contact } from "../../models/Contact"; import { ContactMenu } from "../Form/ContactMenu"; import { Icon } from "../Icons/Icon"; -import { UserIcon } from "../Icons/UserIcon"; import { UserAddress } from "../Messages/Styles"; +import { UserLogo } from "./UserLogo"; + interface MemberProps { contact: Contact; isOnline?: boolean; @@ -46,7 +47,15 @@ export function Member({ onClick={() => setShowMenu((e) => !e)} > {showMenu && } - + {contact?.customName ?? contact.trueName} @@ -77,8 +86,8 @@ export const MemberName = styled.p` `; export const MemberIcon = styled(Icon)` - width: 24px; - height: 24px; + width: 29px; + height: 29px; position: relative; background-size: contain; background-position: center; diff --git a/packages/react-chat/src/components/Members/UserLogo.tsx b/packages/react-chat/src/components/Members/UserLogo.tsx index 5c30cc5d..ee8e1827 100644 --- a/packages/react-chat/src/components/Members/UserLogo.tsx +++ b/packages/react-chat/src/components/Members/UserLogo.tsx @@ -1,14 +1,23 @@ import React, { useMemo } from "react"; import styled from "styled-components"; +import { Contact } from "../../models/Contact"; + type UserLogoProps = { radius: number; colorWheel: [string, number][]; + contact: Contact; + showOnlineStatus?: boolean; icon?: string; - text?: string; }; -export function UserLogo({ icon, text, radius, colorWheel }: UserLogoProps) { +export function UserLogo({ + icon, + contact, + radius, + colorWheel, + showOnlineStatus, +}: UserLogoProps) { const conicGradient = useMemo(() => { const colors = colorWheel .map((color, idx) => { @@ -18,21 +27,41 @@ export function UserLogo({ icon, text, radius, colorWheel }: UserLogoProps) { .join(","); return `conic-gradient(${colors})`; }, [colorWheel]); + + const letters = useMemo(() => { + if (contact?.customName) { + return contact.customName.slice(0, 2); + } + if (contact.trueName) { + return contact.trueName.slice(0, 2); + } + }, [contact]); + + const logoClassnName = useMemo(() => { + if (showOnlineStatus) { + if (contact.online) { + return "online"; + } + return "offline"; + } + return ""; + }, [contact]); + return ( - - {!icon && text && {text}} + + {!icon && {letters}} ); } -const TextWrapper = styled.div` +const TextWrapper = styled.div<{ radius: number }>` font-family: Inter; font-style: normal; font-weight: bold; - font-size: 32px; - line-height: 38px; + font-size: calc(${({ radius }) => radius}px / 2.5); + line-height: calc(${({ radius }) => radius}px / 2.1); display: flex; align-items: center; text-align: center; @@ -57,6 +86,34 @@ const Logo = styled.div<{ radius: number; icon?: string }>` color: ${({ theme }) => theme.iconTextColor}; margin: auto; display: flex; + + &.offline { + &::after { + content: ""; + position: absolute; + right: -1px; + bottom: -2px; + width: 7px; + height: 7px; + border-radius: 50%; + background-color: ${({ theme }) => theme.secondary}; + border: 2px solid ${({ theme }) => theme.bodyBackgroundColor}; + } + } + + &.online { + &::after { + content: ""; + position: absolute; + right: -1px; + bottom: -2px; + width: 7px; + height: 7px; + border-radius: 50%; + background-color: #4ebc60; + border: 2px solid ${({ theme }) => theme.bodyBackgroundColor}; + } + } `; const Wrapper = styled.div<{ radius: number; conicGradient: string }>` diff --git a/packages/react-chat/src/components/Messages/UiMessage.tsx b/packages/react-chat/src/components/Messages/UiMessage.tsx index 78b715cd..60ee025f 100644 --- a/packages/react-chat/src/components/Messages/UiMessage.tsx +++ b/packages/react-chat/src/components/Messages/UiMessage.tsx @@ -15,7 +15,7 @@ import { Icon } from "../Icons/Icon"; import { ReactionSvg } from "../Icons/ReactionIcon"; import { ReplySvg } from "../Icons/ReplyIcon"; import { UntrustworthIcon } from "../Icons/UntrustworthIcon"; -import { UserIcon } from "../Icons/UserIcon"; +import { UserLogo } from "../Members/UserLogo"; import { MessageQuote } from "./MessageQuote"; import { @@ -116,7 +116,15 @@ export function UiMessage({ {showMenu && ( )} - + diff --git a/packages/react-chat/src/components/Modals/UserCreationModal.tsx b/packages/react-chat/src/components/Modals/UserCreationModal.tsx index 5e68eea3..1833a405 100644 --- a/packages/react-chat/src/components/Modals/UserCreationModal.tsx +++ b/packages/react-chat/src/components/Modals/UserCreationModal.tsx @@ -7,6 +7,7 @@ import { useSetNikcname, } from "../../contexts/identityProvider"; import { useModal } from "../../contexts/modalProvider"; +import { Contact } from "../../models/Contact"; import { NameInput } from "../../styles/Inputs"; import { LeftIconSvg } from "../Icons/LeftIcon"; import { UserLogo } from "../Members/UserLogo"; @@ -44,7 +45,7 @@ export function UserCreationModal() { - + setModal(false)}>