Fix up InstUI imports for packages/canvas-media

Closes FOO-1805
flag = none

Also brings all of canvas-media up to InstUI 7

Test plan:
* tests pass
* canvas media still works

Change-Id: I64beb416ecc118ea5de91d25968e8878e53816a8
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/262107
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Ed Schiebel <eschiebel@instructure.com>
Product-Review: Charley Kline <ckline@instructure.com>

packages/canvas-media/package.json

@@ -26,34 +26,34 @@
   },
   "homepage": "https://github.com/instructure/canvas-lms#readme",
   "dependencies": {
-    "@instructure/canvas-theme": "6",
+    "@instructure/canvas-theme": "7",
     "@instructure/k5uploader": "^1.0.0",
     "@instructure/media-capture": "~7.1.0",
-    "@instructure/ui-a11y": "6",
-    "@instructure/ui-alerts": "6",
-    "@instructure/ui-billboard": "6",
-    "@instructure/ui-buttons": "6",
-    "@instructure/ui-color-utils": "6",
-    "@instructure/ui-elements": "6",
-    "@instructure/ui-flex": "6",
-    "@instructure/ui-forms": "6",
+    "@instructure/ui-a11y-content": "^7",
+    "@instructure/ui-alerts": "^7",
+    "@instructure/ui-billboard": "^7",
+    "@instructure/ui-buttons": "^7",
+    "@instructure/ui-checkbox": "^7",
+    "@instructure/ui-color-utils": "^7",
+    "@instructure/ui-file-drop": "^7",
+    "@instructure/ui-flex": "^7",
     "@instructure/ui-icons": "7",
-    "@instructure/ui-heading": "6",
-    "@instructure/ui-layout": "6",
+    "@instructure/ui-heading": "^7",
     "@instructure/ui-media-player": "^7",
-    "@instructure/ui-overlays": "6",
-    "@instructure/ui-pagination": "6",
-    "@instructure/ui-react-utils": "6",
-    "@instructure/ui-select": "6",
-    "@instructure/ui-spinner": "6",
-    "@instructure/ui-svg-images": "6",
-    "@instructure/ui-tabs": "6",
-    "@instructure/ui-text-input": "6",
-    "@instructure/ui-themeable": "6",
-    "@instructure/ui-themes": "6",
-    "@instructure/ui-utils": "6",
-    "@instructure/ui-view": "6",
-    "@instructure/ui-toggle-details": "6",
+    "@instructure/ui-modal": "^7",
+    "@instructure/ui-pagination": "^7",
+    "@instructure/ui-react-utils": "^7",
+    "@instructure/ui-select": "^7",
+    "@instructure/ui-spinner": "^7",
+    "@instructure/ui-svg-images": "^7",
+    "@instructure/ui-tabs": "^7",
+    "@instructure/ui-text-input": "^7",
+    "@instructure/ui-themeable": "^7",
+    "@instructure/ui-themes": "^7",
+    "@instructure/ui-utils": "^7",
+    "@instructure/ui-text": "^7",
+    "@instructure/ui-view": "^7",
+    "@instructure/ui-toggle-details": "^7",
     "@instructure/uid": "6",
     "@sheerun/mutationobserver-shim": "^0.3.2",
     "axios": "^0.18.0",

packages/canvas-media/src/ClosedCaptionCreator/ClosedCaptionCreatorRow.js

@@ -22,8 +22,8 @@ import formatMessage from 'format-message'
 import {Button, IconButton} from '@instructure/ui-buttons'
 import {Flex} from '@instructure/ui-flex'
 import {IconTrashLine} from '@instructure/ui-icons'
-import {ScreenReaderContent} from '@instructure/ui-a11y'
-import {Text} from '@instructure/ui-elements'
+import {ScreenReaderContent} from '@instructure/ui-a11y-content'
+import {Text} from '@instructure/ui-text'
 import {View} from '@instructure/ui-view'
 
 import CanvasSelect from '../shared/CanvasSelect'
@@ -49,6 +49,7 @@ export default class ClosedCaptionCreatorRow extends Component {
   }
 
   _langSelectRef = React.createRef()
+
   _deleteCCBtnRef = React.createRef()
 
   handleLanguageChange = (event, selectedLang) => {

packages/canvas-media/src/ComputerPanel.js

@@ -22,11 +22,13 @@ import formatMessage from 'format-message'
 
 import {Billboard} from '@instructure/ui-billboard'
 import {Button} from '@instructure/ui-buttons'
-import {Checkbox, FileDrop} from '@instructure/ui-forms'
-import {Flex, View} from '@instructure/ui-layout'
+import {Checkbox} from '@instructure/ui-checkbox'
+import {FileDrop} from '@instructure/ui-file-drop'
+import {Flex} from '@instructure/ui-flex'
+import {View} from '@instructure/ui-view'
 import {IconTrashLine, IconVideoLine} from '@instructure/ui-icons'
-import {PresentationContent, ScreenReaderContent} from '@instructure/ui-a11y'
-import {Text} from '@instructure/ui-elements'
+import {PresentationContent, ScreenReaderContent} from '@instructure/ui-a11y-content'
+import {Text} from '@instructure/ui-text'
 import {px} from '@instructure/ui-utils'
 import {MediaPlayer} from '@instructure/ui-media-player'
 

packages/canvas-media/src/UploadMedia.js

@@ -21,7 +21,7 @@ import ReactDOM from 'react-dom'
 
 import {Button, CloseButton} from '@instructure/ui-buttons'
 import {Heading} from '@instructure/ui-heading'
-import {Modal} from '@instructure/ui-overlays'
+import {Modal} from '@instructure/ui-modal'
 import {Tabs} from '@instructure/ui-tabs'
 import {px} from '@instructure/ui-utils'
 

packages/canvas-media/src/shared/LoadingIndicator.js

@@ -18,7 +18,7 @@
 import React from 'react'
 import {oneOf, string} from 'prop-types'
 import {Spinner} from '@instructure/ui-spinner'
-import {View} from '@instructure/ui-layout'
+import {View} from '@instructure/ui-view'
 
 export default function LoadingIndicator({translatedTitle, size}) {
   return (