refactor(prejoin) use jss instead of sass in DialInDialog (#11122)

css/premeeting/_prejoin-dialog.scss

@@ -116,52 +116,3 @@
         margin: 8px 0 16px 0;
     }
 }
-
-.prejoin-dialog-dialin {
-    text-align: center;
-
-    &-header {
-        align-items: center;
-        margin: 16px 0 32px 16px;
-        display: flex;
-    }
-
-    &-icon {
-        margin-right: 16px;
-    }
-
-    &-num {
-        background: #3e474f;
-        border-radius: 4px;
-        display: inline-block;
-        font-size: 15px;
-        line-height: 24px;
-        margin: 4px;
-        padding: 8px;
-
-        &-container {
-            min-height: 48px;
-            margin: 8px 0;
-        }
-    }
-
-    &-link {
-        color: #6FB1EA;
-        cursor: pointer;
-        display: inline-block;
-        font-size: 13px;
-        line-height: 20px;
-        margin-bottom: 24px;
-    }
-
-    &-spaced-label {
-        margin-bottom: 16px;
-        margin-top: 28px;
-    }
-
-    &-btns {
-        &> div {
-            margin-bottom: 16px;
-        }
-    }
-}

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

@@ -1,5 +1,6 @@
 // @flow
 
+import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 
 import { translate } from '../../../base/i18n';
@@ -46,6 +47,53 @@ type Props = {
     t: Function,
 };
 
+const useStyles = makeStyles(theme => {
+    return {
+        dialInDialog: {
+            textAlign: 'center',
+
+            '& .prejoin-dialog-dialin-header': {
+                alignItems: 'center',
+                margin: `${theme.spacing(3)}px 0 ${theme.spacing(5)}px ${theme.spacing(3)}px`,
+                display: 'flex'
+            },
+            '& .prejoin-dialog-dialin-icon': {
+                marginRight: theme.spacing(3)
+            },
+            '& .prejoin-dialog-dialin-num': {
+                background: '#3e474f',
+                borderRadius: '4px',
+                display: 'inline-block',
+                fontSize: '15px',
+                lineHeight: '24px',
+                margin: theme.spacing(1),
+                padding: theme.spacing(2),
+
+                '& .prejoin-dialog-dialin-num-container': {
+                    minHeight: '48px',
+                    margin: `${theme.spacing(2)}px 0`
+                }
+            },
+
+            '& .prejoin-dialog-dialin-link': {
+                color: '#6FB1EA',
+                cursor: 'pointer',
+                display: 'inline-block',
+                fontSize: '13px',
+                lineHeight: '20px',
+                marginBottom: theme.spacing(4)
+            },
+            '& .prejoin-dialog-dialin-spaced-label': {
+                marginBottom: theme.spacing(3),
+                marginTop: '28px'
+            },
+            '& .prejoin-dialog-dialin-btns > div': {
+                marginBottom: theme.spacing(3)
+            }
+        }
+    };
+});
+
 /**
  * This component displays the dialog with all the information
  * to join a meeting by calling it.
@@ -63,12 +111,13 @@ function DialinDialog(props: Props) {
         passCode,
         t
     } = props;
+    const classes = useStyles();
     const flagClassName = `prejoin-dialog-flag iti-flag ${getCountryCodeFromPhone(
         number
     )}`;
 
     return (
-        <div className = 'prejoin-dialog-dialin'>
+        <div className = { classes.dialInDialog }>
             <div className = 'prejoin-dialog-dialin-header'>
                 <Icon
                     className = 'prejoin-dialog-icon prejoin-dialog-dialin-icon'