From 30fa9c07dbc5171a1e5873bc7f4ee3e15fde5d46 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Thu, 31 Oct 2024 17:52:57 +0100
Subject: [PATCH] Change sort icon and remove padding

---
 src/components/Table/SortIcon.tsx | 16 ++++++++++++++++
 src/components/Table/Table.tsx    |  3 ++-
 src/components/Table/table.css    |  8 ++------
 3 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Table/SortIcon.tsx

diff --git a/src/components/Table/SortIcon.tsx b/src/components/Table/SortIcon.tsx
new file mode 100644
index 0000000..edf763a
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 218fb7c..cb5fc8b 100644
--- a/src/components/Table/Table.tsx
+++ b/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>
               );
diff --git a/src/components/Table/table.css b/src/components/Table/table.css
index 3948b9c..1b12d77 100644
--- a/src/components/Table/table.css
+++ b/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:nth-child(2) {
+          th[aria-sort="descending"] path {
             opacity: 1;
           }
 
-          th[aria-sort="ascending"] path:nth-child(3),
-          th[aria-sort="ascending"] path:nth-child(4) {
+          th[aria-sort="ascending"] path {
             opacity: 1;
           }