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

jitsi · Mar 29, 2022 · bbbd649 · bbbd649
1 parent 4db7312
commit bbbd649
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/css/main.scss b/css/main.scss
@@ -89,7 +89,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';

diff --git a/css/modals/mute/_mute-dialog.scss b/css/modals/mute/_mute-dialog.scss
diff --git a/react/features/base/ui/constants.js b/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',