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)}>