From 52e457991b019da5f79a1eae630f8aa707c722f3 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Fri, 5 Nov 2021 18:37:39 +0100
Subject: [PATCH] UI improvements (#119)

---
 .../react-chat/src/components/Channels/Channel.tsx    |  3 +++
 .../src/components/Channels/EmptyChannel.tsx          |  8 ++++++--
 packages/react-chat/src/components/Chat.tsx           |  8 +++++++-
 packages/react-chat/src/components/Chat/ChatBody.tsx  | 11 ++++++++++-
 .../src/components/Skeleton/CommunitySkeleton.tsx     |  1 -
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx
index d80d3668..b5867e45 100644
--- a/packages/react-chat/src/components/Channels/Channel.tsx
+++ b/packages/react-chat/src/components/Channels/Channel.tsx
@@ -103,6 +103,9 @@ export const ChannelInfo = styled.div`
 const ChannelTextInfo = styled.div`
   display: flex;
   flex-direction: column;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 `;
 
 export const ChannelLogo = styled.div`
diff --git a/packages/react-chat/src/components/Channels/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
index 66a81873..54d791c4 100644
--- a/packages/react-chat/src/components/Channels/EmptyChannel.tsx
+++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
@@ -36,11 +36,11 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
           <span>{channel.name.slice(0, 10)}</span>.
         </EmptyText>
       ) : channel.type === "group" ? (
-        <EmptyText>
+        <EmptyTextGroup>
           You created a group with{" "}
           <span>{groupName.slice(groupName.length - 1)}</span> and{" "}
           <span>{groupName.at(-1)}</span>
-        </EmptyText>
+        </EmptyTextGroup>
       ) : (
         <EmptyText>
           Welcome to the beginning of the <span>#{channel.name}</span> <br />
@@ -93,3 +93,7 @@ const EmptyText = styled.p`
 
   ${textMediumStyles}
 `;
+
+const EmptyTextGroup = styled(EmptyText)`
+  word-break: break-all;
+`;
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 408ad164..dea84ff8 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -55,7 +55,9 @@ export function Chat() {
           {communityData ? (
             <StyledCommunity onClick={showModal} community={communityData} />
           ) : (
-            <CommunitySkeleton />
+            <SkeletonWrapper>
+              <CommunitySkeleton />
+            </SkeletonWrapper>
           )}
           <Channels
             membersList={membersList}
@@ -126,6 +128,10 @@ const ChannelsWrapper = styled.div`
   flex-direction: column;
 `;
 
+const SkeletonWrapper = styled.div`
+  margin-bottom: 16px;
+`;
+
 const StyledCommunity = styled(Community)`
   padding: 0 0 0 8px;
   margin: 0 0 16px;
diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index 2e617d35..30b76e5c 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -108,7 +108,9 @@ export function ChatBody({
                 />
               </>
             ) : (
-              <CommunitySkeleton />
+              <SkeletonWrapper>
+                <CommunitySkeleton />
+              </SkeletonWrapper>
             )}
           </ChannelWrapper>
 
@@ -184,6 +186,7 @@ export function ChatBody({
 }
 
 const ChatBodyWrapper = styled.div`
+  width: 61%;
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -198,15 +201,21 @@ const ChatBodyWrapper = styled.div`
 const ChannelWrapper = styled.div`
   display: flex;
   align-items: center;
+  max-width: 85%;
 
   &.narrow {
     width: calc(100% - 46px);
   }
 `;
 
+const SkeletonWrapper = styled.div`
+  padding: 8px;
+`;
+
 const ChatTopbar = styled.div`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding: 5px 8px;
   background: ${({ theme }) => theme.bodyBackgroundColor};
   position: relative;
diff --git a/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx b/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx
index 3b322aea..f48c6691 100644
--- a/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx
+++ b/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx
@@ -26,5 +26,4 @@ const LogoSkeleton = styled(Skeleton)`
 const Loading = styled.div`
   display: flex;
   padding: 0 0 0 10px;
-  margin: 0 0 16px;
 `;