add new button addToFriend

frontend/src/components/chatPage/chatPage.scss

@@ -132,6 +132,7 @@
     border: 2px solid grey; 
     background-color:rgb(30, 45, 52);
     .online {
+        position: relative;
         border-radius: 3px;
         padding: 5px;
         border:2px solid rgb(255, 255, 255); 
@@ -156,6 +157,7 @@
     color:rgb(239, 239, 233);
     transition: all 3s ease-in-out;    
     .online {
+        position: relative;
         border-radius: 5px;
         text-overflow: ellipsis;
         padding: 5px;

frontend/src/components/chatPage/generalChat/AddToFriends.jsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+export const AddToFriends = () => {
+
+    const isTabletorMobile = (window.screen.width < 730);
+
+    const [isFriend, setIsFreind] = useState(false)
+
+    console.log(isFriend)
+
+    return (
+        <div onClick={() => setIsFreind(!isFriend)} >
+            <div className= {isTabletorMobile ?'mobileButton addToFriendsButton': "addToFriendsButton" } 
+               style ={{backgroundColor:(isFriend ? 'red': '#1976d3' )}}
+            >
+                
+            </div>
+        </div>
+      
+    )
+}

frontend/src/components/chatPage/generalChat/UserInfoButton.jsx

@@ -4,8 +4,8 @@ import { useSelector } from "react-redux";
 import { StyledAvatar } from "../messageForm/StyledAvatar";
 import { Avatar } from "@mui/material";
 import { useState, useEffect } from "react";
-import { useDispatch } from 'react-redux';
 import {selectedUser} from "../../../reducers/dataReducers";
+import { AddToFriends } from "./AddToFriends";
 
 export const UserInfoButton = ({item, i}) => {
 
@@ -68,7 +68,7 @@ export const UserInfoButton = ({item, i}) => {
             </StyledAvatar>
                 {item.userName}  
             </div>
-            
+            <AddToFriends/>
     </div>
     )
 }

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

@@ -10,3 +10,39 @@
     background-color:rgb(30, 8, 62);
 }
 
+.addToFriendsButton {
+        width: 15px; 
+        height: 15px;
+        top: 8px;
+        background-color: #1976d3;
+        transform: rotate(45deg);
+        position: absolute; 
+        left: 8px;
+        cursor:pointer;
+      
+}  
+.mobileButton {   
+            width: 15px; 
+            height: 15px;
+            top: 0px;
+            left: -5px; 
+        }
+.addToFriendsButton::before,
+    .addToFriendsButton::after {
+        content : ''; 
+        display: block;
+        width: 15px;
+        height: 15px;
+        background-color:inherit;
+        border-radius: 50%; 
+        position: absolute;
+    }
+    .addToFriendsButton::before {
+        top: -8px;
+        left: 0;
+    }
+    .addToFriendsButton::after {
+        top: 0;
+        left: -8px;
+    }  
+