From f8cb42a38d3a51ca86136db4bbcc3b335f66570b Mon Sep 17 00:00:00 2001
From: Edd <edd@vega.xyz>
Date: Thu, 15 Jun 2023 15:46:39 +0100
Subject: [PATCH] fix: address feedback

---
 .../app/components/blocks/blocks-refetch.tsx  | 24 +++----------
 .../app/components/txs/tx-filter-label.tsx    | 24 +++++++++++++
 .../src/app/components/txs/tx-filter.tsx      | 35 +++++--------------
 .../dropdown-menu/dropdown-menu.tsx           |  8 +++--
 4 files changed, 44 insertions(+), 47 deletions(-)
 create mode 100644 apps/explorer/src/app/components/txs/tx-filter-label.tsx

diff --git a/apps/explorer/src/app/components/blocks/blocks-refetch.tsx b/apps/explorer/src/app/components/blocks/blocks-refetch.tsx
index f0f9581e2..705caa2cf 100644
--- a/apps/explorer/src/app/components/blocks/blocks-refetch.tsx
+++ b/apps/explorer/src/app/components/blocks/blocks-refetch.tsx
@@ -1,13 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Icon } from '@vegaprotocol/ui-toolkit';
-
-// These are cribbed from dropdown-menu.tsx, so that the classes match
-// the filter button this sits next to on the TXs list page
-const defaultClasses = [
-  'text-sm py-1 px-2 rounded bg-transparent border whitespace-nowrap',
-  'border-vega-light-200 dark:border-vega-dark-200',
-  'hover:border-vega-light-300 dark:hover:border-vega-dark-300',
-].join(' ');
+import { Button, Icon } from '@vegaprotocol/ui-toolkit';
 
 interface BlocksRefetchProps {
   refetch: () => void;
@@ -19,15 +11,9 @@ export const BlocksRefetch = ({ refetch }: BlocksRefetchProps) => {
   };
 
   return (
-    <div className="inline mr-2">
-      <button
-        onClick={refresh}
-        data-testid="refresh"
-        className={defaultClasses}
-      >
-        <Icon name="refresh" className="mr-2" />
-        {t('Load new')}
-      </button>
-    </div>
+    <Button onClick={refresh} data-testid="refresh" size="xs">
+      <Icon name="refresh" className="!align-baseline mr-2" size={3} />
+      {t('Load new')}
+    </Button>
   );
 };
diff --git a/apps/explorer/src/app/components/txs/tx-filter-label.tsx b/apps/explorer/src/app/components/txs/tx-filter-label.tsx
new file mode 100644
index 000000000..dd759d0a8
--- /dev/null
+++ b/apps/explorer/src/app/components/txs/tx-filter-label.tsx
@@ -0,0 +1,24 @@
+import { t } from '@vegaprotocol/i18n';
+
+export interface FilterLabelProps {
+  filters: Set<string>;
+}
+
+/**
+ * Renders the list (currently limited to 1) of filters set by the
+ * Transaction Filter
+ */
+export function FilterLabel({ filters }: FilterLabelProps) {
+  if (!filters || filters.size !== 1) {
+    return <span className="uppercase">{t('Filter')}</span>;
+  }
+
+  return (
+    <div>
+      <span className="uppercase">{t('Filters')}:</span>&nbsp;
+      <code className="bg-vega-light-150 px-2 rounded-md capitalize">
+        {Array.from(filters)[0]}
+      </code>
+    </div>
+  );
+}
diff --git a/apps/explorer/src/app/components/txs/tx-filter.tsx b/apps/explorer/src/app/components/txs/tx-filter.tsx
index f9c12d932..b2b4ead30 100644
--- a/apps/explorer/src/app/components/txs/tx-filter.tsx
+++ b/apps/explorer/src/app/components/txs/tx-filter.tsx
@@ -8,11 +8,12 @@ import {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-  Icon,
   DropdownMenuSubContent,
+  Icon,
+  Button,
 } from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
 import type { Dispatch, SetStateAction } from 'react';
+import { FilterLabel } from './tx-filter-label';
 
 // All possible transaction types. Should be generated.
 export type FilterOption =
@@ -80,28 +81,6 @@ export const AllFilterOptions: FilterOption[] = [
   ...SecondaryFilterOptions,
 ];
 
-export function getFilterLabel(filters: Set<string>) {
-  if (!filters || filters.size !== 1) {
-    return <span>{t('Filter')}</span>;
-  }
-
-  return (
-    <span>
-      {t('Filters')}: <code>{Array.from(filters)[0]}</code>
-    </span>
-  );
-}
-
-// Effectively a copy & paste of the Vega DropdownMenuItem styles
-const itemClass = classNames(
-  'relative flex gap-2 items-center rounded-sm p-2 text-sm',
-  'cursor-default',
-  'hover:bg-white dark:hover:bg-vega-dark-200',
-  'focus:bg-white dark:focus:bg-vega-dark-200',
-  'select-none',
-  'whitespace-nowrap'
-);
-
 export interface TxFilterProps {
   filters: Set<FilterOption>;
   setFilters: Dispatch<SetStateAction<Set<FilterOption>>>;
@@ -121,7 +100,11 @@ export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
     <DropdownMenu
       modal={false}
       trigger={
-        <DropdownMenuTrigger>{getFilterLabel(filters)}</DropdownMenuTrigger>
+        <DropdownMenuTrigger className="ml-2">
+          <Button size="xs">
+            <FilterLabel filters={filters} />
+          </Button>
+        </DropdownMenuTrigger>
       }
     >
       <DropdownMenuContent>
@@ -152,7 +135,7 @@ export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
           </DropdownMenuCheckboxItem>
         ))}
         <DropdownMenuSub>
-          <DropdownMenuSubTrigger className={itemClass}>
+          <DropdownMenuSubTrigger>
             {t('More Types')}
             <Icon name="chevron-right" />
           </DropdownMenuSubTrigger>
diff --git a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
index eab8fdf7b..8dcfa217b 100644
--- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
@@ -189,8 +189,12 @@ export const DropdownMenuSubContent = forwardRef<
 export const DropdownMenuSubTrigger = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>
->(({ ...subTriggerProps }, forwardedRef) => (
-  <DropdownMenuPrimitive.SubTrigger ref={forwardedRef} {...subTriggerProps} />
+>(({ className, ...subTriggerProps }, forwardedRef) => (
+  <DropdownMenuPrimitive.SubTrigger
+    className={classNames(className, itemClass)}
+    ref={forwardedRef}
+    {...subTriggerProps}
+  />
 ));
 
 /**