fix mobile style and add funktion for hide users info

frontend/src/components/chatPage/ChatPage.jsx

@@ -125,7 +125,7 @@ export const ChatPage = () => {
             <Box className={isTabletorMobile?'usersBoxMobile':'usersBox'}
                   sx = {showUserInfoBox ? {
                         transform: "translateX(100%)",
-                        display: "none"
+                        display: "block"
                         }: { }}>      
                     <UserInfo/> 
                     { isTabletorMobile ? <SwitchButton/> : null}

frontend/src/components/chatPage/SwitchButton.jsx

@@ -14,7 +14,7 @@ export const SwitchButton = () => {
     return (
         <div>  
 
-            <label>Infobar</label>
+            <label>Hide users</label>
 
             <Switch {...label} size="small"  onChange={() => handleChange()} />
         </div>

frontend/src/components/chatPage/chatPage.scss

@@ -114,7 +114,7 @@
     position: relative;
     padding: 20px;
     border-radius: 10px;
-    background-color:rgb(243, 243, 243);
+    background-color:rgb(229, 232, 233);
     display: flex;
     flex-grow :2;
     flex-direction: column;
@@ -152,7 +152,8 @@
     font-size: 11px;
     border-radius: 10px;
     border: 2px solid grey; 
-    background-color:rgb(243, 243, 243);
+    background-color:rgb(7, 42, 60);
+    color:rgb(239, 239, 233);
     transition: all 3s ease-in-out;    
     .online {
         border-radius: 5px;
@@ -160,7 +161,7 @@
         padding: 5px;
         border: 2px solid grey;
         margin-bottom: 5px;
-        background-color:rgb(247, 233, 233);
+        background-color:rgb(7, 42, 60);;
         font-weight: 500;
 
     }

frontend/src/components/chatPage/privateChat/userInfo.scss

@@ -1,13 +1,12 @@
-.userAvatar {
-    background-color: grey;
-    width: 100px;
-    height: 100px;
-    font-size: 14;
-    margin: 20px auto;
+.hidden {
+    display: none;
+    transform: translateX(-100%);
 }
 
 .active {
-    background-color:rgb(30, 8, 62);
+    display: block;
+    transition: all 1 linear;
+    background-color:rgb(30, 45, 52);
     border-radius: 5px;
     padding: 5px;
     font-weight: 700;

frontend/src/components/chatPage/userInfo/UserInfo.jsx

@@ -14,17 +14,6 @@ import './userInfo.scss';
 
 export const UserInfo = () => {
 
-    const PC_AVATAR_STYLE =    {
-        bgcolor: 'grey',
-        width: '100px',
-        height: '100px',
-        fontSize: 14,
-        margin: '20px auto',
-        cursor: 'pointer'
-        };
-
-
-    const MOBILE_AVATAR_STYLE =  { margin: '5px auto'};
  
     const [displayType, setDisplayType] = useState('none');
 
@@ -45,6 +34,8 @@ export const UserInfo = () => {
     const isTabletorMobile = (window.screen.width < 730);
     const storeUserAvatar = useSelector(state => state.userDataReducer.avatar)
     const chatId = useSelector(state => state.userDataReducer.chatId)
+    const showUserInfoBox = useSelector(state => state.userDataReducer.showUserInfoBox)
+
 
     const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages)
 
@@ -57,7 +48,7 @@ export const UserInfo = () => {
         setDisplayType('none')
     }
 
-    console.log(newPrivateMessages)
+    console.log(showUserInfoBox)
 
     // if(socket){
     //     socket.on('my chats', (data)=> console.log('my chats', data))
@@ -68,12 +59,18 @@ export const UserInfo = () => {
                 <h4 style={{color:'white'}}> Hello, {user.userName} </h4>
                
                 <Avatar
-                    sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
+                    className={isTabletorMobile ? 'mobileAvatar' : 'pcUsersAvatar'} //add deleting function after update avatar
                     onClick={() => loadAvatarHandler()}
                     src={userAvatarUrl ? SERVER_URL +'/'+ userAvatarUrl : ""}
                     >
                 </Avatar>  
                 
+               <div
+                    className={isTabletorMobile ? 'mobileUsersInfoBox' : 'pcUsersInfoBox'} 
+                    style={showUserInfoBox && isTabletorMobile ? {'transform':'translate(-100%)'}:{ 'transform':'translate(0)'}}
+                    
+                    
+                >
                 <input
                     type="file"
                     accept="image/png, image/jpeg"
@@ -93,8 +90,7 @@ export const UserInfo = () => {
                             (user.userName !== item?.userName) 
                                 && <AdminUserInfiButton item={item} i={i} key={i}/>) 
                         :
-                            !isTabletorMobile 
-                            && usersOnline.map((item, i) =>
+                            usersOnline.map((item, i) =>
                                     (user.userName !== item.userName) && <UserInfoButton item = {item} i = {i}  key={i} />                   
                             )
                     }
@@ -107,6 +103,10 @@ export const UserInfo = () => {
                         )
 
                     }
+
+                </div>
+
+            
             </>
         )
 }

frontend/src/components/chatPage/userInfo/userInfo.scss

@@ -10,3 +10,27 @@
     background-color:rgb(30, 8, 62);
 }
 
+.mobileUsersInfoBox {
+    position: absolute;
+    top: 100px;
+    left: 10px;
+    z-index: 10;
+    transition: all 1s;
+    transform: translate(-100%);
+    transition: all 1s;
+    max-width: 100px;
+
+
+}
+.pcUsersAvatar {
+    background-color: grey;
+    width: 100px;
+    height: 100px;
+    font-size: 14;
+    margin: 20px auto;
+    cursor: pointer;
+}
+
+.mobileAvatar {
+     margin: 5px auto
+};

frontend/src/reducers/userDataReducer.js

@@ -76,7 +76,6 @@ const getUserDataSlice = createSlice({
         deleteResponseMessage: state => {state.responseMessage = ''},
         showUserInfoBox: state => {
             state.showUserInfoBox = !state.showUserInfoBox  //replace later to other reducer file
-            console.log('reducer showUserInfoBox', state.showUserInfoBox)
           //localStorage.setItem('showBox', !state.showUserInfoBox)
         },
     },