UI general fixes (#200)

2022-01-24 21:39:47 +01:00 · 2022-01-24 21:39:47 +01:00 · fb0bd2fc8c
parent 39b9a86ef4
commit fb0bd2fc8c
10 changed files with 163 additions and 130 deletions
--- a/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx
+++ b/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>
-
+          <UserIcon />
          <ActivityContent>
            <MessageHeaderWrapper>
              <UserNameWrapper>
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/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;
--- a/packages/react-chat/src/components/Chat/ChatCreation.tsx
+++ b/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>
-        <CreationBar className={`${styledGroup.length === 5 && "limit"}`}>
-          {narrow && (
-            <BackButton
-              onBtnClick={() => setChatState(ChatState.ChatBody)}
-              className="narrow"
-            />
-          )}
-          <Column className={`${narrow && "narrow"}`}>
-            <InputBar>
-              <InputText>To:</InputText>
-              <StyledList>
-                {styledGroup.map((member) => (
-                  <StyledMember key={member}>
-                    <StyledName>{member.slice(0, 10)}</StyledName>
-                    <CloseButton onClick={() => removeMember(member)}>
-                      <CrossIcon memberView={true} />
-                    </CloseButton>
-                  </StyledMember>
-                ))}
-              </StyledList>
-              {styledGroup.length < 5 && (
-                <SearchMembers>
-                  <Input
-                    value={query}
-                    onInput={(e) => setQuery(e.currentTarget.value)}
-                  />
-                  <SearchBlock
-                    query={query}
-                    discludeList={styledGroup}
-                    onClick={addMember}
-                  />
-                </SearchMembers>
-              )}
-              {!narrow && styledGroup.length === 5 && (
-                <LimitAlert>5 user Limit reached</LimitAlert>
-              )}
-            </InputBar>
-            {narrow && styledGroup.length === 5 && (
-              <LimitAlert className="narrow">5 user Limit reached</LimitAlert>
+    <CreationWrapper className={`${narrow && "narrow"}`}>
+      <CreationBar
+        className={`${styledGroup.length === 5 && narrow && "limit"}`}
+      >
+        {narrow && (
+          <BackButton
+            onBtnClick={() => setChatState(ChatState.ChatBody)}
+            className="narrow"
+          />
+        )}
+        <Column>
+          <InputBar>
+            <InputText>To:</InputText>
+            <StyledList>
+              {styledGroup.map((member) => (
+                <StyledMember key={member}>
+                  <StyledName>{member.slice(0, 10)}</StyledName>
+                  <CloseButton onClick={() => removeMember(member)}>
+                    <CrossIcon memberView={true} />
+                  </CloseButton>
+                </StyledMember>
+              ))}
+            </StyledList>
+            {styledGroup.length < 5 && (
+              <SearchMembers>
+                <Input
+                  value={query}
+                  onInput={(e) => setQuery(e.currentTarget.value)}
+                />
+                <SearchBlock
+                  query={query}
+                  discludeList={styledGroup}
+                  onClick={addMember}
+                />
+              </SearchMembers>
            )}
-          </Column>
-          <CreationBtn
-            disabled={styledGroup.length === 0}
-            onClick={() => {
-              if (!activeChannel) {
-                createChat(styledGroup);
-              } else {
-                addMembers(styledGroup, activeChannel.id);
-              }
-              setEditGroup?.(false);
-            }}
-          >
-            Confirm
-          </CreationBtn>
-          {!narrow && <ActivityButton className="creation" />}
-        </CreationBar>
-        {!setEditGroup && !query && (
-          <Contacts>
-            <ContactsHeading>Contacts</ContactsHeading>
-            <ContactsList>
-              {identity &&
-                Object.values(contacts)
-                  .filter(
-                    (e) =>
-                      e.id != bufToHex(identity.publicKey) &&
-                      !styledGroup.includes(e.id)
-                  )
-                  .map((contact) => (
-                    <Member
-                      key={contact.id}
-                      contact={contact}
-                      isOnline={contact.online}
-                      onClick={() => addMember(contact.id)}
-                    />
-                  ))}
-            </ContactsList>
-          </Contacts>
-        )}
-        {!activeChannel && (
-          <ChatInput createChat={createChat} group={styledGroup} />
-        )}
-      </CreationWrapper>
-    </Wrapper>
+            {!narrow && styledGroup.length === 5 && (
+              <LimitAlert>5 user Limit reached</LimitAlert>
+            )}
+          </InputBar>
+          {narrow && styledGroup.length === 5 && (
+            <LimitAlert className="narrow">5 user Limit reached</LimitAlert>
+          )}
+        </Column>
+        <CreationBtn
+          disabled={styledGroup.length === 0}
+          onClick={() => {
+            if (!activeChannel) {
+              createChat(styledGroup);
+            } else {
+              addMembers(styledGroup, activeChannel.id);
+            }
+            setEditGroup?.(false);
+          }}
+        >
+          Confirm
+        </CreationBtn>
+        {!narrow && <ActivityButton className="creation" />}
+      </CreationBar>
+      {!setEditGroup && !query && (
+        <Contacts>
+          <ContactsHeading>Contacts</ContactsHeading>
+          <ContactsList>
+            {identity &&
+              Object.values(contacts)
+                .filter(
+                  (e) =>
+                    e.id != bufToHex(identity.publicKey) &&
+                    !styledGroup.includes(e.id)
+                )
+                .map((contact) => (
+                  <Member
+                    key={contact.id}
+                    contact={contact}
+                    isOnline={contact.online}
+                    onClick={() => addMember(contact.id)}
+                  />
+                ))}
+          </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`
--- a/packages/react-chat/src/components/Chat/ChatTopbar.tsx
+++ b/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}
--- a/packages/react-chat/src/components/Form/ChannelMenu.tsx
+++ b/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" && (
--- a/packages/react-chat/src/components/Icons/Icon.ts
+++ b/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;
-`;
--- a/packages/react-chat/src/components/Members/Member.tsx
+++ b/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 { UserAddress } from "../Messages/Styles";
+import { IconBtn, 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 {
--- a/packages/react-chat/src/components/Messages/Styles.tsx
+++ b/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;
+  }
+`;
--- a/packages/react-chat/src/components/Messages/UiMessage.tsx
+++ b/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
-          message={message}
-          setReply={setReply}
-          messageReactions={messageReactions}
-          setMessageReactions={setMessageReactions}
-        />
+        {identity && (
+          <Reactions
+            message={message}
+            setReply={setReply}
+            messageReactions={messageReactions}
+            setMessageReactions={setMessageReactions}
+          />
+        )}
      </MessageWrapper>
    </MessageOuterWrapper>
  );
--- a/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx
+++ b/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>