From a19f7a5692a774a031ad18534570b2642d4413da Mon Sep 17 00:00:00 2001
From: "Laurie T. Malau" <laurie@gitpod.io>
Date: Tue, 2 Aug 2022 16:20:53 +0000
Subject: [PATCH] Replace with sorting icon

---
 components/dashboard/src/images/sort-arrow.svg |  1 +
 components/dashboard/src/teams/TeamUsage.tsx   | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 components/dashboard/src/images/sort-arrow.svg

diff --git a/components/dashboard/src/images/sort-arrow.svg b/components/dashboard/src/images/sort-arrow.svg
new file mode 100644
index 00000000000000..3cf565bf0ce211
--- /dev/null
+++ b/components/dashboard/src/images/sort-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="#A8A29E" fill-rule="evenodd" d="M13.366 8.234a.8.8 0 0 1 0 1.132l-4.8 4.8a.8.8 0 0 1-1.132 0l-4.8-4.8a.8.8 0 1 1 1.132-1.132L7.2 11.67V2.4a.8.8 0 1 1 1.6 0v9.269l3.434-3.435a.8.8 0 0 1 1.132 0z" clip-rule="evenodd"/></svg>
diff --git a/components/dashboard/src/teams/TeamUsage.tsx b/components/dashboard/src/teams/TeamUsage.tsx
index 66913ea289a09c..f19c905a66b1e0 100644
--- a/components/dashboard/src/teams/TeamUsage.tsx
+++ b/components/dashboard/src/teams/TeamUsage.tsx
@@ -23,7 +23,7 @@ import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
 import { ReactComponent as CreditsSvg } from "../images/credits.svg";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
-import Arrow from "../components/Arrow";
+import { ReactComponent as SortArrow } from "../images/sort-arrow.svg";
 
 function TeamUsage() {
     const { teams } = useContext(TeamsContext);
@@ -202,9 +202,16 @@ function TeamUsage() {
                                             <span>Credits</span>
                                         </ItemField>
                                         <ItemField className="my-auto cursor-pointer">
-                                            <span onClick={() => setIsStartedTimeDescending(!isStartedTimeDescending)}>
+                                            <span
+                                                className="flex my-auto"
+                                                onClick={() => setIsStartedTimeDescending(!isStartedTimeDescending)}
+                                            >
                                                 Started
-                                                <Arrow direction={isStartedTimeDescending ? "down" : "up"} />
+                                                <SortArrow
+                                                    className={`h-4 w-4 my-auto ${
+                                                        isStartedTimeDescending ? "" : " transform rotate-180"
+                                                    }`}
+                                                />
                                             </span>
                                         </ItemField>
                                     </Item>