UI general fixes (#200)

packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx

@@ -14,7 +14,6 @@ import { CheckIcon } from "../Icons/CheckIcon";
 import { ClearSvg } from "../Icons/ClearIcon";
 import { CommunityIcon } from "../Icons/CommunityIcon";
 import { GroupIcon } from "../Icons/GroupIcon";
-import { Icon } from "../Icons/Icon";
 import { MoreIcon } from "../Icons/MoreIcon";
 import { ReadMessageIcon } from "../Icons/ReadMessageIcon";
 import { ReplyIcon } from "../Icons/ReplyActivityIcon";
@@ -99,10 +98,7 @@ export function ActivityMessage({
 
       <MessageWrapper className={`${!activity.isRead && "unread"}`}>
         <>
-          <Icon>
           <UserIcon />
-          </Icon>
-
           <ActivityContent>
             <MessageHeaderWrapper>
               <UserNameWrapper>

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

@@ -84,7 +84,7 @@ const ChatWrapper = styled.div`
 const ChannelsWrapper = styled.div`
   width: 21%;
   height: 100%;
-  min-width: 196px;
+  min-width: 250px;
   background-color: ${({ theme }) => theme.sectionBackgroundColor};
   padding: 10px 16px;
   display: flex;

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

@@ -15,7 +15,6 @@ import { Member } from "../Members/Member";
 import { SearchBlock } from "../SearchBlock";
 import { textMediumStyles } from "../Text";
 
-import { Wrapper } from "./ChatBody";
 import { ChatInput } from "./ChatInput";
 
 interface ChatCreationProps {
@@ -76,16 +75,17 @@ export function ChatCreation({
   );
 
   return (
-    <Wrapper>
+    <CreationWrapper className={`${narrow && "narrow"}`}>
-      <CreationWrapper>
+      <CreationBar
-        <CreationBar className={`${styledGroup.length === 5 && "limit"}`}>
+        className={`${styledGroup.length === 5 && narrow && "limit"}`}
+      >
         {narrow && (
           <BackButton
             onBtnClick={() => setChatState(ChatState.ChatBody)}
             className="narrow"
           />
         )}
-          <Column className={`${narrow && "narrow"}`}>
+        <Column>
           <InputBar>
             <InputText>To:</InputText>
             <StyledList>
@@ -160,17 +160,22 @@ export function ChatCreation({
         <ChatInput createChat={createChat} group={styledGroup} />
       )}
     </CreationWrapper>
-    </Wrapper>
   );
 }
 
 const CreationWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: 79%;
   height: 100%;
+  max-width: calc(100% - 250px);
   background-color: ${({ theme }) => theme.bodyBackgroundColor};
   padding: 8px 16px;
+
+  &.narrow {
+    width: 100%;
+    max-width: 100%;
+  }
 `;
 
 const CreationBar = styled.div`
@@ -190,9 +195,6 @@ const Column = styled.div`
   flex: 1;
   margin-right: 16px;
   overflow-x: hidden;
-
-  &.narrow {
-  }
 `;
 
 const InputBar = styled.div`

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

@@ -114,6 +114,7 @@ export function ChatTopbar({
       {showChannelMenu && (
         <ChannelMenu
           channel={activeChannel}
+          showNarrowMembers={showState === ChatBodyState.Members}
           switchMemberList={() => switchShowState(ChatBodyState.Members)}
           setShowChannelMenu={setShowChannelMenu}
           setEditGroup={setEditGroup}

packages/react-chat/src/components/Form/ChannelMenu.tsx

@@ -24,6 +24,7 @@ import { DropdownMenu, MenuItem, MenuText } from "./DropdownMenu";
 interface ChannelMenuProps {
   channel: ChannelData;
   setShowChannelMenu?: (val: boolean) => void;
+  showNarrowMembers?: boolean;
   switchMemberList?: () => void;
   setEditGroup?: (val: boolean) => void;
   className?: string;
@@ -32,6 +33,7 @@ interface ChannelMenuProps {
 export const ChannelMenu = ({
   channel,
   setShowChannelMenu,
+  showNarrowMembers,
   switchMemberList,
   setEditGroup,
   className,
@@ -62,7 +64,7 @@ export const ChannelMenu = ({
             }}
           >
             <MembersSmallIcon width={16} height={16} />
-            <MenuText>View Members</MenuText>
+            <MenuText>{showNarrowMembers ? "Hide" : "View"} Members</MenuText>
           </MenuItem>
         )}
         {channel.type === "group" && (

packages/react-chat/src/components/Icons/Icon.ts

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const Icon = styled.div`
-  width: 40px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: end;
-  border-radius: 50%;
-  background-color: #bcbdff;
-  background-size: contain;
-  background-position: center;
-  flex-shrink: 0;
-  position: relative;
-  cursor: pointer;
-`;

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

@@ -4,8 +4,7 @@ import styled from "styled-components";
 import { useIdentity } from "../../contexts/identityProvider";
 import { Contact } from "../../models/Contact";
 import { ContactMenu } from "../Form/ContactMenu";
-import { Icon } from "../Icons/Icon";
+import { IconBtn, UserAddress } from "../Messages/Styles";
-import { UserAddress } from "../Messages/Styles";
 
 import { UserLogo } from "./UserLogo";
 
@@ -78,13 +77,9 @@ export const MemberName = styled.p`
   white-space: nowrap;
 `;
 
-export const MemberIcon = styled(Icon)`
+export const MemberIcon = styled(IconBtn)`
   width: 29px;
   height: 29px;
-  position: relative;
-  background-size: contain;
-  background-position: center;
-  flex-shrink: 0;
 
   &.offline {
     &::after {

packages/react-chat/src/components/Messages/Styles.tsx

@@ -79,6 +79,23 @@ export const UserName = styled.p`
   ${textMediumStyles}
 `;
 
+export const UserNameBtn = styled.button`
+  padding: 0;
+  border: none;
+  outline: none;
+  position: relative;
+  color: ${({ theme }) => theme.tertiary};
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    cursor: default;
+    text-decoration: none;
+  }
+`;
+
 export const UserAddress = styled.p`
   font-size: 10px;
   line-height: 14px;
@@ -115,3 +132,25 @@ export const MessageText = styled.div`
   white-space: pre-wrap;
   color: ${({ theme }) => theme.primary};
 `;
+
+export const IconBtn = styled.button`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  flex-shrink: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: #bcbdff;
+  background-size: contain;
+  background-position: center;
+  padding: 0;
+  outline: none;
+  position: relative;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;

packages/react-chat/src/components/Messages/UiMessage.tsx

@@ -12,7 +12,6 @@ import { ChatMessage } from "../../models/ChatMessage";
 import { equalDate } from "../../utils";
 import { ChatMessageContent } from "../Chat/ChatMessageContent";
 import { ContactMenu } from "../Form/ContactMenu";
-import { Icon } from "../Icons/Icon";
 import { UntrustworthIcon } from "../Icons/UntrustworthIcon";
 import { UserLogo } from "../Members/UserLogo";
 import { Reactions } from "../Reactions/Reactions";
@@ -22,6 +21,7 @@ import { MessageReactions } from "./MessageReactions";
 import {
   ContentWrapper,
   DateSeparator,
+  IconBtn,
   MessageHeaderWrapper,
   MessageOuterWrapper,
   MessageText,
@@ -29,6 +29,7 @@ import {
   TimeWrapper,
   UserAddress,
   UserName,
+  UserNameBtn,
   UserNameWrapper,
 } from "./Styles";
 
@@ -111,10 +112,11 @@ export function UiMessage({
       <MessageWrapper className={`${mentioned && "mention"}`} id={message.id}>
         <MessageQuote quote={quote} />
         <UserMessageWrapper>
-          <Icon
+          <IconBtn
             onClick={() => {
               if (identity) setShowMenu((e) => !e);
             }}
+            disabled={!identity}
           >
             {showMenu && (
               <ContactMenu id={message.sender} setShowMenu={setShowMenu} />
@@ -128,11 +130,21 @@ export function UiMessage({
                 ["green", 360],
               ]}
             />
-          </Icon>
+          </IconBtn>
           <ContentWrapper>
             <MessageHeaderWrapper>
               <UserNameWrapper>
-                <UserName> {contact?.customName ?? contact.trueName}</UserName>
+                <UserNameBtn
+                  onClick={() => {
+                    if (identity) setShowMenu((e) => !e);
+                  }}
+                  disabled={!identity}
+                >
+                  <UserName>
+                    {" "}
+                    {contact?.customName ?? contact.trueName}
+                  </UserName>
+                </UserNameBtn>
                 <UserAddress className="chat">
                   {message.sender.slice(0, 5)}...{message.sender.slice(-3)}
                 </UserAddress>
@@ -156,12 +168,14 @@ export function UiMessage({
             )}
           </ContentWrapper>
         </UserMessageWrapper>
+        {identity && (
           <Reactions
             message={message}
             setReply={setReply}
             messageReactions={messageReactions}
             setMessageReactions={setMessageReactions}
           />
+        )}
       </MessageWrapper>
     </MessageOuterWrapper>
   );

packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx

@@ -55,7 +55,7 @@ export function UserCreationButtons({ permission }: UserCreationProps) {
             setCreationStartModal(false);
           }}
         >
-          Use a throwaway account
+          Use a throwaway profile
         </ThrowAwayButton>
       )}
     </Wrapper>