Fix icons size (#33)

packages/react-chat/src/components/Chat/ChatMessages.tsx

@@ -73,7 +73,6 @@ const MessagesWrapper = styled.div`
 const MessageWrapper = styled.div`
   width: 100%;
   display: flex;
-  align-items: center;
   padding: 8px 0;
   margin-bottom: 8px;
 `;
@@ -121,6 +120,7 @@ export const Icon = styled.div`
   align-items: end;
   border-radius: 50%;
   background-color: #bcbdff;
+  flex-shrink: 0;
 `;
 
 const UserNameWrapper = styled.div<ThemeProps>`

packages/react-chat/src/components/Icons/UserIcon.tsx

@@ -3,19 +3,19 @@ import styled from "styled-components";
 
 import { Theme } from "../../styles/themes";
 
-interface ThemeProps {
+interface UserIconProps {
   theme: Theme;
+  memberView?: boolean;
 }
 
-export const UserIcon = ({ theme }: ThemeProps) => {
+export const UserIcon = ({ theme, memberView }: UserIconProps) => {
   return (
     <Icon
-      width="34"
-      height="34"
       viewBox="0 0 34 34"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       theme={theme}
+      memberView={memberView}
     >
       <ellipse cx="17" cy="10.3883" rx="6.94445" ry="6.94445" />
       <path
@@ -27,7 +27,10 @@ export const UserIcon = ({ theme }: ThemeProps) => {
   );
 };
 
-const Icon = styled.svg<ThemeProps>`
+const Icon = styled.svg<UserIconProps>`
+  width: ${({ memberView }) => (memberView ? "20px" : "34px")};
+  height: ${({ memberView }) => (memberView ? "20px" : "34px")};
+
   & > path,
   & > ellipse {
     fill: ${({ theme }) => theme.iconUserColor};

packages/react-chat/src/components/Members.tsx

@@ -21,9 +21,9 @@ export function Members({ theme, channel, setShowChannels }: MembersProps) {
         <MemberCategory>
           <MemberCategoryName theme={theme}>You</MemberCategoryName>
           <MemberData>
-            <Icon>
-              <UserIcon theme={theme} />
-            </Icon>
+            <MemberIcon>
+              <UserIcon theme={theme} memberView={true} />
+            </MemberIcon>
             <MemberName theme={theme}>Guest564732</MemberName>
           </MemberData>
         </MemberCategory>
@@ -82,7 +82,7 @@ export function Member({
         className={isOnline ? "online" : ""}
         theme={theme}
       >
-        {!member.avatar && <UserIcon theme={theme} />}
+        {!member.avatar && <UserIcon theme={theme} memberView={true} />}
       </MemberIcon>
       <MemberName theme={theme}>{member.name}</MemberName>
     </MemberData>
@@ -148,6 +148,8 @@ const MemberData = styled.div`
 `;
 
 const MemberIcon = styled(Icon)<ThemeProps>`
+  width: 24px;
+  height: 24px;
   position: relative;
   background-size: contain;
   background-position: center;
@@ -159,8 +161,8 @@ const MemberIcon = styled(Icon)<ThemeProps>`
       position: absolute;
       right: -1px;
       bottom: 1px;
-      width: 9px;
-      height: 9px;
+      width: 7px;
+      height: 7px;
       border-radius: 50%;
       background-color: #4ebc60;
       border: 2px solid ${({ theme }) => theme.bodyBackgroundColor};