From 844f4e3ea02328eaad6342cbf8a0652efc3d9c5f Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 20 Mar 2024 11:16:19 -0600
Subject: [PATCH] Fix selected items text

---
 web/src/components/filter/ReviewActionGroup.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/components/filter/ReviewActionGroup.tsx b/web/src/components/filter/ReviewActionGroup.tsx
index 5e1a93185..6b9935d04 100644
--- a/web/src/components/filter/ReviewActionGroup.tsx
+++ b/web/src/components/filter/ReviewActionGroup.tsx
@@ -36,11 +36,15 @@ export default function ReviewActionGroup({
 
   return (
     <div className="absolute inset-x-2 inset-y-0 md:left-auto md:right-2 p-2 flex gap-2 justify-between items-center bg-background">
-      <div className="flex items-center">
-        <div className="text-sm text-gray-500 mr-2">{`${selectedReviews.length} selected | `}</div>
-        <Button size="xs" variant="link" onClick={onClearSelected}>
+      <div className="mx-1 flex justify-center items-center text-sm text-muted-foreground">
+        <div className="p-1">{`${selectedReviews.length} selected`}</div>
+        <div className="p-1">{"|"}</div>
+        <div
+          className="p-2 text-primary-foreground cursor-pointer hover:bg-secondary hover:rounded-lg"
+          onClick={onClearSelected}
+        >
           Unselect
-        </Button>
+        </div>
       </div>
       <div className="flex items-center gap-1 md:gap-2">
         {selectedReviews.length == 1 && (