Adjust notification buttons

questdb · Sep 21, 2023 · 0311864 · 0311864
1 parent 2c05de5
commit 0311864
Showing 1 changed file with 6 additions and 9 deletions.
diff --git a/packages/web-console/src/scenes/Notifications/index.tsx b/packages/web-console/src/scenes/Notifications/index.tsx
@@ -37,11 +37,11 @@ import {
   PaneMenu,
   PaneWrapper,
   Text,
-  SecondaryButton,
   useScreenSize,
 } from "../../components"
 import { actions, selectors } from "../../store"
 import { TerminalBox, Subtract, ArrowUpS } from "styled-icons/remix-line"
+import { Button } from "@questdb/react-components"
 
 import Notification from "./Notification"
 
@@ -83,10 +83,6 @@ const ClearAllNotifications = styled.div`
   margin-top: auto;
 `
 
-const ClearAllNotificationsButton = styled(SecondaryButton)`
-  margin-top: 1rem;
-`
-
 const Notifications = () => {
   const notifications = useSelector(selectors.query.getNotifications)
   const { sm } = useScreenSize()
@@ -138,9 +134,9 @@ const Notifications = () => {
             <Notification isMinimized={true} {...lastNotification} />
           )}
         </LatestNotification>
-        <SecondaryButton onClick={toggleMinimized}>
+        <Button skin="secondary" size="sm" onClick={toggleMinimized}>
           {isMinimized ? <ArrowUpS size="18px" /> : <Subtract size="18px" />}
-        </SecondaryButton>
+        </Button>
       </Menu>
       {!isMinimized && (
         <Content minimized={isMinimized} ref={contentRef}>
@@ -157,12 +153,13 @@ const Notifications = () => {
           </TransitionGroup>
           {!isMinimized && (
             <ClearAllNotifications>
-              <ClearAllNotificationsButton
+              <Button
+                skin="secondary"
                 disabled={notifications.length === 0}
                 onClick={cleanupNotifications}
               >
                 Clear all
-              </ClearAllNotificationsButton>
+              </Button>
             </ClearAllNotifications>
           )}
         </Content>