chore: render button only if primary or secondary button is used

src/components/modal/ConfirmationModal.tsx

@@ -167,7 +167,15 @@ const ConfirmationModal = ({
 
         {children && <div className='w-full'>{children}</div>}
 
-        <div className='w-full grid grid-cols-2 gap-3'>
+        {(secondaryButton || primaryButton) && (
+          <div
+            className={cn('w-full grid gap-3', {
+              'grid-cols-2': secondaryButton && primaryButton,
+              'grid-cols-1':
+                (secondaryButton && !primaryButton) ||
+                (!secondaryButton && primaryButton),
+            })}
+          >
             {secondaryButton && secondaryButton.text && (
               <Button
                 {...secondaryButton}
@@ -204,12 +212,16 @@ const ConfirmationModal = ({
                     ? primaryButton?.isLoading
                     : isPrimaryButtonLoading
                 }
-              className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
+                className={cn(
+                  'p-2 rounded-xl text-sm',
+                  primaryButton?.className
+                )}
               >
                 {primaryButton?.text ?? 'Ya'}
               </Button>
             )}
           </div>
+        )}
       </div>
     </Modal>
   );