refactor(prejoin) use jss instead of sass in DeviceStatus (#11116)

css/premeeting/_device-status.scss

@@ -1,38 +0,0 @@
-.device {
-    &-status {
-        align-items: center;
-        color: #fff;
-        display: flex;
-        font-size: 14px;
-        line-height: 20px;
-        padding: 6px;
-        text-align: center;
-
-        &-error {
-            align-items: flex-start;
-            background-color: #F8AE1A;
-            border-radius: 6px;
-            color: #040404;
-            padding: 12px 16px;
-            text-align: left;
-        }
-
-        span {
-            margin-left: 16px;
-        }
-    }
-
-    &-icon {
-        background-position: center;
-        background-repeat: no-repeat;
-        display: inline-block;
-        height: 16px;
-        width: 16px;
-
-        &--ok {
-            svg path {
-                fill: #189b55;
-            }
-        }
-    }
-}

css/premeeting/_main.scss

@@ -1,5 +1,4 @@
 @import 'connection-status';
-@import 'device-status';
 @import 'lobby';
 @import 'premeeting-screens';
 @import 'prejoin';

react/features/prejoin/components/preview/DeviceStatus.js

@@ -1,5 +1,7 @@
 // @flow
 
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
 import React from 'react';
 
 import { translate } from '../../../base/i18n';
@@ -29,6 +31,43 @@ export type Props = {
     t: Function
 };
 
+const useStyles = makeStyles(theme => {
+    return {
+        deviceStatus: {
+            alignItems: 'center',
+            color: '#fff',
+            display: 'flex',
+            fontSize: '14px',
+            lineHeight: '20px',
+            padding: '6px',
+            textAlign: 'center',
+
+            '& span': {
+                marginLeft: theme.spacing(3)
+            },
+
+            '&.device-status-error': {
+                alignItems: 'flex-start',
+                backgroundColor: theme.palette.warning01,
+                borderRadius: '6px',
+                color: theme.palette.uiBackground,
+                padding: '12px 16px',
+                textAlign: 'left'
+            },
+            '& .device-icon': {
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
+                display: 'inline-block',
+                height: '16px',
+                width: '16px'
+            },
+            '& .device-icon--ok svg path': {
+                fill: '#189B55'
+            }
+        }
+    };
+});
+
 const iconMap = {
     warning: {
         src: IconExclamationTriangle,
@@ -47,9 +86,10 @@ const iconMap = {
  * @returns {ReactElement}
  */
 function DeviceStatus({ deviceStatusType, deviceStatusText, t }: Props) {
+    const classes = useStyles();
     const { src, className } = iconMap[deviceStatusType];
     const hasError = deviceStatusType === 'warning';
-    const containerClassName = `device-status ${hasError ? 'device-status-error' : ''}`;
+    const containerClassName = clsx(classes.deviceStatus, { 'device-status-error': hasError });
 
     return (
         <div