Fix placement of CanvasModal's Close button

closes LF-769
flag=none

test plan:
  - open a CanvasModal
    - calendar, click on a date, from Frequency dropdown pick
      Custom
    - courses/:id/assignments, choose Edit Assignment Dates
      from the kabob menu, select assignment(s), click the
      Bulk Edit button
    - if you have some LTI tools installed, go somewhere with
      an RCE, click on the external tools button, then View All
  > expect the 'x' close button to be in the upper-right corner
    of the modal
  - put your user in a rtl language
  > expect the close button to be in the upper-left corner

Change-Id: Ieb314304bb159b1c2192a00b2fa126153bfe8c22
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/327812
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
QA-Review: Jackson Howe <jackson.howe@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>

ui/shared/instui-bindings/react/Modal.tsx

@@ -22,7 +22,6 @@ import React, {ReactElement} from 'react'
 
 import {CloseButton} from '@instructure/ui-buttons'
 import {View} from '@instructure/ui-view'
-import {Flex} from '@instructure/ui-flex'
 import {Heading} from '@instructure/ui-heading'
 import {Modal} from '@instructure/ui-modal'
 
@@ -65,18 +64,14 @@ function CanvasModal({
   return (
     <Modal label={label} onDismiss={onDismiss} {...otherModalProps}>
       <Modal.Header>
-        <Flex>
-          <Flex.Item grow={true}>
-            <Heading>{title}</Heading>
-          </Flex.Item>
-          <Flex.Item margin="0 0 0 x-small">
-            <CloseButton
-              onClick={onDismiss}
-              size={closeButtonSize}
-              screenReaderLabel={I18n.t('Close')}
-            />
-          </Flex.Item>
-        </Flex>
+        <Heading>{title}</Heading>
+        <CloseButton
+          onClick={onDismiss}
+          size={closeButtonSize}
+          screenReaderLabel={I18n.t('Close')}
+          placement="end"
+          offset="medium"
+        />
       </Modal.Header>
       <Modal.Body padding={padding}>
         <View as="div" height="100%">