[IMPROVE] UI/UX enhancements in Omnichannnel Current Chats page (#19397)

* [FIX] fixing sort by last message and width of status too large.

* [FIX] Fixing close icon

* [IMPROVE] Removing colons from labels.

* [FIX] Fixing title to get from i18n.

Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>

app/livechat/client/views/app/tabbar/visitorInfo.html

@@ -74,7 +74,7 @@
 
 				{{#if roomOpen}}
 					{{#if canCloseRoom}}
-						<button class='button rc-button rc-button--secondary button-block close-livechat'><span><i class='icon-download'></i> {{_ "Close"}}</span></button>
+						<button class='button rc-button rc-button--secondary button-block close-livechat'><span><i class='icon-cancel'></i> {{_ "Close"}}</span></button>
 					{{/if}}
 					{{#if canForwardGuest}}
 						<button class="button rc-button rc-button--secondary button-block forward-livechat"><span><i class="icon-forward"></i> {{_ "Forward"}}</span></button>

client/omnichannel/currentChats/CurrentChatsPage.js

@@ -136,27 +136,27 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
 	return <Box mb='x16' is='form' onSubmit={onSubmit} display='flex' flexDirection='column' {...props}>
 		<Box display='flex' flexDirection='row' flexWrap='wrap' {...props}>
 			<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
-				<Label mb='x4' >{t('Guest')}:</Label>
+				<Label mb='x4' >{t('Guest')}</Label>
 				<TextInput flexShrink={0} placeholder={t('Guest')} onChange={handleGuest} value={guest} />
 			</Box>
 			<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
-				<Label mb='x4'>{t('Served_By')}:</Label>
+				<Label mb='x4'>{t('Served_By')}</Label>
 				<AutoCompleteAgent value={servedBy} onChange={handleServedBy}/>
 			</Box>
 			<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
-				<Label mb='x4'>{t('Department')}:</Label>
+				<Label mb='x4'>{t('Department')}</Label>
 				<AutoCompleteDepartment value={department} onChange={handleDepartment}/>
 			</Box>
 			<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
-				<Label mb='x4'>{t('Status')}:</Label>
+				<Label mb='x4'>{t('Status')}</Label>
 				<Select flexShrink={0} options={statusOptions} value={status} onChange={handleStatus} placeholder={t('Status')}/>
 			</Box>
 			<Box display='flex' mie='x8' flexGrow={0} flexDirection='column'>
-				<Label mb='x4'>{t('From')}:</Label>
+				<Label mb='x4'>{t('From')}</Label>
 				<InputBox type='date' flexShrink={0} placeholder={t('From')} onChange={handleFrom} value={from} />
 			</Box>
 			<Box display='flex' mie='x8' flexGrow={0} flexDirection='column'>
-				<Label mb='x4'>{t('To')}:</Label>
+				<Label mb='x4'>{t('To')}</Label>
 				<InputBox type='date' flexShrink={0} placeholder={t('To')} onChange={handleTo} value={to} />
 			</Box>
 
@@ -164,13 +164,13 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
 		</Box>
 		{Tags && <Box display='flex' flexDirection='row' marginBlockStart='x8' {...props}>
 			<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
-				<Label mb='x4'>{t('Tags')}:</Label>
+				<Label mb='x4'>{t('Tags')}</Label>
 				<Tags value={tags} handler={handleTags} />
 			</Box>
 		</Box>}
 		{allCustomFields && <Box display='flex' flexDirection='row' marginBlockStart='x8' {...props}>
 			<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
-				<Label mb='x4'>{t('Custom_Fields')}:</Label>
+				<Label mb='x4'>{t('Custom_Fields')}</Label>
 				<MultiSelect options={customFieldsOptions} value={customFields} onChange={handleCustomFields} flexGrow={1} {...props}/>
 			</Box>
 		</Box>}

client/omnichannel/currentChats/CurrentChatsRoute.js

@@ -127,8 +127,8 @@ function CurrentChatsRoute() {
 		<GenericTable.HeaderCell key={'departmentId'} direction={sort[1]} active={sort[0] === 'departmentId'} onClick={onHeaderClick} sort='departmentId' w='x200'>{t('Department')}</GenericTable.HeaderCell>,
 		<GenericTable.HeaderCell key={'servedBy'} direction={sort[1]} active={sort[0] === 'servedBy'} onClick={onHeaderClick} sort='servedBy' w='x120'>{t('Served_By')}</GenericTable.HeaderCell>,
 		<GenericTable.HeaderCell key={'ts'} direction={sort[1]} active={sort[0] === 'ts'} onClick={onHeaderClick} sort='ts' w='x120'>{t('Started_At')}</GenericTable.HeaderCell>,
-		<GenericTable.HeaderCell key={'lm'} direction={sort[1]} active={sort[0] === 'lm'} onClick={onHeaderClick} sort='visibility' w='x120'>{t('Last_Message')}</GenericTable.HeaderCell>,
-		<GenericTable.HeaderCell key={'status'} direction={sort[1]} active={sort[0] === 'status'} onClick={onHeaderClick} sort='status' w='x120'>{t('Status')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'lm'} direction={sort[1]} active={sort[0] === 'lm'} onClick={onHeaderClick} sort='lm' w='x120'>{t('Last_Message')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'status'} direction={sort[1]} active={sort[0] === 'status'} onClick={onHeaderClick} sort='status' w='x60'>{t('Status')}</GenericTable.HeaderCell>,
 		<GenericTable.HeaderCell key={'remove'} w='x40'>{t('Remove')}</GenericTable.HeaderCell>,
 	].filter(Boolean), [sort, onHeaderClick, t]);
 
@@ -155,7 +155,7 @@ function CurrentChatsRoute() {
 		reload={reload}
 		header={header}
 		renderRow={renderRow}
-		title={'Current Chats'}>
+		title={t('Current_Chats')}>
 	</CurrentChatsPage>;
 }