refactor(prejoin) use jss instead of sass in DialOutDialog (#11361)
* refactor(premeeting): use jss instead of sass in DialOutDialog * refactor(prejoin): move remaining prejoin-dialog styles to commonStyless
This commit is contained in:
Shahab
GitHub
parent
4a04b8b5ee
commit
d3b650c741
|
|
@ -1,5 +1,4 @@
|
|||
@import 'lobby';
|
||||
@import 'premeeting-screens';
|
||||
@import 'prejoin';
|
||||
@import 'prejoin-dialog';
|
||||
@import 'prejoin-third-party';
|
||||
|
|
|
|||
|
|
@ -1,118 +0,0 @@
|
|||
.prejoin-dialog {
|
||||
background: #1C2025;
|
||||
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
height: 400px;
|
||||
width: 375px;
|
||||
|
||||
&--small {
|
||||
height: 300;
|
||||
width: 400;
|
||||
}
|
||||
|
||||
&-label {
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
|
||||
&-num {
|
||||
background: #2b3b4b;
|
||||
border: 1px solid #A4B8D1;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
align-items: center;
|
||||
background: rgba(0,0,0,0.6);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&-flag {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
cursor: pointer;
|
||||
|
||||
> svg {
|
||||
fill: #A4B8D1;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
width: 309px;
|
||||
}
|
||||
|
||||
&-dialin-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-delimiter {
|
||||
background: #5f6266;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
&-container {
|
||||
margin: 16px 0 24px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-txt-container {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: -8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-txt {
|
||||
background: #1C2025;
|
||||
color: #5f6266;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.prejoin-dialog-btn.primary,
|
||||
.action-btn.prejoin-dialog-btn.text {
|
||||
width: 310px;
|
||||
}
|
||||
}
|
||||
|
||||
.prejoin-dialog-callout {
|
||||
padding: 16px;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&-picker {
|
||||
margin: 8px 0 16px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,6 +11,8 @@ export const commonClassName = {
|
|||
overflowMenuItem: 'overflow-menu-item',
|
||||
overflowMenuItemIcon: 'overflow-menu-item-icon',
|
||||
participantAvatar: 'participant-avatar',
|
||||
prejoinDialog: 'prejoin-dialog',
|
||||
prejoinDialogButton: 'prejoin-dialog-btn',
|
||||
toolboxIcon: 'toolbox-icon',
|
||||
toolboxButton: 'toolbox-button',
|
||||
toolboxContentItems: 'toolbox-content-items'
|
||||
|
|
@ -120,6 +122,112 @@ export const commonStyles = (theme: Object) => {
|
|||
[commonClassName.participantAvatar]: {
|
||||
margin: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(2)}px 0`
|
||||
},
|
||||
[commonClassName.prejoinDialog]: {
|
||||
background: '#1C2025',
|
||||
boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.5)',
|
||||
borderRadius: '5px',
|
||||
color: '#fff',
|
||||
height: '400px',
|
||||
width: '375px',
|
||||
|
||||
[`${commonClassName.prejoinDialog}--small`]: {
|
||||
height: 300,
|
||||
width: 400
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-label`]: {
|
||||
fontSize: '15px',
|
||||
lineHeight: '24px'
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-label-num`]: {
|
||||
background: '#2b3b4b',
|
||||
border: '1px solid #A4B8D1',
|
||||
borderRadius: '50%',
|
||||
color: '#fff',
|
||||
display: 'inline-block',
|
||||
height: '24px',
|
||||
marginRight: `${theme.spacing(2)}px`,
|
||||
width: '24px'
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-container`]: {
|
||||
alignItems: 'center',
|
||||
background: 'rgba(0,0,0,0.6)',
|
||||
display: 'flex',
|
||||
height: '100vh',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100vw',
|
||||
zIndex: 3
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-flag`]: {
|
||||
display: 'inline-block',
|
||||
marginRight: `${theme.spacing(2)}px}`,
|
||||
transform: 'scale(1.2)'
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-title`]: {
|
||||
display: 'inline-block',
|
||||
fontSize: '24px',
|
||||
lineHeight: '32px'
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-icon`]: {
|
||||
cursor: 'pointer',
|
||||
|
||||
'& > svg': {
|
||||
fill: '#A4B8D1'
|
||||
}
|
||||
},
|
||||
|
||||
[commonClassName.prejoinDialogButton]: {
|
||||
width: '309px'
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-dialin-container`]: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-delimiter`]: {
|
||||
background: '#5f6266',
|
||||
border: '0',
|
||||
height: '1px',
|
||||
margin: '0',
|
||||
padding: '0',
|
||||
width: '100%'
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-delimiter-container`]: {
|
||||
margin: `${theme.spacing(3)}px 0 ${theme.spacing(4)}px 0`,
|
||||
position: 'relative'
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-delimiter-txt-container`]: {
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '-8px',
|
||||
width: '100%'
|
||||
},
|
||||
|
||||
[`${commonClassName.prejoinDialog}-delimiter-txt`]: {
|
||||
background: '#1C2025',
|
||||
color: '#5f6266',
|
||||
fontSize: '11px',
|
||||
textTransform: 'uppercase',
|
||||
padding: `0 ${theme.spacing(2)}px`
|
||||
}
|
||||
},
|
||||
|
||||
[commonClassName.prejoinDialogButton]: {
|
||||
[`&.primary, &${commonClassName.prejoinDialogButton}.text`]: {
|
||||
width: '310px'
|
||||
}
|
||||
},
|
||||
|
||||
[commonClassName.toolboxIcon]: {
|
||||
display: 'flex',
|
||||
borderRadius: 3,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// @flow
|
||||
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React from 'react';
|
||||
|
||||
import { translate } from '../../../base/i18n';
|
||||
|
|
@ -31,6 +32,22 @@ type Props = {
|
|||
t: Function,
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(theme => {
|
||||
return {
|
||||
dialOutDialog: {
|
||||
padding: `${theme.spacing(3)}px`
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: `${theme.spacing(4)}px`
|
||||
},
|
||||
picker: {
|
||||
margin: `${theme.spacing(2)}px 0 ${theme.spacing(3)}px 0`
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* This component displays the dialog from which the user can enter the
|
||||
* phone number in order to be called by the meeting.
|
||||
|
|
@ -40,10 +57,11 @@ type Props = {
|
|||
*/
|
||||
function DialOutDialog(props: Props) {
|
||||
const { onClose, onTextButtonClick, onSubmit, t } = props;
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<div className = 'prejoin-dialog-callout'>
|
||||
<div className = 'prejoin-dialog-callout-header'>
|
||||
<div className = { classes.dialOutDialog }>
|
||||
<div className = { classes.header }>
|
||||
<div className = 'prejoin-dialog-title'>
|
||||
{t('prejoin.startWithPhone')}
|
||||
</div>
|
||||
|
|
@ -55,7 +73,7 @@ function DialOutDialog(props: Props) {
|
|||
src = { IconClose } />
|
||||
</div>
|
||||
<Label>{t('prejoin.callMeAtNumber')}</Label>
|
||||
<div className = 'prejoin-dialog-callout-picker'>
|
||||
<div className = { classes.picker }>
|
||||
<CountryPicker onSubmit = { onSubmit } />
|
||||
</div>
|
||||
<ActionButton
|
||||
|
|
|
|||
Loading…
Reference in New Issue