[IMPROVE] Sort/Group list dropdown (#18081)

client/components/SortList.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Icon, ToggleSwitch, RadioButton, Box, Flex, Margins } from '@rocket.chat/fuselage';
+import { Icon, ToggleSwitch, RadioButton, Box, Flex, Margins, CheckBox, Divider } from '@rocket.chat/fuselage';
 
 
 import { useTranslation } from '../contexts/TranslationContext';
@@ -34,8 +34,10 @@ const style = {
 export function SortList() {
 	return <>
 		<div className='rc-popover__column'>
-			<SortModeList/>
 			<ViewModeList/>
+			<Divider/>
+			<SortModeList/>
+			<Divider/>
 			<GroupingList/>
 		</div>
 	</>;
@@ -119,14 +121,14 @@ function GroupingList() {
 	const t = useTranslation();
 	return <>
 		<Margins block='x8'>
-			<Box is='p' style={style} fontScale='micro'>{t('Grouping')}</Box>
+			<Box is='p' style={style} fontScale='micro'>{t('Group_by')}</Box>
 		</Margins>
 		<ul className='rc-popover__list'>
 			<Margins block='x8'>
-				{isDiscussionEnabled && <SortListItem icon={'discussion'} text={t('Group_discussions')} input={<ToggleSwitch onChange={handleChangeShowDicussion} name='sidebarShowDiscussion' checked={sidebarShowDiscussion} />} />}
-				<SortListItem icon={'sort-amount-down'} text={t('Group_by_Type')} input={<ToggleSwitch onChange={handleChangeGroupByType} name='sidebarGroupByType' checked={sidebarGroupByType} />} />
-				<SortListItem icon={'star'} text={t('Group_favorites')} input={<ToggleSwitch onChange={handleChangeShoFavorite} name='sidebarShowFavorites' checked={sidebarShowFavorites} />} />
-				<SortListItem icon={'eye-off'} text={t('Unread_on_top')} input={<ToggleSwitch onChange={handleChangeShowUnread} name='sidebarShowUnread' checked={sidebarShowUnread} />} />
+				{isDiscussionEnabled && <SortListItem icon={'discussion'} text={t('Discussions')} input={<CheckBox onChange={handleChangeShowDicussion} name='sidebarShowDiscussion' checked={sidebarShowDiscussion} />} />}
+				<SortListItem icon={'group-by-type'} text={t('Type')} input={<CheckBox onChange={handleChangeGroupByType} name='sidebarGroupByType' checked={sidebarGroupByType} />} />
+				<SortListItem icon={'star'} text={t('Favorites')} input={<CheckBox onChange={handleChangeShoFavorite} name='sidebarShowFavorites' checked={sidebarShowFavorites} />} />
+				<SortListItem icon={'eye-off'} text={t('Unread_on_top')} input={<CheckBox onChange={handleChangeShowUnread} name='sidebarShowUnread' checked={sidebarShowUnread} />} />
 			</Margins>
 		</ul>
 	</>;

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1765,6 +1765,7 @@
   "Graphql_Enabled": "GraphQL Enabled",
   "Graphql_CORS": "GraphQL CORS",
   "Graphql_Subscription_Port": "GraphQL Subscription Port",
+  "Group_by": "Group by",
   "Group_by_Type": "Group by Type",
   "Group_discussions": "Group discussions",
   "Group_favorites": "Group favorites",