minor fixes

src/App.scss

@@ -34,9 +34,11 @@
          align-items: center;
 
          .chatName {
-            width: auto;
-            max-width: 80%;
+            // flex: 1 1 70%;
+            // width: auto;
+            max-width: 70%;
             flex-grow: 1;
+
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
@@ -45,18 +47,31 @@
 
          .chatStatus {
             flex-shrink: 0;
-
          }
       }
 
       .chatSubTitle {
-         width: auto;
-         max-width: 80%;
-         overflow: hidden;
-         white-space: nowrap;
-         text-overflow: ellipsis;
-         font-size: 14px;
-         font-weight: 300;
+         width: 100%;
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+
+         .chatText {
+            // flex: 0 1 70%;
+            // width: auto;
+            max-width: 70%;
+            flex-grow: 1;
+
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: 14px;
+            font-weight: 300;
+         }
+
+         .chatMsgCount {
+            flex-shrink: 0;
+         }
       }
    }
 }
@@ -67,6 +82,9 @@
    .chatName {
       color: #fff;
    }
+   .chatStatus {
+      color: #fff;
+   }
    .chatSubTitle {
       color: #fff;
    }
@@ -77,6 +95,9 @@
    .chatName {
       color: #222;
    }
+   .chatStatus {
+      color: #555;
+   }
    .chatSubTitle {
       color: #555;
    }

src/components/Avatar.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import Avatar from '@mui/material/Avatar';
 
 import { backURL, stringColor }  from '../helpers'
@@ -13,8 +13,8 @@ const middle = {
   width: '50px'
 }
 const big = {
-  height: '70px', 
-  width: '70px'
+  height: '80px', 
+  width: '80px'
 }
 
 
@@ -43,7 +43,7 @@ export const UserAvatar = ({  profile, bigSize=false }) => {
     </>
   ) 
 }
-export const CMyAvatar = connect( state => ({profile: state.promise.myProfile?.payload || {}}))(UserAvatar)
+export const CMyAvatar = connect( state => ({ profile: state.promise.myProfile?.payload || {} }))(UserAvatar)
 
 
 

src/components/ChatList.jsx

@@ -1,8 +1,5 @@
 import React, {useState, useEffect, useRef} from 'react';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Box from '@mui/material/Box';
 
 import {Link} from 'react-router-dom'
@@ -49,7 +46,14 @@ const Chat = ({ chat, currChat }) => {
           </div> 
 
           <div className={"chatSubTitle"}>
-            {msgText}
+
+            <div className={"chatText"}>
+              {msgText}
+            </div> 
+
+            <div className={"chatMsgCount"}>
+            
+            </div> 
           </div> 
 
         </div>
@@ -67,8 +71,8 @@ const ChatList = ({ chats=[], currChatId }) => {
   // }, [chats])
 
   return (
-      <List        
-        sx={{ width: '100%', bgcolor: 'background.paper', position: 'relative', zIndex: 2, }}
+      <div        
+        sx={{ maxWidth: '100%', bgcolor: 'background.paper', position: 'relative', zIndex: 2, }}
         >
           <div>
             <Box sx={{  position: 'fixed', top: '90%', left: '25%', zIndex: 10}} >
@@ -78,7 +82,7 @@ const ChatList = ({ chats=[], currChatId }) => {
                     <Chat key={chat._id} chat={chat} currChat={currChatId === chat._id} /> 
               )}  
           </div>  
-        </List>
+        </div>
 
     
       
@@ -86,37 +90,3 @@ const ChatList = ({ chats=[], currChatId }) => {
 }
 export const CChatList = connect( state => ({ chats: Object.values(state.chats).filter(el => !!el._id)}))(ChatList)
 
-
-{/* <div class="ListItem Chat chat-item-clickable private no-selection has-ripple" style="top: 0px;">
-  <div class="ListItem-button" role="button" tabindex="0">
-    <div class="status">
-      <div class="Avatar size-large color-bg-8 saved-messages">
-        <i class="icon-avatar-saved-messages"></i>
-      </div>
-    </div>
-  <div class="info">
-    <div class="title">
-      <h3>Saved Messages</h3>
-      <div class="LastMessageMeta">
-        <div class="MessageOutgoingStatus">
-          <div class="Transition reveal">
-            <div class="Transition__slide--active">
-              <i class="icon-message-succeeded"></i>
-            </div>
-          </div>
-        </div>
-        <span class="time">Mon</span>
-      </div>
-    </div>
-    <div class="subtitle">
-      <p class="last-message" dir="ltr">https://dolgvol.github.io/ToDoListProd/</p>
-      <div class="Badge-transition open shown">
-        <div class="Badge pinned">
-          <i class="icon-pinned-chat"></i>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="ripple-container"></div>
-</div>
-</div> */}

src/components/MainMenu.jsx

@@ -4,13 +4,13 @@ import MenuIcon from '@mui/icons-material/Menu';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
-
 import Drawer from '@mui/material/Drawer';
 import Box from '@mui/material/Box';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
 
 import {actionFullLogout} from "../actions"
 import {connect}  from 'react-redux';
@@ -76,7 +76,44 @@ export const MainMenu = () => {
 
 
 
-export const MenuDrawer = ({}) => {
+
+
+const AboutMe = ({ myProfile }) => {
+   const {login, nick} = myProfile
+return (
+   <>
+      <Box sx={{ display: 'flex', flexDirection: 'column', 
+                     justifyContent: 'start', alignItems: 'center', 
+                     background: '#dddddd44' }}>
+         
+         <Box sx={{ m: 2, mb: 1 }}>
+            <CMyAvatar bigSize={true} />
+         </Box> 
+
+         <Box sx={{ mx: 2, display: 'flex', justifyContent: 'center', 
+                     alignSelf: 'start',  maxWidth: '90%' }}>
+            <Typography component="h6" variant="h6" 
+                        sx={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
+               {nick}
+            </Typography>
+         </Box> 
+
+         <Box sx={{ mx: 2, mb: 2, display: 'flex', justifyContent: 'center', 
+                     alignSelf: 'start', maxWidth: '90%' }}>
+            <Typography variant="body" 
+                        sx={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
+               {login}
+            </Typography>
+         </Box> 
+
+      </Box>
+   </>
+) 
+}
+const CAboutMe = connect( state => ({ myProfile: state.promise.myProfile?.payload || {} }))(AboutMe)
+
+
+export const MenuDrawer = ({ }) => {
    const [state, setState] = useState(false);
    const open = !!state
 
@@ -98,25 +135,23 @@ export const MenuDrawer = ({}) => {
             aria-haspopup="true"
             aria-expanded={open ? 'true' : undefined}
             onClick={toggleDrawer(true)}
-         >
+            >
             
             <MenuIcon />
          </IconButton>
          
 
-
          <Drawer
             open={state}
             onClose={toggleDrawer(false)}
-         >
-
-            <Box
-            sx={{ width: 250 }}
-            role="presentation"
             >
-               <Box sx={{ m: 2, display: 'flex', justifyContent: 'center' }}>
-                  <CMyAvatar bigSize={true} />
-               </Box>               
+            <Box
+               sx={{ width: 250, overflow: 'hidden',  }}
+               role="presentation"
+               >
+
+               <CAboutMe />    
+
 
                <List>
                   <CProfileModal />
@@ -135,4 +170,6 @@ export const MenuDrawer = ({}) => {
          </Drawer>
      </div>
    );
- }
+ }
+
+

src/components/MsgList.jsx

@@ -86,7 +86,11 @@ const dateBlock = {
 
 
 
-const Msg = ({ msg, prevOwner, prevTime, myId }) => {
+const Msg = ({ msg, prevOwner, prevTime, myProfile }) => {
+
+   const myId = myProfile?._id || null
+   const myLogin = myProfile?.login || null
+   const myNick = myProfile?.nick || null
 
    const { _id, text, owner, media, createdAt } = msg
    const {nick, login, avatar} = owner
@@ -138,7 +142,7 @@ const Msg = ({ msg, prevOwner, prevTime, myId }) => {
             <div style={(myId === owner._id) ? myBodyBlock : bodyBlock} >
 
                <div style={(myId === owner._id) ? nameBlock : nameBlockNew} >
-                  {nick || login}
+                  { (myId === owner._id) ? (myNick || myLogin) : (nick || login) }
                </div>
 
                <div style={contentBlock} >
@@ -168,9 +172,11 @@ const Msg = ({ msg, prevOwner, prevTime, myId }) => {
       </>
    )
 }
+const CMsg = connect( state => ({ myProfile: state.promise.myProfile?.payload || {}}))(Msg)
+
 
 
-const MsgList = ({chats={}, chatId, myId }) => {
+const MsgList = ({chats={}, chatId }) => {
 
    const prevOwner = useRef('')
    const prevTime = useRef('')
@@ -189,12 +195,11 @@ const MsgList = ({chats={}, chatId, myId }) => {
          >
          { msgArr ?
 
-            msgArr.map(msg => <Msg               
+            msgArr.map(msg => <CMsg               
                                  key={msg._id} 
                                  msg={msg} 
                                  prevOwner={prevOwner}
                                  prevTime={prevTime}
-                                 myId={myId}
                                />) :
                
                      <div>сообщений нема</div>         
@@ -203,8 +208,7 @@ const MsgList = ({chats={}, chatId, myId }) => {
       </div>
    )
 }
-export const CMsgList = connect(state => ( { chats: state.chats,
-                                             myId: state.auth.payload?.sub?.id || null} ))(MsgList)
+export const CMsgList = connect(state => ( { chats: state.chats } ))(MsgList)
 
 
 //tg

src/pages/AsidePage.jsx

@@ -9,7 +9,7 @@ import {
 
 const asidePageContainer = {
    height: "100vh",
-   width: "100%"
+   maxWidth: "100%"
 }
 const asidePageHeader = {
    height: "60px"

src/pages/ChatsPage.jsx

@@ -8,9 +8,12 @@ import {
 
 import { CChatList } from '../components'
 
+// TODO: разобраться откуда берется оверфлоу по X
 const chatsPage= {
    height: "calc(100vh - 60px)",
-   overflowY: "auto"
+   maxWidth: "100%",
+   overflowY: "auto",
+   overflowX: "hidden",
  }
 
 const ChatsPage = ({  match:{params:{_id}}, auth, 

src/pages/Login.jsx

@@ -170,7 +170,7 @@ export const Login = ({minLog='2', minPass='2'}) => {
                <LockOutlinedIcon />
             </Avatar>
 
-            <Typography component="h1" variant="h5">
+            <Typography component="h5" variant="h5">
                Вход в аккаунт
             </Typography>