work on responsive

src/components/HomePage/LeftBar/ContactsList/ContactItem/index.tsx

@@ -2,6 +2,7 @@ import { makeStyles } from '@material-ui/core'
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -57,6 +58,35 @@ const useStyles = makeStyles({
   listItem_iconAvatar: {
     marginRight:10
   },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },
+  titleWrapper: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignContent: 'center',
+    alignItems:'center'
+  },  
 })
 interface IContactItem {
   contact: TContact,
@@ -68,18 +98,26 @@ const  ContactItem = ({contact,handleListItemClick,isOpen}:IContactItem) => {
   const dispatch = useDispatch()
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   const { name, lastName, avatarUrl, color, companionId,createdAt, number,_id } = contact
 
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Number')
-    if (type === 'delete') {
-      removeContact(_id)
-      isOpen === 'edit'&&dispatch(actionIsOpen('credentials'))
-    }
+    if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
   }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      isOpen === 'edit'&&dispatch(actionIsOpen('credentials'))
+      removeContact(_id)
+      setModal(false)
+    }
+  }  
   const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
     e.preventDefault()
     setAnchorEl(e.currentTarget)
@@ -120,7 +158,27 @@ const  ContactItem = ({contact,handleListItemClick,isOpen}:IContactItem) => {
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete contact
         </MenuItem>        
-      </StyledMenu>     
+      </StyledMenu>
+     {modal&&<div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+      <div className={classes.modalDelete}>
+        <div className={classes.titleWrapper}>
+          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+            sx={{ background: color, width: 38, height: 38,marginRight:2}}>
+            {`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+          <h3 style={{color: '#2c2c2c'}}>Delete contact</h3>
+         </div>
+          <p style={{ color: '#050505' }}>{`Are you sure you want to delete contact
+            ${`${firstLetter(name)}${slicedWord(name, 15, 1)}
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE CONTACT
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+    </div>}
     </div>
   );
 }

src/components/HomePage/LeftBar/EditBar/ToolBar/index.tsx

@@ -6,7 +6,7 @@ import { makeStyles, Typography } from '@material-ui/core'
 const useStyles = makeStyles({
   container: {
     paddingLeft: 10,
-    paddingBottom: 3,
+    height:'7vh',
     width: '100%',
     display: 'flex',
     alignContent: 'center',

src/components/HomePage/LeftBar/SearchBar/index.tsx

@@ -16,16 +16,8 @@ const Search = styled('div')(({ theme }:any) => ({
   position: 'relative',
   borderRadius: '20px',
   backgroundColor: '#f1f0f0',
-  '&:hover': {
-    backgroundColor: '#f5f5f5',
-    color:'#2184f7',
-  }, 
-  marginLeft: 0,
-  maxWidth: '80%',
-  [theme.breakpoints.up('sm')]: {
-    marginLeft: theme.spacing(1),
-    width: 'auto',
-  },
+  width: '100%',
+  margin:'0 5% 0 5%'
 }));
 
 const SearchIconWrapper = styled('div')(({ theme }) => ({
@@ -39,28 +31,25 @@ const SearchIconWrapper = styled('div')(({ theme }) => ({
 }));
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
-    color: 'inherit',
+  color: 'inherit',
   '& .MuiInputBase-input': { 
     fontWeight: 500,
     borderRadius: '20px',
     padding: theme.spacing(1, 1, 1, 0),
     paddingLeft: `calc(1em + ${theme.spacing(4)})`,
     transition: theme.transitions.create('width'),
-    maxWidth: '80%',
-    [theme.breakpoints.up('sm')]: {
-      width: '35ch',
-      '&:focus': {
-        outline: '2px solid  #2184f7',
-        color: '#2184f7'
-      },
-    },
+    width: '100%',
   },
 }));
 
 const useStyles = makeStyles({
   toolBar: {
     color: '#b1aeae',
-    height:'7vh'
+    height: '7vh',
+  },
+  activeSearch: {
+        outline: '2px solid  #2184f7',
+        color: '#2184f7'
   },
   iconBtn: {
     '&:hover': {
@@ -85,7 +74,7 @@ interface ISearchBar {
   isSearch: boolean,
   selectedIndex: number | null,
   value: string,
-  sort : boolean
+  sort: boolean,
 }
 
 const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch, selectedIndex, value,sort }: ISearchBar) => {
@@ -101,7 +90,7 @@ const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch, selectedI
             <IconButton  onClick={handleClick}>
                 {isSearch ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
             </IconButton>
-          <Search>
+          <Search className={isSearch?classes.activeSearch:undefined}>
               <SearchIconWrapper>
                   <SearchIcon />
               </SearchIconWrapper>

src/components/HomePage/LeftBar/SearchLists/index.tsx

@@ -23,20 +23,35 @@ import { TChats } from '../../../../typescript/redux/chats/types';
 
 
 const useStyles = makeStyles({
-  bottomNavigation: {
-    borderBottom:'solid 2px #dddddd',
-    height:'7vh'
- },
- icon: {
-  fontSize: 17,
+container: {
+  height:'7vh',
+  borderBottom: 'solid 2px #dddddd',
+  display: 'flex',
+  justifyContent: 'space-around',
+  alignContent: "center",
+  alignItems:"center",
+  flexWrap: 'nowrap',
+  color:'rgba(0, 0, 0, 0.6)'
+},
+item: {
+  height:'100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignContent: "center",
+  alignItems: "center",
+  cursor:'pointer',
+},
+icon: {
+  fontSize: '1rem',
   lineHeight: 0,
   marginBottom: 0,
   fontWeight:600
  },
- underline: {
-  fontSize: 45,
+underline: {
+  fontSize: '2.2rem',
   lineHeight: 0,
- },
+  },
 })
 
 interface ISearchLists {
@@ -52,12 +67,11 @@ const SearchLists = ({ value,setValue,sort }: ISearchLists) => {
     const messagesMemo = useSelector(getAllMessagesMemo)
     const isOpen = useSelector(getIsOpen)
     const [isActive, setIsActive] = useState<number>(0)
-    const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => {
+    const handleIsActive = (newValue: number): void => {
       setIsActive(newValue)
       setValue('')
     }
-    const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
-    const Label = () => <span className={classes.underline}>__</span>
+
     const handleListItemClick = (companionId: string) => {
       isOpen&&dispatch(actionIsOpen(''))
       dispatch(asyncStartChatById(companionId))
@@ -89,19 +103,38 @@ const SearchLists = ({ value,setValue,sort }: ISearchLists) => {
   
     return (
     <>
-      <BottomNavigation
-        showLabels
-        value={isActive}
-        onChange={handleIsActive}
-        className={classes.bottomNavigation}
-      >
-          <BottomNavigationAction label={<Label />} icon={<Icon name='Chats' />} />
-          <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />
-          <BottomNavigationAction label={<Label />} icon={<Icon name='Media' />} />
-          <BottomNavigationAction label={<Label/>} icon={<Icon name='Text' />} />
-          <BottomNavigationAction label={<Label />} icon={<Icon name='Audio' />} />
-          <BottomNavigationAction label={<Label/>} icon={<Icon name='Video' />} />
-        </BottomNavigation>
+        <div className={classes.container}>
+          <div className={classes.item} style={{color:isActive === 0?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(0)}>
+            <span className={classes.icon}>Chats</span>
+            <span className={classes.underline}>___</span>
+          </div>
+          <div className={classes.item} style={{color:isActive === 1?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(1)}>
+            <span className={classes.icon}>Files</span>
+            <span className={classes.underline}>___</span>
+          </div>
+          <div className={classes.item} style={{color:isActive === 2?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(2)}>
+            <span className={classes.icon}>Media</span>
+            <span className={classes.underline}>___</span>
+          </div>
+          <div className={classes.item} style={{color:isActive === 3?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(3)}>
+            <span className={classes.icon}>Text</span>
+            <span className={classes.underline}>___</span>
+          </div>
+          <div className={classes.item} style={{color:isActive === 4?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(4)}>
+            <span className={classes.icon}>Audio</span>
+            <span className={classes.underline}>___</span>
+          </div>
+          <div className={classes.item} style={{color:isActive === 5?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(5)}>
+            <span className={classes.icon}>Video</span>
+            <span className={classes.underline}>___</span>
+          </div>          
+      </div>
             {isActive === 0 && <ChatListRecent value={value}
               filteredAndSorted={filteredAndSorted} handleListItemClick={handleListItemClick} />}
             {isActive === 1 && <FilesList allMessagesMemo={allMessagesMemo} value={value}/>}

src/components/HomePage/LeftBar/SettingsBar/SettingsPicture/index.tsx

@@ -12,7 +12,7 @@ const useStyles = makeStyles({
   imgContainer: {
     position:'relative',
     width: '100%',
-    height: 468,
+    height: 'auto',
     color: '#ffffff',
     display: 'flex',
     justifyContent: 'center',
@@ -29,7 +29,7 @@ const useStyles = makeStyles({
     fontWeight:600,
     fontSize: 24,
     zIndex:10,
-    top: 395,
+    bottom: 50,
     left:20
   },
   timeTile: {
@@ -40,7 +40,7 @@ const useStyles = makeStyles({
     padding:'0px 6px 2px 6px',
     fontSize: 19,
     fontWeight:600,
-    top: 430,
+    bottom: 20,
     left:20
   },    
 })

src/components/HomePage/LeftBar/index.tsx

@@ -70,7 +70,7 @@ const LeftBar = () => {
       <Grid item lg={3} style={{ position: 'relative', backgroundColor:'#ffffff'}}
         onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
         {selectedIndex !== 2 && selectedIndex !== 4 &&
-          <SearchBar handleClick={handleClick} handleFocus={handleFocus} sort={sort}
+          <SearchBar handleClick={handleClick} handleFocus={handleFocus} sort={sort} 
           handleSearch={handleSearch} isSearch={isSearch} selectedIndex={selectedIndex} value={value}/>}
         {!selectedIndex&&isSearch && <SearchLists value={value} setValue={setValue} sort={sort}/>}
         {!selectedIndex&&!isSearch &&<ChatsList sort={sort}/>}

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -22,7 +22,7 @@ import { typingChat } from "../../../../../api-data";
 
 const useStyles = makeStyles({   
     container: {
-        width: 634,
+        width: '35vw',
         height:'6vh',
         position: 'fixed',
         bottom: '2vh',
@@ -30,14 +30,14 @@ const useStyles = makeStyles({
         padding: 10,
         display: 'flex',
         flexWrap: 'nowrap',
-        alignContent: 'center',
-        alignItems: 'center',
+        alignContent: 'start',
+        alignItems: 'start',
         color: '#6b6b6b',
         backgroundColor: '#ffffff',        
     },
     textarea: {
-        minWidth: 550,
-        maxWidth: 550,
+        width: '100%',
+        height: '100%',
         outline: 'none',
         border:'none',
         padding: '0px 10px',
@@ -45,7 +45,6 @@ const useStyles = makeStyles({
         marginRight: 8,
         overflowY:'auto',
         resize: 'none',
-        height: 'auto',
         '&::placeholder': {
             color: 'rgb(82, 82, 82)',
             fontWeight: 600

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/index.tsx

@@ -1,5 +1,3 @@
-import BottomNavigation from '@mui/material/BottomNavigation';
-import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core'
@@ -16,16 +14,32 @@ import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
 container: {
-  borderBottom:'solid 2px #dddddd',
-},
+  borderBottom: 'solid 2px #dddddd',
+  display: 'flex',
+  justifyContent: 'space-around',
+  alignContent: "center",
+  alignItems:"center",
+  flexWrap: 'nowrap',
+  height:'7vh',
+  color:'rgba(0, 0, 0, 0.6)'
+  },
+  item: {
+    height:'100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignContent: "center",
+    alignItems: "center",
+    cursor:'pointer',
+  },
 icon: {
-  fontSize: 17,
+  fontSize: '1rem',
   lineHeight: 0,
   marginBottom: 0,
   fontWeight:600
  },
 underline: {
-  fontSize: 45,
+  fontSize: '2.5rem',
   lineHeight: 0,
   },
 })
@@ -35,25 +49,37 @@ const ProfileLists = () => {
     const { sort } = useSelector(getChat)
     const messagesMemo = useSelector(getMessagesMemo)
     const [isActive, setIsActive] = useState<number>(0)
-    const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
-    const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
-    const Label = () => <span className={classes.underline}>__</span>
+    const handleIsActive = (newValue: number): void => setIsActive(newValue)
     const sortedMessages:TMessages = handleSort('updatedAt',messagesMemo,sort)
     return (
     <>
-      <BottomNavigation
-        showLabels
-        value={isActive}
-        onChange={handleIsActive}
-        className={classes.container}
-        >
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />   
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Text' />} />
-            <BottomNavigationAction label={<Label />} icon={<Icon name='Audio' />} />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Video' />} />
-
-            </BottomNavigation>
+        <div className={classes.container}>
+          <div className={classes.item} style={{color:isActive === 0?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(0)}>
+            <span className={classes.icon}>Files</span>
+            <span className={classes.underline}>___</span>
+          </div>
+          <div className={classes.item} style={{color:isActive === 1?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(1)}>
+            <span className={classes.icon}>Media</span>
+            <span className={classes.underline}>___</span>
+          </div>
+          <div className={classes.item} style={{color:isActive === 2?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(2)}>
+            <span className={classes.icon}>Text</span>
+            <span className={classes.underline}>___</span>
+          </div>
+          <div className={classes.item} style={{color:isActive === 3?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(3)}>
+            <span className={classes.icon}>Audio</span>
+            <span className={classes.underline}>___</span>
+          </div>
+          <div className={classes.item} style={{color:isActive === 4?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
+            onClick={() => handleIsActive(4)}>
+            <span className={classes.icon}>Video</span>
+            <span className={classes.underline}>___</span>
+          </div>
+      </div>
             {isActive === 0 && <FilesList messagesMemo={sortedMessages}/>}            
             {isActive === 1 && <MediaList messagesMemo={sortedMessages}/>}
             {isActive === 2 && <TextList messagesMemo={sortedMessages}/>}

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileMenu/index.tsx

@@ -68,7 +68,6 @@ const ProfileMenu = () => {
             <ListItemText primary={credentials} secondary='Username' />
           </MenuItem>
         </CopyToClipboard>        
-        <Divider/>
       </MenuList>
     </Paper>
   );

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfilePicture/index.tsx

@@ -10,7 +10,7 @@ const useStyles = makeStyles({
   imgContainer: {
     position:'relative',
     width: '100%',
-    height: 468,
+    height: 'auto',
     color: '#ffffff',
     display: 'flex',
     justifyContent: 'center',
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
     fontWeight:600,
     fontSize: 24,
     zIndex:10,
-    top: 395,
+    bottom: 50,
     left:20
   },
   timeTile: {
@@ -38,7 +38,7 @@ const useStyles = makeStyles({
     padding:'0px 6px 2px 6px',
     fontSize: 19,
     fontWeight:600,
-    top: 430,
+    bottom: 20,
     left:20
   },    
 })

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ToolBar/index.tsx

@@ -50,12 +50,12 @@ const ToolBar = () => {
   }, [contactsMemo,number])
   
   return (
-    <Stack className={classes.container} direction="row" spacing={38}>
+    <Stack className={classes.container} direction="row">
       <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon className={classes.iconClose} fontSize='medium'/>
       </IconButton>
       <Typography variant="h6" color="initial" style={{marginLeft:20,color: '#474747'}}>Profile</Typography>
-      <IconButton  aria-label="delete" size="medium">
+      <IconButton  style={{marginLeft:'auto',marginRight:'3%'}}  aria-label="delete" size="medium">
         {isContact ? <EditIcon onClick={() => dispatch(actionIsOpen('edit'))} fontSize='medium' /> :
           <PersonAddAltIcon onClick={() => dispatch(asyncAddContact(number))} fontSize='medium' />}
       </IconButton>

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/index.tsx

@@ -8,11 +8,13 @@ const useStyles = makeStyles({
   container: {
     backgroundColor: '#ffffff',
     height: '100%',
+    width:'100%',
     position:'relative'
   },
   scrollContainer: {
     overflowY: 'scroll',
-    maxHeight: '93vh'
+    maxHeight: '93vh',
+    width:'100%',
   },
 })
 
@@ -21,7 +23,7 @@ const CredentialsList = () => {
     return (
     <div className={classes.container}>
       <ToolBar />
-        <div className={classes.scrollContainer}>
+      <div className={classes.scrollContainer}>
         <ProfilePicture />
         <ProfileMenu />
         <ProfileLists />

src/components/HomePage/RightBar/RightListsAndBars/EditBar/ToolBar/index.tsx

@@ -32,7 +32,7 @@ const ToolBar = () => {
       <IconButton onClick={() => dispatch(actionIsOpen('credentials'))} aria-label="delete" size="medium">
         <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
       </IconButton>
-      <Typography style={{marginLeft:20,color: '#474747'}} variant="h6" color="initial">Edit</Typography>
+      <Typography style={{marginLeft:20,color: '#474747'}} variant="h6" color="initial">Edit chat</Typography>
     </Stack>
     )
 }

src/components/HomePage/RightBar/RightListsAndBars/SearchList/Search/index.tsx

@@ -16,12 +16,8 @@ const SearchBar = styled('div')(({ theme }:any) => ({
   position: 'relative',
   borderRadius: '20px',
   backgroundColor: '#f1f0f0', 
-  marginLeft: 0,
   width: '100%',
-  [theme.breakpoints.up('sm')]: {
-    marginLeft: theme.spacing(1),
-    width: 'auto',
-  },
+  margin:'0 5% 0 5%'
 }));
 
 const SearchIconWrapper = styled('div')(({ theme }) => ({
@@ -43,13 +39,6 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
     paddingLeft: `calc(1em + ${theme.spacing(4)})`,
     transition: theme.transitions.create('width'),
     width: '100%',
-    [theme.breakpoints.up('sm')]: {
-      width: '35ch',
-      '&:focus': {
-        outline: '2px solid  #2184f7',
-        color: '#2184f7'
-      },
-    },
   },
 }));
 
@@ -59,10 +48,8 @@ const useStyles = makeStyles({
     height:'7vh'
   },
   searchBar: {
-  '&:hover': {
-    backgroundColor: '#f5f5f5',
-    color:'#2184f7',
-   },    
+  outline: '2px solid  #2184f7',
+  color: '#2184f7',
   },
 })
 

src/components/HomePage/RightBar/RightListsAndBars/SearchList/index.tsx

@@ -11,7 +11,7 @@ import Divider from '@mui/material/Divider';
 import Search from './Search'
 import AlertInfo from "../../../../reusableComponents/AlertInfo";
 import { getMessages } from '../../../../../redux/messages/selector'
-import { timeStamp,timeStampFilter,firstLetter,slicedWord } from '../../../../../helpers'
+import { timeStampEU,timeStampFilter,firstLetter,slicedWord } from '../../../../../helpers'
 
 const useStyles = makeStyles({
   container: {
@@ -73,7 +73,7 @@ return (
                            >
                              {message}
                            </Typography>
-                           {timeStamp(createdAt)}
+                           {timeStampEU(createdAt)}
                          </>}
                      />
                 </ListItem>