feat: update sortable icon

src/components/SortIcon/SortIcon.tsx

@@ -1,32 +1,28 @@
 import React from 'react';
 
-import ArrowUpward from '@mui/icons-material/ArrowUpward';
-
 import { SortableIcon } from '@icons/SortableIcon';
 
 export function SortIcon({
   query,
   value,
 }: {
   query: {
-    sortDir?: string;
+    sortDir?: 'asc' | 'desc';
     sortBy?: string;
   };
   value: string;
 }) {
-  if (query.sortBy !== value) {
-    return <SortableIcon />;
-  }
+  return <SortableIcon dir={query.sortBy !== value ? undefined : query.sortDir} />;
 
-  return (
-    <ArrowUpward
-      color="primary"
-      sx={{
-        width: 16,
-        height: 16,
-        transition: 'transform 300ms ease-out',
-        transform: query.sortDir === 'asc' ? 'rotate(180deg)' : 'rotate(0)',
-      }}
-    />
-  );
+  // return (
+  //   <ArrowUpward
+  //     color="primary"
+  //     sx={{
+  //       width: 16,
+  //       height: 16,
+  //       transition: 'transform 300ms ease-out',
+  //       transform: query.sortDir === 'asc' ? 'rotate(180deg)' : 'rotate(0)',
+  //     }}
+  //   />
+  // );
 }

src/components/Table/BorderedTable.tsx

@@ -82,6 +82,7 @@ const ClickableStack = styled(Stack)(({ theme }) => ({
   cursor: 'pointer',
   width: 'auto',
   userSelect: 'none',
+  alignItems: 'center',
 }));
 
 export function HeaderCell({
@@ -117,16 +118,16 @@ export function SortableHeaderCell<S extends string>({
       setQuery.sortDir(query.sortDir === SortDir.Asc ? SortDir.Desc : SortDir.Asc);
     } else {
       setQuery.sortBy(sortBy);
-      setQuery.sortDir(SortDir.Desc);
+      setQuery.sortDir(SortDir.Asc);
     }
   };
 
   return (
     <HeaderCell help={help}>
       <ClickableStack onClick={handleSortChange(sort)} direction="row" spacing={1}>
         <Box>{children}</Box>
-        <Box>
-          <SortIcon query={query} value={sort} />
+        <Box display="flex">
+          <SortIcon query={query as any} value={sort} />
         </Box>
         {/* <TableSortLabel direction={query.sortDir as any} /> */}
       </ClickableStack>

src/icons/SortableIcon.tsx

@@ -1,24 +1,16 @@
 import React from 'react';
 
-export function SortableIcon({ size = 16 }: { size?: number }) {
+export function SortableIcon({ size = 16, dir }: { size?: number; dir?: 'asc' | 'desc' }) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 16 16"
+      viewBox="-6 -4 18 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g opacity="0.8">
-        <path
-          d="M4.24749 2.75232C4.1108 2.61563 3.8892 2.61563 3.75251 2.75232L1.52513 4.9797C1.38844 5.11639 1.38844 5.33799 1.52513 5.47468C1.66181 5.61136 1.88342 5.61136 2.0201 5.47468L4 3.49478L5.9799 5.47468C6.11658 5.61136 6.33819 5.61136 6.47487 5.47468C6.61156 5.33799 6.61156 5.11639 6.47487 4.9797L4.24749 2.75232ZM4.35 12.7998L4.35 2.9998L3.65 2.9998L3.65 12.7998L4.35 12.7998Z"
-          fill="#1D1D1F"
-        />
-        <path
-          d="M10.7525 13.0475C10.8892 13.1842 11.1108 13.1842 11.2475 13.0475L13.4749 10.8201C13.6116 10.6834 13.6116 10.4618 13.4749 10.3251C13.3382 10.1884 13.1166 10.1884 12.9799 10.3251L11 12.305L9.0201 10.3251C8.88342 10.1884 8.66181 10.1884 8.52513 10.3251C8.38844 10.4618 8.38844 10.6834 8.52513 10.8201L10.7525 13.0475ZM10.65 3L10.65 12.8L11.35 12.8L11.35 3L10.65 3Z"
-          fill="#1D1D1F"
-        />
-      </g>
+      <path d="M3 0L5.59808 4.5H0.401924L3 0Z" fill={dir != 'asc' ? '#3E4A5C' : '#d5d8dd'} />
+      <path d="M3 12L5.59808 7.5H0.401924L3 12Z" fill={dir != 'desc' ? '#3E4A5C' : '#d5d8dd'} />
     </svg>
   );
 }