import { Dialog } from "@artsy/palette"
import React from "react"
import { ApiError } from "../ApiError"

interface ApiErrorModalProps {
  errors: ApiError[]
  onClose: () => void
  show?: boolean
}

export const ApiErrorModal: React.FC<ApiErrorModalProps> = props => {
  const { errors, onClose, show } = props

  const errorMessage = errors.map(error => error.message).join("\n")

  return (
    <Dialog
      show={show}
      detail={errorMessage}
      title="An error occurred"
      primaryCta={{
        action: onClose,
        text: "OK",
      }}
    />
  )
}

import { Modal, Sans } from "@artsy/palette"
import React from "react"
import { ApiError } from "../ApiError"

interface ApiErrorModalProps {
  errors: ApiError[]
  onClose: () => void
  show?: boolean
}

export const ApiErrorModal: React.FC<ApiErrorModalProps> = props => {
  const { errors, onClose, show } = props

  const errorMessage = errors.map(error => error.message).join("\n")

  return (
    <Modal
      forcedScroll={false}
      title="An error occurred"
      show={show}
      onClose={onClose}
    >
      <Sans color="black60" textAlign="center" size="3t">
        {errorMessage}
      </Sans>
    </Modal>
  )
}

--- 
+++ 
@@ -1,4 +1,4 @@
-import { Modal, Sans } from "@artsy/palette"
+import { Dialog } from "@artsy/palette"
 import React from "react"
 import { ApiError } from "../ApiError"
 
@@ -14,15 +14,14 @@
   const errorMessage = errors.map(error => error.message).join("\n")
 
   return (
-    <Modal
-      forcedScroll={false}
+    <Dialog
+      show={show}
+      detail={errorMessage}
       title="An error occurred"
-      show={show}
-      onClose={onClose}
-    >
-      <Sans color="black60" textAlign="center" size="3t">
-        {errorMessage}
-      </Sans>
-    </Modal>
+      primaryCta={{
+        action: onClose,
+        text: "OK",
+      }}
+    />
   )
 }
Update 2FA enrollment API modal to use Palette dialog
