Change sort icon and remove padding

src/components/Table/SortIcon.tsx

@@ -0,0 +1,16 @@
+export function SortIcon() {
+  return (
+    <svg
+      width="9"
+      height="14"
+      viewBox="0 0 9 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.34261 4.91667L4.17594 0.75L0.00927734 4.91667H8.34261ZM8.34261 9.08333L4.17594 13.25L0.00927734 9.08333H8.34261Z"
+        fill="#969696"
+      />
+    </svg>
+  );
+}

src/components/Table/Table.tsx

@@ -3,6 +3,7 @@ import { ArrowDownUp, Search } from "lucide-react";
 import { Fragment, ReactElement, ReactNode, useEffect, useState } from "react";
 import { classnames } from "../utils/classnames";
 import { attributes } from "../utils/attributes";
+import { SortIcon } from "./SortIcon";
 
 export type TabSortState = "asc" | "desc" | null;
 
@@ -95,7 +96,7 @@ export function Table({
                 >
                   <div>
                     <span>{name}</span>
-                    {sort && <ArrowDownUp size={"1rem"}></ArrowDownUp>}
+                    {sort && <SortIcon />}
                   </div>
                 </th>
               );

src/components/Table/table.css

@@ -1,5 +1,4 @@
 .table {
-  padding: 2rem;
   border-radius: var(--codex-border-radius);
   overflow-x: auto;
   overflow-y: hidden;
@@ -36,7 +35,6 @@
 
           svg {
             position: relative;
-            top: -2px;
             cursor: pointer;
           }
 
@@ -45,13 +43,11 @@
             transition: opacity 0.35s;
           }
 
-          th[aria-sort="descending"] path:nth-child(1),
+          th[aria-sort="descending"] path {
-          th[aria-sort="descending"] path:nth-child(2) {
             opacity: 1;
           }
 
-          th[aria-sort="ascending"] path:nth-child(3),
+          th[aria-sort="ascending"] path {
-          th[aria-sort="ascending"] path:nth-child(4) {
             opacity: 1;
           }