[OT] Rework SortIcons

services/frontend/src/components/OodiTable/components/Header.tsx

@@ -3,7 +3,7 @@ import TableCell from '@mui/material/TableCell'
 import TableRow from '@mui/material/TableRow'
 import type { HeaderGroup } from '@tanstack/react-table'
 
-import { OodiTableSortIcons } from '@/components/OodiTable/components/SortIcons'
+import { OodiTableSortIcons, OtSortIconWrapper } from '@/components/OodiTable/components/SortIcons'
 import { flexRender } from '@/components/OodiTable/components/util'
 import { getCommonPinningStyles, verticalStyles } from '@/components/OodiTable/styles'
 
@@ -64,7 +64,9 @@ export const OodiTableHeaderGroup = <OTData,>(headerGroup: HeaderGroup<OTData>,
           ) : (
             <>{flexRender(header.column.columnDef.header, header.getContext())}</>
           )}
-          <OodiTableSortIcons canSort={canSort} isSorted={header.column.getIsSorted()} />
+          <OtSortIconWrapper>
+            <OodiTableSortIcons canSort={canSort} isSorted={header.column.getIsSorted()} />
+          </OtSortIconWrapper>
         </OtHeaderCell>
       )
     })}

services/frontend/src/components/OodiTable/components/SortIcons.tsx

@@ -3,7 +3,7 @@ import type { SortDirection } from '@tanstack/react-table'
 
 import { ArrowDownwardIcon, ArrowUpwardIcon, SwapVertIcon } from '@/theme'
 
-const OtSortIconWrapper = styled('div')(() => ({
+export const OtSortIconWrapper = styled('div')(() => ({
   position: 'absolute',
   right: '0',
   bottom: '0',
@@ -15,28 +15,31 @@ const OtSortIconWrapper = styled('div')(() => ({
 }))
 
 const OtSortAscIcon = styled(ArrowUpwardIcon)(({ theme }) => ({
-  fontSize: '1.25rem',
+  fontSize: '1.25em',
   color: theme.palette.primary.main,
 }))
 
 const OtSortDescIcon = styled(ArrowDownwardIcon)(({ theme }) => ({
-  fontSize: '1.25rem',
+  fontSize: '1.25em',
   color: theme.palette.primary.main,
 }))
 
 const OtSortUnsetIcon = styled(SwapVertIcon)(({ theme }) => ({
-  fontSize: '1.25rem',
+  fontSize: '1.25em',
   color: theme.palette.grey[300],
 }))
 
-export const OodiTableSortIcons = ({ canSort, isSorted }: { canSort: boolean; isSorted: SortDirection | false }) => (
-  <OtSortIconWrapper>
-    {canSort
-      ? {
-          asc: <OtSortAscIcon />,
-          desc: <OtSortDescIcon />,
-          false: <OtSortUnsetIcon />,
-        }[isSorted as string]
-      : null}
-  </OtSortIconWrapper>
-)
+export const OodiTableSortIcons = ({ canSort, isSorted }: { canSort: boolean; isSorted: SortDirection | false }) => {
+  if (!canSort) return null
+
+  switch (isSorted) {
+    case 'asc':
+      return <OtSortAscIcon />
+    case 'desc':
+      return <OtSortDescIcon />
+    case false:
+      return <OtSortUnsetIcon />
+    default:
+      return null
+  }
+}