refactor: update UXs

src/common/component/ChannelModal/index.js

@@ -6,6 +6,7 @@ import Modal from "../Modal";
 import ChannelIcon from "../ChannelIcon";
 import Contact from "../Contact";
 import StyledWrapper from "./styled";
+import StyledCheckbox from "../../component/StyledCheckbox";
 import useFilteredUsers from "../../hook/useFilteredUsers";
 import { addChannel } from "../../../app/slices/channels";
 
@@ -103,10 +104,9 @@ export default function ChannelModal({ personal = false, closeModal }) {
                       className="user"
                       onClick={toggleCheckMember}
                     >
-                      <input
+                      <StyledCheckbox
                         readOnly
                         checked={checked}
-                        type="checkbox"
                         name="cb"
                         id="cb"
                       />

src/common/component/ChannelModal/styled.js

@@ -41,7 +41,12 @@ const StyledWrapper = styled.div`
         display: flex;
         align-items: center;
         padding: 0 16px;
+        /* margin: 0 4px; */
         width: -webkit-fill-available;
+        border-radius: 4px;
+        &:hover {
+          background: rgba(116, 127, 141, 0.1);
+        }
         > div {
           width: 100%;
         }

src/common/component/Contact.js

@@ -55,10 +55,7 @@ export default function Contact({ interactive = true, status = "", uid = "" }) {
   if (!contacts) return null;
   const currUser = contacts.find((c) => c.uid == uid);
   return (
-    <StyledWrapper
-      className={`${interactive ? "interactive" : ""}`}
-      title={currUser?.email}
-    >
+    <StyledWrapper className={`${interactive ? "interactive" : ""}`}>
       <div className="avatar">
         <Avatar url={currUser?.avatar} id={uid} alt="avatar" />
         <div className={`status ${status}`}></div>

src/common/component/CurrentUser.js

@@ -0,0 +1,84 @@
+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 BASE_URL from "../../app/config";
+import { useLazyLogoutQuery } from "../../app/services/auth";
+import Avatar from "./Avatar";
+const StyledWrapper = styled.div`
+  background-color: #e5e5e5;
+  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, uid } = user;
+  return (
+    <StyledWrapper>
+      <div className="profile" title={name}>
+        <Avatar
+          onDoubleClick={handleLogout}
+          title={name}
+          url={`${BASE_URL}/resource/avatar?uid=${uid}`}
+          id={uid}
+          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/common/component/Message.js

@@ -42,6 +42,7 @@ const StyledMsg = styled.div`
       }
     }
     .down {
+      user-select: text;
       color: #374151;
       font-weight: normal;
       font-size: 14px;
@@ -94,7 +95,7 @@ export default function Message({
   const { data: contacts } = useGetContactsQuery();
   useEffect(() => {
     if (!unread) {
-      avatarRef.current?.scrollIntoView(false);
+      avatarRef.current?.scrollIntoView();
     }
   }, [unread]);
 

src/common/component/Search.js

@@ -45,7 +45,9 @@ const StyledWrapper = styled.div`
     right: 8px;
     display: flex;
     flex-direction: column;
+    padding: 4px;
     .item {
+      border-radius: 3px;
       display: flex;
       align-items: center;
       gap: 4px;
@@ -53,7 +55,10 @@ const StyledWrapper = styled.div`
       font-size: 14px;
       line-height: 20px;
       cursor: pointer;
-      padding: 12px;
+      padding: 10px 8px;
+      &:hover {
+        background: rgba(116, 127, 141, 0.2);
+      }
     }
   }
 `;

src/common/component/Send/styled.js

@@ -31,6 +31,7 @@ const StyledSend = styled.div`
     width: 100%;
     position: relative;
     .content {
+      resize: unset;
       outline: none;
       padding: 4px;
       font-weight: 500;

src/common/component/StyledCheckbox.js

@@ -0,0 +1,36 @@
+// import React from 'react'
+import styled from "styled-components";
+const Styled = styled.input`
+  -webkit-appearance: none;
+  /* Remove most all native input styles */
+  appearance: none;
+  /* Not removed via appearance */
+  margin: 0;
+  /* color: #1fe1f9; */
+  width: 20px;
+  height: 20px;
+  border: 1px solid #d0d5dd;
+  border-radius: 6px;
+  place-content: center;
+  &::before {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 10px;
+    margin: 4px;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    transform: scale(0);
+    transform-origin: bottom left;
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 10px 10px #1fe1f9;
+  }
+  &:checked {
+    border-color: #1fe1f9;
+    &:before {
+      transform: scale(1);
+    }
+  }
+`;
+export default function StyledCheckbox(props) {
+  return <Styled {...props} type="checkbox" />;
+}