refactor(prejoin) use jss instead of sass in CallingDialog (#11117)

css/premeeting/_prejoin-dialog.scss

@@ -165,23 +165,3 @@
         }
     }
 }
-
-.prejoin-dialog-calling {
-    padding: 16px;
-    text-align: center;
-
-    &-header {
-        text-align: right;
-    }
-
-    &-label {
-        font-size: 15px;
-        margin: 8px 0 16px 0;
-    }
-
-    &-number {
-        font-size: 19px;
-        line-height: 28px;
-        margin: 16px 0;
-    }
-}

react/features/prejoin/components/dialogs/CallingDialog.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 
 import { Avatar } from '../../../base/avatar';
@@ -35,6 +36,30 @@ type Props = {
     t: Function,
 };
 
+const useStyles = makeStyles(theme => {
+    return {
+        callingDialog: {
+            padding: theme.spacing(3),
+            textAlign: 'center',
+
+            '& .prejoin-dialog-calling-header': {
+                textAlign: 'right'
+            },
+
+            '& .prejoin-dialog-calling-label': {
+                fontSize: '15px',
+                margin: `${theme.spacing(2)}px 0 ${theme.spacing(3)}px 0`
+            },
+
+            '& .prejoin-dialog-calling-number': {
+                fontSize: '19px',
+                lineHeight: '28px',
+                margin: `${theme.spacing(3)}px 0`
+            }
+        }
+    };
+});
+
 /**
  * Dialog displayed when the user gets called by the meeting.
  *
@@ -43,9 +68,10 @@ type Props = {
  */
 function CallingDialog(props: Props) {
     const { number, onClose, status, t } = props;
+    const classes = useStyles();
 
     return (
-        <div className = 'prejoin-dialog-calling'>
+        <div className = { classes.callingDialog }>
             <div className = 'prejoin-dialog-calling-header'>
                 <Icon
                     className = 'prejoin-dialog-icon'