From fecea28207d7233e056c23e4c8ebe92fd33418f5 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Mon, 4 Sep 2023 15:43:45 -0700
Subject: [PATCH] chore: switch toast container to use trading variant

---
 .../src/components/toast/toasts-container.tsx | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/libs/ui-toolkit/src/components/toast/toasts-container.tsx b/libs/ui-toolkit/src/components/toast/toasts-container.tsx
index 00fc88e4e..ae380b16d 100644
--- a/libs/ui-toolkit/src/components/toast/toasts-container.tsx
+++ b/libs/ui-toolkit/src/components/toast/toasts-container.tsx
@@ -3,7 +3,7 @@ import { usePrevious } from '@vegaprotocol/react-helpers';
 import classNames from 'classnames';
 import type { Ref } from 'react';
 import { useLayoutEffect, useRef } from 'react';
-import { Button } from '../button';
+import { TradingButton } from '../trading-button';
 import { Toast } from './toast';
 import type { Toasts } from './use-toasts';
 import { ToastPosition, useToasts, useToastsConfiguration } from './use-toasts';
@@ -87,26 +87,27 @@ export const ToastsContainer = ({
                 </li>
               );
             })}
-        <Button
-          title={t('Dismiss all toasts')}
-          size="sm"
-          fill={true}
+        <div
           className={classNames(
-            'absolute top-[-38px] right-0 z-20',
+            'absolute w-full top-[-38px] right-0 z-20',
             'transition-opacity',
             'opacity-0 group-hover:opacity-50 hover:!opacity-100',
-            'text-sm text-black dark:text-white bg-white dark:bg-black hover:!bg-white hover:dark:!bg-black',
             {
               hidden: validToasts.length === 0,
             }
           )}
-          onClick={() => {
-            closeAll();
-          }}
-          variant={'default'}
         >
-          {t('Dismiss all')}
-        </Button>
+          <TradingButton
+            title={t('Dismiss all toasts')}
+            size="small"
+            fill={true}
+            onClick={() => {
+              closeAll();
+            }}
+          >
+            {t('Dismiss all')}
+          </TradingButton>
+        </div>
       </ul>
     </Portal>
   );