chore: tweak filter controls

components/filters/FilterControls.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { Button } from "@nextui-org/react";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useState } from "react";
 
+import { CrossIcon } from "../icons";
+import { CustomButton } from "../ui/custom";
 import { CustomAccountSelection } from "./CustomAccountSelection";
 import { CustomCheckboxMutedFindings } from "./CustomCheckboxMutedFindings";
 import { CustomDatePicker } from "./CustomDatePicker";
@@ -59,15 +60,16 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
       {mutedFindings && <CustomCheckboxMutedFindings />}
 
       {showClearButton && (
-        <Button
-          className="w-full md:w-fit transition-all duration-300 ease-in-out"
-          onClick={clearAllFilters}
-          variant="flat"
-          color="default"
+        <CustomButton
+          className="w-fit"
+          onPress={clearAllFilters}
+          variant="dashed"
           size="sm"
+          endContent={<CrossIcon size={24} />}
+          radius="sm"
         >
-          Clear all
-        </Button>
+          Reset
+        </CustomButton>
       )}
     </div>
   );

components/icons/Icons.tsx

@@ -305,28 +305,31 @@ export const WifiPendingIcon: React.FC<IconSvgProps> = ({
 );
 
 export const DeleteIcon: React.FC<IconSvgProps> = ({
-  size = 24,
-  width,
+  size,
   height,
+  width,
   ...props
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"
-    />
-  </svg>
-);
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      height={size || height || 48}
+      viewBox="0 0 24 24"
+      width={size || width || 48}
+      aria-hidden="true"
+      {...props}
+    >
+      <g fill="none">
+        <path d="m12.593 23.258-.011.002-.071.035-.02.004-.014-.004-.071-.035q-.016-.005-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427q-.004-.016-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093q.019.005.029-.008l.004-.014-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014-.034.614q.001.018.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z" />
+        <path
+          fill="currentColor"
+          d="M14.28 2a2 2 0 0 1 1.897 1.368L16.72 5H20a1 1 0 1 1 0 2l-.003.071-.867 12.143A3 3 0 0 1 16.138 22H7.862a3 3 0 0 1-2.992-2.786L4.003 7.07 4 7a1 1 0 0 1 0-2h3.28l.543-1.632A2 2 0 0 1 9.721 2zm3.717 5H6.003l.862 12.071a1 1 0 0 0 .997.929h8.276a1 1 0 0 0 .997-.929zM10 10a1 1 0 0 1 .993.883L11 11v5a1 1 0 0 1-1.993.117L9 16v-5a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1m.28-6H9.72l-.333 1h5.226z"
+        />
+      </g>
+    </svg>
+  );
+};
 
 export const CheckIcon: React.FC<IconSvgProps> = ({
   size = 24,