refactor(dialog): use jss instead of sass for mute-dialog style (#11154)

css/main.scss

@@ -88,7 +88,6 @@ $flagsImagePath: "../images/";
 @import 'country-picker';
 @import 'modals/invite/invite_more';
 @import 'modals/security/security';
-@import 'modals/mute/mute-dialog';
 @import 'e2ee';
 @import 'responsive';
 @import 'drawer';

css/modals/mute/_mute-dialog.scss

@@ -1,19 +0,0 @@
-.mute-dialog {
-	.separator-line {
-        margin: 24px 0 24px -20px;
-        padding: 0 20px;
-        width: 100%;
-        height: 1px;
-        background: #5E6D7A;
-    }
-
-	.control-row {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 15px;
-
-        label {
-            font-size: 14px;
-        }
-    }
-}

react/features/base/ui/constants.js

@@ -7,6 +7,7 @@
  */
 export const commonClassName = {
     emptyList: 'empty-list',
+    muteDialog: 'mute-dialog',
     overflowMenuItem: 'overflow-menu-item',
     overflowMenuItemIcon: 'overflow-menu-item-icon',
     participantAvatar: 'participant-avatar',
@@ -30,6 +31,25 @@ export const commonStyles = (theme: Object) => {
             margin: 0,
             padding: 0
         },
+        [commonClassName.muteDialog]: {
+            '& .separator-line': {
+                margin: `${theme.spacing(4)}px 0 ${theme.spacing(4)}px -20px`,
+                padding: '0 20px',
+                width: '100%',
+                height: '1px',
+                background: '#5E6D7A'
+            },
+
+            '& .control-row': {
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginTop: `${theme.spacing(3)}px`,
+
+                '& label': {
+                    fontSize: '14px'
+                }
+            }
+        },
         [commonClassName.overflowMenuItem]: {
             alignItems: 'center',
             color: theme.palette.text01,
@@ -98,7 +118,7 @@ export const commonStyles = (theme: Object) => {
             }
         },
         [commonClassName.participantAvatar]: {
-            margin: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(2)} 0`
+            margin: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(2)}px 0`
         },
         [commonClassName.toolboxIcon]: {
             display: 'flex',