UI improvements (#119)

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`

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;
+`;

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;

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;

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;
 `;