From 182a67afc8b9f83a2a0d28ac7d80fd18b3db3485 Mon Sep 17 00:00:00 2001
From: Kevin Biju <kevin@peerdb.io>
Date: Wed, 24 Jan 2024 21:47:35 +0530
Subject: [PATCH] fixed review comments pt.1

---
 ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx b/ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx
index dc60f7cff3..d6ea02db37 100644
--- a/ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx
@@ -12,6 +12,7 @@ import moment from 'moment';
 import Link from 'next/link';
 import MirrorValues from './configValues';
 import TablePairs from './tablePairs';
+import { Button } from '@/lib/Button';
 
 type props = {
   syncs: SyncStatusRow[];
@@ -153,7 +154,7 @@ function statusChangeHandle(
   // hopefully there's a better way to do this cast
   if (mirrorStatus.toString() === FlowStatus[FlowStatus.STATUS_RUNNING]) {
     return (
-      <button
+      <Button
         className='IconButton'
         aria-label='Pause'
         onClick={async () => {
@@ -171,11 +172,11 @@ function statusChangeHandle(
         }}
       >
         <Icon name='pause' />
-      </button>
+      </Button>
     );
   } else if (mirrorStatus.toString() === FlowStatus[FlowStatus.STATUS_PAUSED]) {
     return (
-      <button
+      <Button
         className='IconButton'
         aria-label='Play'
         onClick={async () => {
@@ -193,18 +194,18 @@ function statusChangeHandle(
         }}
       >
         <Icon name='play_circle' />
-      </button>
+      </Button>
     );
   } else {
     return (
-      <button
+      <Button
         className='IconButton'
         aria-label='Pause (disabled)'
         disabled={true}
         style={{ opacity: '50%' }}
       >
         <Icon name='pause' />
-      </button>
+      </Button>
     );
   }
 }