feat: tweak UXs

src/routes/chat/ChannelChat/index.js

@@ -91,7 +91,7 @@ export default function ChannelChat({
       contacts={
         <StyledContacts>
           {filteredUsers.map(({ name, status, uid }) => {
-            return <Contact key={name} uid={uid} status={status} />;
+            return <Contact key={name} uid={uid} status={status} popover />;
           })}
         </StyledContacts>
       }

src/routes/chat/DMChat/styled.js

@@ -51,6 +51,7 @@ export const StyledDMChat = styled.article`
     display: flex;
     flex-direction: column;
     padding: 0 16px;
+    padding-top: 10px;
     height: calc(100vh - 56px - 80px);
     overflow-y: scroll;
     overflow-x: visible;

src/routes/chat/styled.js

@@ -104,13 +104,18 @@ const StyledWrapper = styled.div`
             .up {
               display: flex;
               justify-content: space-between;
+              align-items: center;
               .name {
                 font-weight: 600;
                 font-size: 14px;
                 line-height: 20px;
                 color: #52525b;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
               }
               time {
+                white-space: nowrap;
                 font-weight: 500;
                 font-size: 12px;
                 line-height: 18px;

src/routes/contacts/index.js

@@ -4,7 +4,7 @@ import { useGetContactsQuery } from "../../app/services/contact";
 import Search from "../../common/component/Search";
 import Contact from "../../common/component/Contact";
 import CurrentUser from "../../common/component/CurrentUser";
-import Profile from "./Profile";
+import Profile from "../../common/component/Profile";
 
 import StyledWrapper from "./styled";
 
@@ -33,7 +33,7 @@ export default function ContactsPage() {
       </div>
       {user_id && (
         <div className="right">
-          <Profile uid={user_id} />
+          <Profile data={contacts.find((c) => c.uid == user_id)} />
         </div>
       )}
     </StyledWrapper>