refactor: update UXs

src/routes/chat/ChannelChat/index.js

@@ -66,7 +66,26 @@ export default function ChannelChat({
             <span className="title">{name}</span>
             <span className="desc">{description}</span>
           </div>
-          <ul className="members">members</ul>
+          <ul className="opts">
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.alert.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.pin.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.people.svg"
+                alt="opt icon"
+              />
+            </li>
+          </ul>
         </StyledHeader>
       }
       contacts={

src/routes/chat/ChannelChat/styled.js

@@ -22,6 +22,20 @@ export const StyledHeader = styled.header`
       color: #616161;
     }
   }
+  .opts {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    .opt {
+      cursor: pointer;
+      width: 24px;
+      height: 24px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
 `;
 export const StyledNotification = styled.div`
   padding: 3px 8px;
@@ -57,7 +71,7 @@ export const StyledContacts = styled.div`
   height: calc(100vh - 56px);
   overflow-y: scroll;
   background: #f5f6f7;
-  padding: 16px;
+  padding: 8px;
 `;
 export const StyledChannelChat = styled.article`
   position: relative;

src/routes/chat/ChannelList.js

@@ -22,11 +22,10 @@ const NavItem = ({ data, setFiles }) => {
       isActive: monitor.canDrop() && monitor.isOver(),
     }),
   }));
-  const { id, is_public, name, description, unreads } = data;
+  const { id, is_public, name, unreads } = data;
   return (
     <NavLink
       ref={drop}
-      title={description}
       key={id}
       className={`link ${isActive ? "drop_over" : ""}`}
       to={`/chat/channel/${id}`}

src/routes/chat/DMChat/index.js

@@ -36,6 +36,32 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
       header={
         <StyledHeader>
           <Contact interactive={false} uid={currUser.uid} />
+          <ul className="opts">
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.call.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.video.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.people.add.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.mark.read.svg"
+                alt="opt icon"
+              />
+            </li>
+          </ul>
         </StyledHeader>
       }
     >

src/routes/chat/DMChat/styled.js

@@ -27,6 +27,20 @@ export const StyledHeader = styled.header`
       color: #616161;
     }
   }
+  .opts {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    .opt {
+      cursor: pointer;
+      width: 24px;
+      height: 24px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
 `;
 export const StyledDMChat = styled.article`
   position: relative;

src/routes/chat/Layout.js

@@ -20,7 +20,9 @@ const StyledWrapper = styled.article`
     justify-content: space-between;
     position: relative;
     .members {
-      border-top: 1px solid transparent;
+      box-shadow: inset 0px 10px 2px -10px rgba(0, 0, 0, 0.1);
+      /* margin-top: 1px; */
+      /* border-top: 1px solid transparent; */
     }
   }
   .drag_tip {

src/routes/chat/index.js

@@ -10,6 +10,7 @@ import { useGetContactsQuery } from "../../app/services/contact";
 import StyledWrapper from "./styled";
 import Search from "../../common/component/Search";
 import Avatar from "../../common/component/Avatar";
+import CurrentUser from "../../common/component/CurrentUser";
 import ChannelChat from "./ChannelChat";
 import DMChat from "./DMChat";
 import ChannelList from "./ChannelList";
@@ -41,7 +42,11 @@ export default function ChatPage() {
     return Object.values(ChannelMsgData[gid] || {}).filter((m) => m.unread)
       .length;
   };
-
+  const handleToggleExpand = (evt) => {
+    const { currentTarget } = evt;
+    const listEle = currentTarget.parentElement.parentElement;
+    listEle.classList.toggle("collapse");
+  };
   if (!contacts) return null;
   const tmpSessionUser = contacts.find((c) => c.uid == user_id);
   const transformedChannels = Object.entries(channels).map(([key, obj]) => {
@@ -72,8 +77,12 @@ export default function ChatPage() {
           <Search />
           <div className="list channels">
             <h3 className="title">
-              <span className="txt">
-                <AiOutlineCaretDown size={18} color="#78787C" />
+              <span className="txt" onClick={handleToggleExpand}>
+                <AiOutlineCaretDown
+                  className="icon"
+                  size={18}
+                  color="#78787C"
+                />
                 CHANNELS
               </span>
               <MdAdd
@@ -91,8 +100,12 @@ export default function ChatPage() {
           </div>
           <div className="list dms">
             <h3 className="title">
-              <span className="txt">
-                <AiOutlineCaretDown size={18} color="#78787C" />
+              <span className="txt" onClick={handleToggleExpand}>
+                <AiOutlineCaretDown
+                  className="icon"
+                  size={18}
+                  color="#78787C"
+                />
                 DIRECT MESSAGE
               </span>
               <MdAdd
@@ -125,6 +138,7 @@ export default function ChatPage() {
               )}
             </nav>
           </div>
+          <CurrentUser />
         </div>
         <div className="right">
           {channel_id && (

src/routes/chat/styled.js

@@ -3,6 +3,7 @@ const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
   > .left {
+    position: relative;
     display: flex;
     flex-direction: column;
     width: 260px;
@@ -26,6 +27,10 @@ const StyledWrapper = styled.div`
           line-height: 20px;
           color: #78787c;
         }
+        .icon {
+          transition: transform 0.5s ease;
+          transform-origin: center;
+        }
       }
       > .nav {
         display: flex;
@@ -151,6 +156,14 @@ const StyledWrapper = styled.div`
           outline: 2px solid #52edff;
         }
       }
+      &.collapse {
+        .title .icon {
+          transform: rotate(-90deg);
+        }
+        > .nav {
+          display: none;
+        }
+      }
     }
   }
   > .right {

src/routes/contacts/index.js

@@ -3,6 +3,7 @@ import { NavLink, useParams } from "react-router-dom";
 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 StyledWrapper from "./styled";
@@ -28,6 +29,7 @@ export default function ContactsPage() {
             })}
           </nav>
         </div>
+        <CurrentUser />
       </div>
       {user_id && (
         <div className="right">

src/routes/contacts/styled.js

@@ -3,6 +3,7 @@ const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
   > .left {
+    position: relative;
     display: flex;
     flex-direction: column;
     width: 260px;

src/routes/home/CurrentUser.js

@@ -1,81 +0,0 @@
-import { useEffect } from "react";
-import styled from "styled-components";
-import { AiOutlineCaretDown, AiOutlineSound } from "react-icons/ai";
-import { MdOutlineKeyboardVoice } from "react-icons/md";
-import { useSelector, useDispatch } from "react-redux";
-import { useNavigate } from "react-router-dom";
-
-import { clearAuthData } from "../../app/slices/auth.data";
-import { useLazyLogoutQuery } from "../../app/services/auth";
-
-const StyledWrapper = styled.div`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  padding: 16px 12px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .profile {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 5px;
-    .avatar {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-    }
-    .toggle {
-    }
-  }
-  .settings {
-    gap: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .icon {
-      cursor: pointer;
-    }
-  }
-`;
-export default function CurrentUser({ expand = true }) {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const [logout, { isSuccess }] = useLazyLogoutQuery();
-  const { user } = useSelector((store) => store.authData);
-  const handleLogout = () => {
-    logout();
-  };
-  useEffect(() => {
-    if (isSuccess) {
-      dispatch(clearAuthData());
-      navigate("/login");
-    }
-  }, [isSuccess]);
-
-  if (!user) return null;
-  const { name } = user;
-  return (
-    <StyledWrapper>
-      <div className="profile" title={name}>
-        <img
-          onDoubleClick={handleLogout}
-          title={name}
-          src={`https://avatars.dicebear.com/api/adventurer-neutral/${name}.svg`}
-          alt="user avatar"
-          className="avatar"
-        />
-        <AiOutlineCaretDown className="toggle" width={20} color="#C4C4C4" />
-      </div>
-      {expand && (
-        <div className="settings">
-          <AiOutlineSound className="icon" size={15} color="#1C1C1E" />
-          <MdOutlineKeyboardVoice className="icon" size={15} color="#1C1C1E" />
-        </div>
-      )}
-    </StyledWrapper>
-  );
-}

src/routes/home/Menu.js

@@ -0,0 +1,56 @@
+// import React from 'react'
+import styled from "styled-components";
+const StyledMenus = styled.ul`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 8px 12px;
+  .menu {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    gap: 10px;
+    .icon {
+      width: 24px;
+      height: 24px;
+      transition: all 0.5s ease;
+    }
+    .txt {
+      color: #4b5563;
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+`;
+export default function Menu({ toggle, expand = true }) {
+  return (
+    <StyledMenus>
+      <li className="menu">
+        <img
+          src="https://static.nicegoodthings.com/project/rustchat/menu.setting.png"
+          alt="setting icon"
+          className="icon"
+        />
+        {expand && <span className="txt">Settings</span>}
+      </li>
+      <li className="menu" onClick={toggle}>
+        <img
+          src={
+            expand
+              ? "https://static.nicegoodthings.com/project/rustchat/menu.toggle.collapse.png"
+              : "https://static.nicegoodthings.com/project/rustchat/menu.toggle.expand.png"
+          }
+          alt="expand icon"
+          className="icon"
+        />
+        {expand && <span className="txt">Expand</span>}
+      </li>
+    </StyledMenus>
+  );
+}

src/routes/home/ServerDropList.js

@@ -4,7 +4,7 @@ import { HiChevronDoubleLeft } from "react-icons/hi";
 
 const StyledWrapper = styled.div`
   height: 56px;
-  padding: 0 16px;
+  padding: 0 20px;
   padding-right: 5px;
   display: flex;
   justify-content: space-between;
@@ -20,54 +20,26 @@ const StyledWrapper = styled.div`
     .logo {
       width: 24px;
       height: 24px;
-      background-color: #fff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 4px;
-      img {
-        width: 16px;
-        height: 16px;
-      }
     }
     .title {
       white-space: nowrap;
       font-weight: normal;
-      font-size: 14px;
-      line-height: 20px;
-      color: #4b5563;
-    }
-  }
-  .arrow {
-    cursor: pointer;
-    transform-origin: center;
-    transition: transform 0.5s ease-in-out;
-    display: flex;
-    width: 15px;
-    height: 15px;
-    transform: rotate(180deg);
-    .icon {
-      width: 100%;
-      height: 100%;
-    }
-    &.expand {
-      transform: rotate(0deg);
+      font-style: normal;
+      font-weight: 600;
+      font-size: 12px;
+      line-height: 18px;
+      color: #1c1c1e;
     }
   }
 `;
-export default function ServerDropList({ data, toggle, expand = true }) {
+export default function ServerDropList({ data, expand = true }) {
   if (!data) return null;
   return (
     <StyledWrapper className={expand ? "expand" : ""}>
       <div className="server">
-        <div className="logo">
-          <img src={data.logo} alt="logo" />
-        </div>
+        <img className="logo" src={data.logo} alt="logo" />
         {expand && <h2 className="title">{data.name}</h2>}
       </div>
-      <div onClick={toggle} className={`arrow ${expand ? "expand" : ""}`}>
-        <HiChevronDoubleLeft className="icon" color="#BFBFBF" />
-      </div>
     </StyledWrapper>
   );
 }

src/routes/home/Tools.js

@@ -34,17 +34,17 @@ const StyledWrapper = styled.div`
       color: #4b5563;
     }
     .tool {
+      padding: 5px 4px;
       .logo {
         border-radius: 5.5px;
-        background: #fff;
-        width: 32px;
-        height: 32px;
+        width: 24px;
+        height: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         .icon {
-          width: 21px;
-          height: 21px;
+          width: 100%;
+          height: 100%;
         }
       }
       .title {
@@ -53,8 +53,8 @@ const StyledWrapper = styled.div`
       &.add .logo {
         background: none;
         .icon {
-          width: 40px;
-          height: 40px;
+          width: 30px;
+          height: 30px;
         }
       }
     }

src/routes/home/index.js

@@ -7,9 +7,10 @@ import { toggleMenuExpand } from "../../app/slices/ui";
 import StyledWrapper from "./styled";
 import ServerDropList from "./ServerDropList";
 import Tools from "./Tools";
+import Menu from "./Menu";
 import usePreload from "./usePreload";
 
-import CurrentUser from "./CurrentUser";
+// import CurrentUser from "./CurrentUser";
 
 import ChatIcon from "../../assets/icons/chat.svg";
 import ContactIcon from "../../assets/icons/contact.svg";
@@ -50,11 +51,7 @@ export default function HomePage() {
       />
       <StyledWrapper>
         <div className={`col left ${menuExpand ? "expand" : ""}`}>
-          <ServerDropList
-            data={data?.server}
-            expand={menuExpand}
-            toggle={toggleExpand}
-          />
+          <ServerDropList data={data?.server} expand={menuExpand} />
           <nav className="nav">
             <NavLink className="link" to={"/chat"}>
               <img src={ChatIcon} alt="chat icon" /> {menuExpand && `Chat`}
@@ -64,8 +61,10 @@ export default function HomePage() {
               {menuExpand && `Contacts`}
             </NavLink>
           </nav>
+          <div className="divider"></div>
           <Tools expand={menuExpand} />
-          <CurrentUser expand={menuExpand} />
+          <Menu toggle={toggleExpand} expand={menuExpand} />
+          {/* <CurrentUser expand={menuExpand} /> */}
         </div>
         <div className="col right">
           <Outlet />

src/routes/home/styled.js

@@ -14,6 +14,12 @@ const StyledWrapper = styled.div`
       width: 64px;
       box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
       transition: all 0.5s ease-in;
+      > .divider {
+        width: -webkit-fill-available;
+        height: 1px;
+        background-color: #d4d4d4;
+        margin: 8px 16px;
+      }
       &.expand {
         width: 180px;
       }
@@ -31,7 +37,7 @@ const StyledWrapper = styled.div`
         align-items: center;
         gap: 10px;
         text-decoration: none;
-        padding: 10px 8px;
+        padding: 8px;
         font-weight: 600;
         font-size: 14px;
         line-height: 20px;