fix sorting icon in table header

Author: jnptk

frontend/packages/volto-keywordmanager/src/components/KeywordManager.tsx

@@ -1,8 +1,7 @@
 import type { SortDescriptor, Selection } from 'react-aria-components';
 import { Table, TableHeader, TableBody } from 'react-aria-components';
 import { Column, Row, Cell, Collection } from 'react-aria-components';
-import { Checkbox } from 'react-aria-components';
-import { Spinner, Button, Select } from '@plone/components';
+import { Checkbox, Spinner, Button, Select } from '@plone/components';
 import { DialogTrigger } from '@plone/components';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
@@ -135,7 +134,12 @@ const KeywordManager = (props) => {
       name: (
         <>
           {intl.formatMessage(messages.keyword)}
-          <Icon name={sortDownSVG} size="16px" ariaHidden="true" />
+          <Icon
+            className={sortOn === 'keyword' && 'active'}
+            name={sortOrder === 'descending' ? sortDownSVG : sortUpSVG}
+            size="20px"
+            ariaHidden="true"
+          />
         </>
       ),
       isRowHeader: true,
@@ -146,7 +150,12 @@ const KeywordManager = (props) => {
       name: (
         <>
           {intl.formatMessage(messages.occurrence)}
-          <Icon name={sortDownSVG} size="16px" ariaHidden="true" />
+          <Icon
+            className={sortOn === 'occurrence' && 'active'}
+            name={sortOrder === 'descending' ? sortDownSVG : sortUpSVG}
+            size="20px"
+            ariaHidden="true"
+          />
         </>
       ),
       allowsSorting: true,

frontend/packages/volto-keywordmanager/src/theme/main.css

@@ -66,10 +66,14 @@
 
     .react-aria-Column,
     .react-aria-Cell {
-      height: 36px;
       padding: 10px;
       border: none;
 
+      &[role='columnheader'] svg:not(.active) {
+        opacity: 0.4;
+        padding-left: 5px;
+      }
+
       &[role='columnheader'],
       &[data-key$=':actions'],
       &[data-key$=':type'],
@@ -178,8 +182,7 @@
 }
 
 .react-aria-ModalOverlay .rename-modal,
-.react-aria-ModalOverlay .delete-modal,
-.react-aria-ModalOverlay .keyword-modal {
+.react-aria-ModalOverlay .delete-modal {
   display: flex;
   width: 100%;
   max-width: 1070px;