chore: update UXs

src/common/component/styled/Menu.js

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 const StyledMenu = styled.ul`
-  /* z-index: 999; */
   display: flex;
   flex-direction: column;
+  gap: 2px;
   padding: 4px;
   background-color: #fff;
   box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
@@ -11,10 +11,10 @@ const StyledMenu = styled.ul`
   .item {
     white-space: nowrap;
     cursor: pointer;
-    border-radius: 3px;
-    padding: 8px;
+    border-radius: 6px;
+    padding: 6px 8px;
     font-style: normal;
-    font-weight: 600;
+    font-weight: 500;
     font-size: 14px;
     line-height: 20px;
     color: #616161;
@@ -28,6 +28,10 @@ const StyledMenu = styled.ul`
     }
     &.danger {
       color: #a11043;
+      &:hover {
+        background-color: #b42318;
+        color: #fff;
+      }
     }
   }
 `;

src/routes/chat/index.js

@@ -11,6 +11,7 @@ import Server from "../../common/component/Server";
 import Tooltip from "../../common/component/Tooltip";
 // import Contact from "../../common/component/Contact";
 import CurrentUser from "../../common/component/CurrentUser";
+import IconLogo from "../../assets/icons/rustchat.logo.svg";
 import ChannelChat from "./ChannelChat";
 import DMChat from "./DMChat";
 import ChannelList from "./ChannelList";
@@ -43,6 +44,7 @@ export default function ChatPage() {
   const tmpUid =
     sessionUids.findIndex((i) => i == user_id) > -1 ? null : user_id;
   console.log("temp uid", tmpUid);
+  const placeholderVisible = !channel_id && !user_id;
   return (
     <>
       {channelModalVisible && (
@@ -101,7 +103,8 @@ export default function ChatPage() {
           </div>
           <CurrentUser />
         </div>
-        <div className="right">
+        <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
+          {placeholderVisible && <IconLogo />}
           {channel_id && (
             <ChannelChat cid={channel_id} dropFiles={channelDropFiles} />
           )}

src/routes/chat/styled.js

@@ -151,6 +151,13 @@ const StyledWrapper = styled.div`
   > .right {
     border-radius: 0 16px 16px 0;
     width: 100%;
+    &.placeholder {
+      background-color: #fff;
+      height: calc(100vh - 22px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 `;
 

src/routes/contacts/index.js

@@ -5,6 +5,7 @@ import Search from "../../common/component/Search";
 import Contact from "../../common/component/Contact";
 // import CurrentUser from "../../common/component/CurrentUser";
 import Profile from "../../common/component/Profile";
+import IconLogo from "../../assets/icons/rustchat.logo.svg";
 
 import StyledWrapper from "./styled";
 
@@ -31,10 +32,14 @@ export default function ContactsPage() {
         </div>
         {/* <CurrentUser /> */}
       </div>
-      {user_id && (
+      {user_id ? (
         <div className="right">
           <Profile uid={user_id} />
         </div>
+      ) : (
+        <div className="right placeholder">
+          <IconLogo />
+        </div>
       )}
     </StyledWrapper>
   );

src/routes/contacts/styled.js

@@ -40,6 +40,10 @@ const StyledWrapper = styled.div`
     display: flex;
     justify-content: center;
     align-items: flex-start;
+    &.placeholder {
+      height: 100%;
+      align-items: center;
+    }
   }
 `;
 

src/routes/home/styled.js

@@ -44,10 +44,17 @@ const StyledWrapper = styled.div`
         line-height: 20px;
         color: #4b5563;
         border-radius: 8px;
-        &:hover,
-        &.active {
+        svg.fav path {
+          fill: #344054;
+        }
+        &:hover {
           background-color: rgba(0, 0, 0, 0.08);
         }
+        &.active {
+          svg path {
+            fill: #55c7ec;
+          }
+        }
       }
     }
   }