From c34c6b63f03bd4529da21fc1e25ed857734a940a Mon Sep 17 00:00:00 2001
From: Alexander King <alexhking@gmail.com>
Date: Wed, 23 Oct 2024 09:18:10 -0700
Subject: [PATCH] chore(zbugs): Sort controls trigger on mouseDown. Removed
 sort direction animation. (#2797)

---
 apps/zbugs/src/index.css                |  2 +-
 apps/zbugs/src/pages/list/list-page.tsx | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/zbugs/src/index.css b/apps/zbugs/src/index.css
index d177623940..9b2c1d57fa 100644
--- a/apps/zbugs/src/index.css
+++ b/apps/zbugs/src/index.css
@@ -290,7 +290,7 @@ textarea.autoResize {
 .sort-control,
 .sort-direction {
   opacity: 0.6;
-  transition: all 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
 }
 
 .sort-control:hover,
diff --git a/apps/zbugs/src/pages/list/list-page.tsx b/apps/zbugs/src/pages/list/list-page.tsx
index 7fcb7adc4f..81168e837a 100644
--- a/apps/zbugs/src/pages/list/list-page.tsx
+++ b/apps/zbugs/src/pages/list/list-page.tsx
@@ -20,6 +20,7 @@ import {useThrottledCallback} from 'use-debounce';
 import RelativeTime from '../../components/relative-time.js';
 import {useClickOutside} from '../../hooks/use-click-outside.js';
 import {useKeypress} from '../../hooks/use-keypress.js';
+import {Button} from '../../components/button.js';
 
 let firstRowRendered = false;
 const itemSize = 56;
@@ -286,13 +287,13 @@ export default function ListPage() {
         })}
         <Filter onSelect={onFilter} />
         <div className="sort-control-container">
-          <button className="sort-control" onClick={toggleSortField}>
+          <Button className="sort-control" onAction={toggleSortField}>
             {sortField === 'modified' ? 'Modified' : 'Created'}
-          </button>
-          <button
+          </Button>
+          <Button
             className={classNames('sort-direction', sortDirection)}
-            onClick={toggleSortDirection}
-          ></button>
+            onAction={toggleSortDirection}
+          ></Button>
         </div>
       </div>