diff --git a/client/src/components/ContactList.tsx b/client/src/components/ContactList.tsx index d6ccd1c2e57bc17d9566eb303ad33b912b6e666c..258ada99e63ac5396ea07ddd0230fd83d842532a 100644 --- a/client/src/components/ContactList.tsx +++ b/client/src/components/ContactList.tsx @@ -16,9 +16,8 @@ * <https://www.gnu.org/licenses/>. */ -import { Box, Divider, ListItem, ListItemAvatar, ListItemText } from '@mui/material' +import { Box, ListItem, ListItemAvatar, ListItemText, useTheme } from '@mui/material' import List from '@mui/material/List' -import { motion } from 'framer-motion' import { memo, SetStateAction, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -36,7 +35,7 @@ import { ConfirmationDialog, useDialogHandler } from './Dialog' import EllipsisMiddle from './EllipsisMiddle' import LoadingPage from './Loading' import { PopoverListItemData } from './PopoverList' -import { BlockContactIcon, CancelIcon, CheckedIcon, PersonIcon } from './SvgIcon' +import { BlockContactIcon, CancelIcon, PersonIcon } from './SvgIcon' interface ContactListProps { members?: string[] @@ -55,6 +54,7 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb const singleContactQuery = useContactQuery(currentContactId) const { data: contactDetail } = singleContactQuery const contextMenuHandler = useContextMenuHandler() + const theme = useTheme() const { props: { open: dialogOpen, onClose: closeContactDialog }, @@ -90,18 +90,13 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb setFilterValue(event.target.value) } - const item = { - hidden: { y: 20, opacity: 0 }, - visible: { - y: 0, - opacity: 1, - }, - } - if (isLoading) { return <LoadingPage /> } + const isSelected = (contactId: string): boolean => + selectedContacts !== undefined && selectedContacts.includes(contactId) + return ( <> <ContactDialog @@ -124,7 +119,21 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb <> <ListItem onClick={() => setSelectedContact && setSelectedContact(contact.id)} - sx={{ cursor: 'pointer' }} + sx={{ + cursor: 'pointer', + backgroundColor: isSelected(contact.id) ? theme.ChatInterface.selectedColor : 'inherit', + '&:hover': { + borderColor: theme.palette.primary.light, + textShadow: '0 0 .01px black', + backgroundColor: theme.Footer.backgroundColor, + }, + '&.Mui-selected': { + backgroundColor: theme.ChatInterface.selectedColor, + color: theme.palette.primary.dark, + borderColor: theme.ChatInterface.selectedColor, + textShadow: `0 0 .01px ${theme.ChatInterface.selectedColor}`, + }, + }} alignItems="flex-start" key={contact.id} onContextMenu={(e) => { @@ -151,20 +160,13 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb width: '24px', height: '24px', }} - > - {selectedContacts !== undefined && selectedContacts.includes(contact.id) && ( - <motion.div variants={item} initial="hidden" animate="visible" transition={{ delay: 0.2 }}> - <CheckedIcon /> - </motion.div> - )} - </Box> + ></Box> </ListItem> - {contact.id !== filteredContacts[filteredContacts.length - 1].id && <Divider variant="middle" />} </> ))} </List> {filteredContacts !== undefined && filteredContacts.length === 0 && ( - <Box sx={{ display: 'flex', justifyContent: 'center', textAlign: 'center' }}>No contacts found</Box> + <Box sx={{ display: 'flex', justifyContent: 'center', textAlign: 'center' }}>{t('no_countact_found')}</Box> )} </> ) diff --git a/client/src/themes/Default.ts b/client/src/themes/Default.ts index ad1387806fac77731d291335f2a6b96d36e52d9d..50b9b26b6e87cd016890aa82edb5bf293ec7643b 100644 --- a/client/src/themes/Default.ts +++ b/client/src/themes/Default.ts @@ -32,6 +32,7 @@ declare module '@mui/material/styles' { replyBorderColor: string messageReplyColor: string reactionModalBackground: string + selectedColor: string backgroundColor: string } LoginPage: { @@ -255,6 +256,7 @@ const palettes = { replyBorderColor: '2px solid white', messageReplyColor: '#D3D3D3', reactionModalBackground: 'lightgrey', + selectedColor: '#D5E3EE', backgroundColor: 'white', }, LoginPage: { @@ -358,6 +360,7 @@ const palettes = { replyBorderColor: '3px solid #121212', messageReplyColor: '#404040', reactionModalBackground: '#1e1f1e', + selectedColor: '#122D42', backgroundColor: '#050505', }, LoginPage: { diff --git a/server/locale/en/translation.json b/server/locale/en/translation.json index 732c244e94e80ec3da7d097d96325919428ef90a..7db88b3e93957bf09533172f4b32ac24d38b96a0 100644 --- a/server/locale/en/translation.json +++ b/server/locale/en/translation.json @@ -200,6 +200,7 @@ "mute_conversation": "Mute conversation", "nameserver_already_set": "The name server is already set.", "next": "Next", + "no_contact_found": "No contact found", "no_files_found": "No files yet.", "ongoing_call_muted": "Ongoing call (muted)", "ongoing_call_unmuted": "Ongoing call",