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

This commit is contained in:
Shahab 2022-03-15 15:00:38 +03:30 committed by GitHub
parent 4ed2d55cae
commit f6a79860f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 50 deletions

View File

@ -116,52 +116,3 @@
margin: 8px 0 16px 0; 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;
}
}
}

View File

@ -1,5 +1,6 @@
// @flow // @flow
import { makeStyles } from '@material-ui/styles';
import React from 'react'; import React from 'react';
import { translate } from '../../../base/i18n'; import { translate } from '../../../base/i18n';
@ -46,6 +47,53 @@ type Props = {
t: Function, 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 * This component displays the dialog with all the information
* to join a meeting by calling it. * to join a meeting by calling it.
@ -63,12 +111,13 @@ function DialinDialog(props: Props) {
passCode, passCode,
t t
} = props; } = props;
const classes = useStyles();
const flagClassName = `prejoin-dialog-flag iti-flag ${getCountryCodeFromPhone( const flagClassName = `prejoin-dialog-flag iti-flag ${getCountryCodeFromPhone(
number number
)}`; )}`;
return ( return (
<div className = 'prejoin-dialog-dialin'> <div className = { classes.dialInDialog }>
<div className = 'prejoin-dialog-dialin-header'> <div className = 'prejoin-dialog-dialin-header'>
<Icon <Icon
className = 'prejoin-dialog-icon prejoin-dialog-dialin-icon' className = 'prejoin-dialog-icon prejoin-dialog-dialin-icon'