add aws 3

src/components/AuthPage/Authorization/index.tsx

@@ -51,7 +51,6 @@ interface IAuthorizationForm {
   handleSendCode: () => Promise<void>,
   number:string,
   setNumber: React.Dispatch<React.SetStateAction<string>>,
-  country: string,
   setCountry: React.Dispatch<React.SetStateAction<string>>,
   isChecked: boolean,
   isValidCredentials: () => boolean
@@ -68,7 +67,6 @@ const Authorization = ({
   handleSendCode,
   number,
   setNumber,
-  country,
   setCountry,
   isChecked,
   isValidCredentials

src/components/AuthPage/index.tsx

@@ -72,7 +72,6 @@ const AuthPage = () => {
           handleIsCheck={handleIsCheck}
           setNumber={setNumber}
           number={number}
-          country={country}
           setCountry={setCountry}
           isChecked={isChecked}
           isValidCredentials={isValidCredentials}/>

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightFile/index.tsx

@@ -202,7 +202,10 @@ const MessageRightFile = ({ url,createdAt,type,_id }:IMessageRightFile) => {
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);    
   const handleOpenRead = () => !read&&setRead(true)
-  const handleCloseRead = () => read && setRead(false)
+  const handleCloseRead = (e: any) => {
+    console.log(e)
+    read && setRead(false)
+  }
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)

src/components/HomePage/CentralBar/ChatBar/index.tsx

@@ -24,7 +24,7 @@ import { actionScrollChat } from '../../../../redux/control/action'
 import { asyncGetMessagesById } from '../../../../redux/messages/operations'
 import { asyncGetChatById } from "../../../../redux/chat/operations";
 import { seenChat } from "../../../../api-data";
-import { timeStampFilter,prodBaseURL,refreshAppTime } from "../../../../helpers";
+import { timeStampFilter,prodAwsS3,refreshAppTime } from "../../../../helpers";
 const debounce = require('lodash.debounce');
 
 const useStyles = makeStyles({   
@@ -145,7 +145,7 @@ const ChatBar = () => {
             time = createdAt
             isTime = true
           }
-          const url = `${prodBaseURL}/${message}`
+          const url = `${prodAwsS3}/${message}`
           if (number !== userNumber) {
             if (type === 'text') return (<div key={createdAt}>
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}

src/components/HomePage/CentralBar/HeaderBar/Buttons/DeleteModal/index.tsx

@@ -7,7 +7,7 @@ import { getChat } from '../../../../../../redux/chat/selector';
 import { actionRemoveChat } from '../../../../../../redux/chat/action';
 import { actionRightIsOpen } from '../../../../../../redux/control/action'
 import { removeChatForBoth } from '../../../../../../api-data';
-import { firstLetter,slicedWord,prodBaseURL } from '../../../../../../helpers';
+import { firstLetter,slicedWord,prodAwsS3 } from '../../../../../../helpers';
 
 const useStyles = makeStyles({
   modalDelete: {
@@ -61,7 +61,7 @@ const DeleteModal = ({setModal}:{setModal:any}) => {
     <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
         <div className={classes.titleWrapper}>
-          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 38, height: 38,marginRight:2}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

src/components/HomePage/CentralBar/HeaderBar/Credentials/index.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { actionRightIsOpen } from '../../../../../redux/control/action'
 import { getChat } from '../../../../../redux/chat/selector'
-import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../helpers'
+import { firstLetter,slicedWord,timeStampEU,prodAwsS3 } from '../../../../../helpers'
 
 const Credentials = () => {
   const dispatch = useDispatch()
@@ -15,7 +15,7 @@ const Credentials = () => {
   return (
     <ListItemButton onClick={() => dispatch(actionRightIsOpen('credentials'))}>
       <ListItemIcon >
-        <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+        <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
               sx={{ background: color, width: 44, height: 44 }}>
               {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

src/components/HomePage/LeftBar/ChatsList/ChatItem/DeleteModal/index.tsx

@@ -6,7 +6,7 @@ import { useDispatch } from 'react-redux';
 import { removeChatForBoth } from '../../../../../../api-data';
 import { actionRightIsOpen } from '../../../../../../redux/control/action';
 import { actionRemoveChat } from '../../../../../../redux/chat/action';
-import { firstLetter, slicedWord,prodBaseURL } from '../../../../../../helpers';
+import { firstLetter, slicedWord,prodAwsS3 } from '../../../../../../helpers';
 import { TChat } from '../../../../../../typescript/redux/chats/types';
 
 const useStyles = makeStyles({
@@ -65,7 +65,7 @@ const DeleteModal = ({setModal,chat}:IDeleteModal) => {
     <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
         <div className={classes.titleWrapper}>
-          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 38, height: 38,marginRight:2}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

src/components/HomePage/LeftBar/ChatsList/ChatItem/index.tsx

@@ -15,7 +15,7 @@ import DoneAllIcon from '@mui/icons-material/DoneAll';
 
 import { muteChat } from '../../../../../api-data';
 import { TChat } from '../../../../../typescript/redux/chats/types';
-import { firstLetter, slicedWord, timeStampEU,prodBaseURL } from '../../../../../helpers';
+import { firstLetter, slicedWord, timeStampEU,prodAwsS3 } from '../../../../../helpers';
 import DeleteModal from './DeleteModal';
 
 const StyledMenu = styled((props:any) => (
@@ -224,7 +224,7 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs}:IChatItem) => {
         <ListItemIcon className={classes.listItem_iconAvatar}>
           <StyledBadge overlap="circular"  variant={online === 'true'?'dot':'standard'}
              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
-            <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+            <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
               sx={{ background: color, width: 54, height: 54 }}>
               {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
             </Avatar>

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

@@ -16,7 +16,7 @@ import {removeContact } from '../../../../../api-data';
 import { actionRightIsOpen } from '../../../../../redux/control/action';
 import { TContact } from '../../../../../typescript/redux/contacts/types';
 import { TRightIsOpen } from '../../../../../typescript/redux/control/types';
-import { firstLetter,slicedWord,timeStampEU,copied,prodBaseURL } from '../../../../../helpers';
+import { firstLetter,slicedWord,timeStampEU,copied,prodAwsS3 } from '../../../../../helpers';
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -132,7 +132,7 @@ const  ContactItem = ({contact,handleListItemClick,rightIsOpen}:IContactItem) =>
         onContextMenu={(e) => handleContextMenu(e)}
       >
         <ListItemIcon className={classes.listItem_iconAvatar}>
-        <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+        <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
           sx={{ background: color, width: 54, height: 54 }}>
           {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>
@@ -162,7 +162,7 @@ const  ContactItem = ({contact,handleListItemClick,rightIsOpen}:IContactItem) =>
      {modal&&<div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
         <div className={classes.titleWrapper}>
-          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 38, height: 38,marginRight:2}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

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

@@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/core'
 import { useEffect } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,filteredMessages,handleSort,prodBaseURL } from '../../../../../helpers'
+import { timeStampEU,handleDownload,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -74,7 +74,7 @@ const AudioList = ({ messagesMemo,value,date,sort,setDisabled }: IAudioList) =>
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <LibraryMusicIcon onClick={() =>
-                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
+                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

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

@@ -5,7 +5,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 
 import { TChat } from '../../../../../../typescript/redux/chats/types';
-import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../../helpers';
+import { firstLetter,slicedWord,timeStampEU,prodAwsS3 } from '../../../../../../helpers';
 
 const useStyles = makeStyles({
   listItemInnerText: {
@@ -40,7 +40,7 @@ const  ChatItem = ({chat,handleListItemClick}:IChatItem) => {
   return (
       <ListItemButton onClick={() => handleListItemClick(companionId)}>
         <ListItemIcon className={classes.listItem_iconAvatar}>
-          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 54, height: 54 }}>
             {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

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

@@ -1,6 +1,6 @@
 import { makeStyles, Typography } from '@material-ui/core'
 import Avatar from '@mui/material/Avatar';
-import { slicedWord, firstLetter,prodBaseURL } from '../../../../../../helpers';
+import { slicedWord, firstLetter,prodAwsS3 } from '../../../../../../helpers';
 import { TChat } from '../../../../../../typescript/redux/chats/types';
 
 const useStyles = makeStyles({
@@ -37,7 +37,7 @@ const RecentItem = ({handleListItemClick,chat}:IRecentItem) => {
 
 return (
   <div onClick={() => handleListItemClick(companionId)} className={classes.stackItem}>
-     <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+     <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
        sx={{ background: color, width: 54, height: 54}}>
        {`${firstLetter(name)}${firstLetter(lastName)}`}
       </Avatar>

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

@@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/core'
 import { useEffect } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,filteredMessages,handleSort,prodBaseURL } from '../../../../../helpers'
+import { timeStampEU,handleDownload,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -74,7 +74,7 @@ const FilesList = ({ messagesMemo,value,date,sort,setDisabled }: IFilesList) =>
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <FolderIcon onClick={() =>
-                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
+                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

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

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core'
 import { useState } from 'react';
 import ImageListItem from '@mui/material/ImageListItem';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import { handleDownload,timeStampEU,prodBaseURL } from '../../../../../../helpers'
+import { handleDownload,timeStampEU,prodAwsS3 } from '../../../../../../helpers'
 
 const useStyles = makeStyles({ 
   overlay: {
@@ -64,7 +64,7 @@ const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullTyp
   const handleOpenWatch = () => !watch && setWatch(true)
   const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
   
-  const url = `${prodBaseURL}/${message}`
+  const url = `${prodAwsS3}/${message}`
   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>

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

@@ -10,7 +10,7 @@ import { makeStyles } from '@material-ui/core'
 import { useEffect } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,copied,filteredMessages,handleSort,prodBaseURL } from '../../../../../helpers'
+import { timeStampEU,firstLetter,copied,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -75,7 +75,7 @@ const TextList = ({ messagesMemo,value,date,sort,setDisabled }: ITextList) => {
       <div key={createdAt}>
           <ListItem alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>
-              <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+              <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
                   sx={{ background: color, width: 38, height: 38}}>
                   {`${firstLetter(name)}${firstLetter(lastName)}`}
               </Avatar>

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

@@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/core'
 import { useEffect } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,filteredMessages,handleSort,prodBaseURL } from '../../../../../helpers'
+import { timeStampEU,handleDownload,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -73,7 +73,7 @@ const VideoList = ({ messagesMemo,value,date,sort,setDisabled }: IVideoList) =>
             <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <VideoLibraryIcon onClick={() =>
-                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
+                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

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

@@ -5,7 +5,8 @@ import { getAuthorizationState } from '../../../../../redux/authorization/select
 import { Carousel } from 'react-responsive-carousel';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Avatar from '@mui/material/Avatar';
-import { firstLetter, slicedWord, timeStampEU,prodAwsS3 } from '../../../../../helpers'
+import { firstLetter, slicedWord, timeStampEU, prodAwsS3 } from '../../../../../helpers'
+import transparentPic from './../../../../../img/transparentPic.png'
 import DeleteModal from './DeleteModal';
 
 
@@ -15,7 +16,7 @@ const useStyles = makeStyles({
     backgroundColor: '#ffffff',
     position:'relative',
   },
-  nameTile: {
+  nameTitle: {
     position:'absolute',
     color: '#ffffff',
     backgroundColor: 'rgb(0,0,0)',
@@ -23,13 +24,13 @@ const useStyles = makeStyles({
     padding:8,
     fontSize: 18,
     zIndex:10,
-    top: '7%',
+    top: '6%',
     left: '50%',    
     marginLeft: '-45%',
     opacity: 0.7,
     transition: 'opacity .35s ease-in-out'
   },
-  timeTile: {
+  timeTitle: {
     position:'absolute',
     color: '#ffffff',
     backgroundColor: 'rgb(0,0,0)',
@@ -42,6 +43,33 @@ const useStyles = makeStyles({
     opacity: 0.7,
     transition: 'opacity .35s ease-in-out'
   },
+  countryTitle: {
+    position:'absolute',
+    color: '#ffffff',
+    backgroundColor: 'rgb(0,0,0)',
+    borderRadius: 10,
+    padding:4,
+    fontSize: 15,
+    top: '13%',
+    left: '50%',    
+    marginLeft: '-45%',
+    opacity: 0.7,
+    transition: 'opacity .35s ease-in-out'
+  },
+  credentialsTitle: {
+    position:'absolute',
+    color: '#ffffff',
+    fontSize: 100,
+    top: '30%',
+    left: '38%',
+  },
+  credentialsLowTitle: {
+    position:'absolute',
+    color: '#ffffff',
+    fontSize: 25,
+    top: '90%',
+    left: '9%',
+  },  
   iconDeleteWrapper: {
     position: 'absolute',
     top: '1%',
@@ -71,26 +99,39 @@ const useStyles = makeStyles({
 
 const SettingsPicture = () => {
   const classes = useStyles()
-  const { name, lastName, avatarsArr, online } = useSelector(getAuthorizationState)
+  const { name, lastName, avatarsArr, online,createdAt,color,country } = useSelector(getAuthorizationState)
   const [modal, setModal] = useState<boolean>(false);
   const [index, setIndex] = useState<number>(0);
   const handleClick = (): void => setModal(true)
+  const isDefault = avatarsArr.length === 0 ? false: true
 
   return (
   <div className={classes.container}>
     {modal &&
     <DeleteModal setModal={setModal} index={index} setIndex={setIndex}/>}
       <Carousel onChange={(i)=> setIndex(i)} selectedItem={index}>
-        {avatarsArr.map(({ avatarUrl, updatedAt }) =>
+        {isDefault ?
+          avatarsArr.map(({ avatarUrl, updatedAt }) =>
           <div key={avatarUrl}>
             <img alt='pic' src={`${prodAwsS3}/${avatarUrl}`}/>
             <p className="legend">{timeStampEU(updatedAt)}</p>         
-          </div>)}
+          </div>) :
+          [
+            <div>
+              <img alt='transparentPic' src={transparentPic}
+                style={{ backgroundColor: color }} />
+              <p className="legend">{timeStampEU(createdAt)}</p>         
+            </div>
+          ]
+        }
        </Carousel>      
-      <span className={classes.nameTile}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
+      <span className={classes.nameTitle}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
         ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
-      <span className={classes.timeTile}>{online === 'true' ? 'online' : `last seen ${timeStampEU(online)}`}</span>
-      {avatarsArr.length > 1 &&
+      <span className={classes.timeTitle}>{online === 'true' ? 'online' : `last seen ${timeStampEU(online)}`}</span>
+      <span className={classes.countryTitle}>{country}</span>
+      {!isDefault&&<span className={classes.credentialsTitle}>{`${firstLetter(name)}${firstLetter(lastName)}`}</span>}
+      {!isDefault&&<span className={classes.credentialsLowTitle}>{`${firstLetter(name)}${firstLetter(lastName)}`}</span>}      
+      {avatarsArr.length > 0 &&
        <div className={classes.iconDeleteWrapper}>
         <Avatar className={classes.iconDelete} onClick={handleClick}
           sx={{width: 36, height: 36, backgroundColor: 'rgb(0,0,0)',

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

@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../helpers'
+import { timeStampEU,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
@@ -34,7 +34,7 @@ const AudioList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <LibraryMusicIcon onClick={() =>
-                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
+                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

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

@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../helpers'
+import { timeStampEU,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
@@ -35,7 +35,7 @@ const FilesList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <FolderIcon onClick={() =>
-                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
+                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

src/components/HomePage/RightBar/CredentialsList/ProfileLists/MediaList/MediaListItem/index.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core'
 import { useState } from 'react';
 import ImageListItem from '@mui/material/ImageListItem';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import { handleDownload,timeStampEU,prodBaseURL } from '../../../../../../../helpers'
+import { handleDownload,timeStampEU,prodAwsS3 } from '../../../../../../../helpers'
 
 const useStyles = makeStyles({ 
   overlay: {
@@ -64,7 +64,7 @@ const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullTyp
   const handleOpenWatch = () => !watch && setWatch(true)
   const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
   
-  const url = `${prodBaseURL}/${message}`
+  const url = `${prodAwsS3}/${message}`
   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>

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

@@ -9,7 +9,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,copied,prodBaseURL } from '../../../../../../helpers'
+import { timeStampEU,firstLetter,copied,prodAwsS3 } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
@@ -36,7 +36,7 @@ const TextList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
       <div key={createdAt}>
           <ListItem alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>
-              <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+              <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
                   sx={{ background: color, width: 38, height: 38}}>
                   {`${firstLetter(name)}${firstLetter(lastName)}`}
               </Avatar>

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

@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../helpers'
+import { timeStampEU,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
@@ -34,7 +34,7 @@ const VideoList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
             <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <VideoLibraryIcon onClick={() =>
-                  handleDownload(`${prodBaseURL}/${message}`, fullType)}
+                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
                   className={classes.folderIcon} fontSize='large' />
               </ListItemAvatar>
               <ListItemText

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

@@ -1,14 +1,28 @@
 import { makeStyles } from '@material-ui/core'
 import { useSelector } from 'react-redux';
 import { Carousel } from 'react-responsive-carousel';
-import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../helpers'
+import { firstLetter, slicedWord, timeStampEU, prodAwsS3 } from '../../../../../helpers'
+import transparentPic from '../../../../../img/transparentPic.png'
 import { getChat } from '../../../../../redux/chat/selector'
 
 const useStyles = makeStyles({
   container: {
     position: 'relative',
   },
-  nameTile: {
+  timeTitle: {
+    position:'absolute',
+    color: '#ffffff',
+    backgroundColor: 'rgb(0,0,0)',
+    borderRadius: 10,
+    padding:4,
+    fontSize: 15,
+    top: '1%',
+    left: '50%',    
+    marginLeft: '-45%',
+    opacity: 0.7,
+    transition: 'opacity .35s ease-in-out'
+  },   
+  nameTitle: {
     position:'absolute',
     color: '#ffffff',
     backgroundColor: 'rgb(0,0,0)',
@@ -22,35 +36,61 @@ const useStyles = makeStyles({
     opacity: 0.7,
     transition: 'opacity .35s ease-in-out'
   },
-  timeTile: {
+  countryTitle: {
     position:'absolute',
     color: '#ffffff',
     backgroundColor: 'rgb(0,0,0)',
     borderRadius: 10,
     padding:4,
     fontSize: 15,
-    top: '1%',
+    top: '13%',
     left: '50%',    
     marginLeft: '-45%',
     opacity: 0.7,
     transition: 'opacity .35s ease-in-out'
-  },    
+  },
+  credentialsTitle: {
+    position:'absolute',
+    color: '#ffffff',
+    fontSize: 100,
+    top: '30%',
+    left: '38%',
+  },
+  credentialsLowTitle: {
+    position:'absolute',
+    color: '#ffffff',
+    fontSize: 25,
+    top: '90%',
+    left: '9%',
+  },
 })
 
 const ProfilePicture = () => {
   const classes = useStyles()
-  const { name, lastName, online, avatarsArr} = useSelector(getChat)
+  const { name, lastName, online, avatarsArr, createdAt, color, country } = useSelector(getChat)
+  const isDefault = avatarsArr.length === 0 ? false: true
   return (
     <div className={classes.container}>
       <Carousel>
-        {avatarsArr.map(({avatarUrl,updatedAt}) => <div>
-              <img alt='pic' src={`${prodBaseURL}/${avatarUrl}`}/>
+        {isDefault ?
+          avatarsArr.map(({ avatarUrl, updatedAt }) => <div>
+              <img alt='pic' src={`${prodAwsS3}/${avatarUrl}`}/>
                 <p className="legend">{timeStampEU(updatedAt)}</p>
-            </div>)}
+            </div>):
+            [
+            <div>
+              <img alt='transparentPic' src={transparentPic}
+                style={{ backgroundColor: color }} />
+              <p className="legend">{timeStampEU(createdAt)}</p>
+            </div>
+          ]}
        </Carousel>      
-      <span className={classes.nameTile}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
+      <span className={classes.timeTitle}>{online === 'true' ? 'online' : `last seen ${timeStampEU(online)}`}</span>
+      <span className={classes.nameTitle}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
         ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
-      <span className={classes.timeTile}>{online === 'true'?'online':`last seen ${timeStampEU(online)}`}</span>
+      <span className={classes.countryTitle}>{country}</span>
+      {!isDefault&&<span className={classes.credentialsTitle}>{`${firstLetter(name)}${firstLetter(lastName)}`}</span>}
+      {!isDefault&&<span className={classes.credentialsLowTitle}>{`${firstLetter(name)}${firstLetter(lastName)}`}</span>}
     </div>
   )
 }

src/components/HomePage/RightBar/EditBar/Delete/index.tsx

@@ -8,7 +8,7 @@ import { useDispatch } from 'react-redux';
 import { actionRightIsOpen } from '../../../../../redux/control/action'
 import { removeContact } from '../../../../../api-data';
 import { TContact } from '../../../../../typescript/redux/contacts/types';
-import { slicedWord,firstLetter,prodBaseURL } from '../../../../../helpers';
+import { slicedWord,firstLetter,prodAwsS3 } from '../../../../../helpers';
 const useStyles = makeStyles({
   container: {
     width: '100%',
@@ -73,7 +73,7 @@ const Delete = ({ isContact }:{ isContact:TContact}) => {
         {modal&&<div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
         <div className={classes.titleWrapper}>
-          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 38, height: 38,marginRight:2}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>

src/components/HomePage/RightBar/EditBar/EditList/index.tsx

@@ -3,7 +3,7 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Checkbox from '@mui/material/Checkbox';
 import ListItemText from '@mui/material/ListItemText';
-import { format,firstLetter,slicedWord,prodBaseURL } from '../../../../../helpers'
+import { format,firstLetter,slicedWord,prodAwsS3 } from '../../../../../helpers'
 import { TChat } from '../../../../../typescript/redux/chat/types'
 
 const useStyles = makeStyles({
@@ -82,8 +82,8 @@ const EditList = (props: IEditList) => {
   return (
     <div className={classes.container} >     
       <ListItemAvatar style={{marginBottom:10}}>
-         <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
-           sx={{ background: color, width: 120, height: 120,marginRight:2}}>
+         <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+          sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30}}>
            {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
       </ListItemAvatar>          

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

@@ -12,7 +12,7 @@ import Search from './Search'
 import AlertInfo from "../../../reusableComponents/AlertInfo";
 import { getMessages } from '../../../../redux/messages/selector'
 import { getChat } from '../../../../redux/chat/selector'
-import { timeStampEU, timeStampFilter, firstLetter, slicedWord, handleSort,prodBaseURL } from '../../../../helpers'
+import { timeStampEU, timeStampFilter, firstLetter, slicedWord, handleSort,prodAwsS3 } from '../../../../helpers'
 import { TMessages } from '../../../../typescript/redux/messages/types';
 
 const useStyles = makeStyles({
@@ -78,7 +78,7 @@ return (
           <div key={createdAt}>
               <ListItem alignItems="flex-start" className={classes.listItem}>
                      <ListItemAvatar>
-                        <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
+                        <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
                           sx={{ background: color, width: 44, height: 44, marginRight:2 }}>
                           {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
                         </Avatar>

src/redux/chat/reducer/index.ts

@@ -26,7 +26,8 @@ const initialState: TChat = {
      total: 0,
      watched: false,
      typing: false,
-     number:'',
+     number: '',
+     country:'',
      _id: '',
      companionId: '',
      owner: '',

src/typescript/redux/chat/types.ts

@@ -15,7 +15,8 @@ export type TChat = {
   total: number,
   watched: boolean,
   typing: boolean,
-  number:string,
+  number: string,
+  country: string,
   _id: string,
   companionId: string,
   owner: any,