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 />
-            <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,101 +75,107 @@ 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
+        {narrow && (
-              onBtnClick={() => setChatState(ChatState.ChatBody)}
+          <BackButton
-              className="narrow"
+            onBtnClick={() => setChatState(ChatState.ChatBody)}
-            />
+            className="narrow"
-          )}
+          />
-          <Column className={`${narrow && "narrow"}`}>
+        )}
-            <InputBar>
+        <Column>
-              <InputText>To:</InputText>
+          <InputBar>
-              <StyledList>
+            <InputText>To:</InputText>
-                {styledGroup.map((member) => (
+            <StyledList>
-                  <StyledMember key={member}>
+              {styledGroup.map((member) => (
-                    <StyledName>{member.slice(0, 10)}</StyledName>
+                <StyledMember key={member}>
-                    <CloseButton onClick={() => removeMember(member)}>
+                  <StyledName>{member.slice(0, 10)}</StyledName>
-                      <CrossIcon memberView={true} />
+                  <CloseButton onClick={() => removeMember(member)}>
-                    </CloseButton>
+                    <CrossIcon memberView={true} />
-                  </StyledMember>
+                  </CloseButton>
-                ))}
+                </StyledMember>
-              </StyledList>
+              ))}
-              {styledGroup.length < 5 && (
+            </StyledList>
-                <SearchMembers>
+            {styledGroup.length < 5 && (
-                  <Input
+              <SearchMembers>
-                    value={query}
+                <Input
-                    onInput={(e) => setQuery(e.currentTarget.value)}
+                  value={query}
-                  />
+                  onInput={(e) => setQuery(e.currentTarget.value)}
-                  <SearchBlock
+                />
-                    query={query}
+                <SearchBlock
-                    discludeList={styledGroup}
+                  query={query}
-                    onClick={addMember}
+                  discludeList={styledGroup}
-                  />
+                  onClick={addMember}
-                </SearchMembers>
+                />
-              )}
+              </SearchMembers>
-              {!narrow && styledGroup.length === 5 && (
-                <LimitAlert>5 user Limit reached</LimitAlert>
-              )}
-            </InputBar>
-            {narrow && styledGroup.length === 5 && (
-              <LimitAlert className="narrow">5 user Limit reached</LimitAlert>
             )}
-          </Column>
+            {!narrow && styledGroup.length === 5 && (
-          <CreationBtn
+              <LimitAlert>5 user Limit reached</LimitAlert>
-            disabled={styledGroup.length === 0}
+            )}
-            onClick={() => {
+          </InputBar>
-              if (!activeChannel) {
+          {narrow && styledGroup.length === 5 && (
-                createChat(styledGroup);
+            <LimitAlert className="narrow">5 user Limit reached</LimitAlert>
-              } else {
+          )}
-                addMembers(styledGroup, activeChannel.id);
+        </Column>
-              }
+        <CreationBtn
-              setEditGroup?.(false);
+          disabled={styledGroup.length === 0}
-            }}
+          onClick={() => {
-          >
+            if (!activeChannel) {
-            Confirm
+              createChat(styledGroup);
-          </CreationBtn>
+            } else {
-          {!narrow && <ActivityButton className="creation" />}
+              addMembers(styledGroup, activeChannel.id);
-        </CreationBar>
+            }
-        {!setEditGroup && !query && (
+            setEditGroup?.(false);
-          <Contacts>
+          }}
-            <ContactsHeading>Contacts</ContactsHeading>
+        >
-            <ContactsList>
+          Confirm
-              {identity &&
+        </CreationBtn>
-                Object.values(contacts)
+        {!narrow && <ActivityButton className="creation" />}
-                  .filter(
+      </CreationBar>
-                    (e) =>
+      {!setEditGroup && !query && (
-                      e.id != bufToHex(identity.publicKey) &&
+        <Contacts>
-                      !styledGroup.includes(e.id)
+          <ContactsHeading>Contacts</ContactsHeading>
-                  )
+          <ContactsList>
-                  .map((contact) => (
+            {identity &&
-                    <Member
+              Object.values(contacts)
-                      key={contact.id}
+                .filter(
-                      contact={contact}
+                  (e) =>
-                      isOnline={contact.online}
+                    e.id != bufToHex(identity.publicKey) &&
-                      onClick={() => addMember(contact.id)}
+                    !styledGroup.includes(e.id)
-                    />
+                )
-                  ))}
+                .map((contact) => (
-            </ContactsList>
+                  <Member
-          </Contacts>
+                    key={contact.id}
-        )}
+                    contact={contact}
-        {!activeChannel && (
+                    isOnline={contact.online}
-          <ChatInput createChat={createChat} group={styledGroup} />
+                    onClick={() => addMember(contact.id)}
-        )}
+                  />
-      </CreationWrapper>
+                ))}
-    </Wrapper>
+          </ContactsList>
+        </Contacts>
+      )}
+      {!activeChannel && (
+        <ChatInput createChat={createChat} group={styledGroup} />
+      )}
+    </CreationWrapper>
   );
 }
 
 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>
-        <Reactions
+        {identity && (
-          message={message}
+          <Reactions
-          setReply={setReply}
+            message={message}
-          messageReactions={messageReactions}
+            setReply={setReply}
-          setMessageReactions={setMessageReactions}
+            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>