Change user icons to match design (#161)

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 && <ContactMenu id={contact.id} setShowMenu={setShowMenu} />}
-        <UserIcon memberView={true} />
+        <UserLogo
+          contact={contact}
+          radius={30}
+          colorWheel={[
+            ["red", 150],
+            ["blue", 250],
+            ["green", 360],
+          ]}
+        />
       </MemberIcon>
       <MemberName>{contact?.customName ?? contact.trueName}</MemberName>
       <UserAddress>
@@ -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;

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 (
     <Wrapper radius={radius} conicGradient={conicGradient}>
-      <Logo icon={icon} radius={radius}>
-        {!icon && text && <TextWrapper>{text}</TextWrapper>}
+      <Logo icon={icon} radius={radius} className={logoClassnName}>
+        {!icon && <TextWrapper radius={radius}>{letters}</TextWrapper>}
       </Logo>
     </Wrapper>
   );
 }
 
-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 }>`

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 && (
               <ContactMenu id={message.sender} setShowMenu={setShowMenu} />
             )}
-            <UserIcon />
+            <UserLogo
+              contact={contact}
+              radius={40}
+              colorWheel={[
+                ["red", 150],
+                ["blue", 250],
+                ["green", 360],
+              ]}
+            />
           </Icon>
           <ContentWrapper>
             <MessageHeaderWrapper>

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() {
           </StyledHint>
           <LogoWrapper>
             <UserLogo
-              text={customNameInput.slice(0, 2)}
+              contact={{ trueName: customNameInput } as Contact}
               radius={80}
               colorWheel={[
                 ["red", 150],
@@ -60,7 +61,7 @@ export function UserCreationModal() {
           />
         </Content>
       </MiddleSection>
-      <ButtonSection style={{ marginBottom: "40px" }}>
+      <ButtonSection>
         <BackBtn onClick={() => setModal(false)}>
           <LeftIconSvg width={28} height={28} />
         </BackBtn>