Add a simple way to show more than one description in modal confirmation

bigbluebutton-html5/imports/ui/components/common/modal/confirmation/component.jsx

@@ -71,7 +71,9 @@ class ConfirmationModal extends Component {
             </Styled.Title>
           </Styled.Header>
           <Styled.Description>
-            <span dangerouslySetInnerHTML={{ __html: description }} />
+            <Styled.DescriptionText>
+              {description}
+            </Styled.DescriptionText>
             { hasCheckbox ? (
               <label htmlFor="confirmationCheckbox" key="confirmation-checkbox">
                 <Styled.Checkbox

bigbluebutton-html5/imports/ui/components/common/modal/confirmation/styles.js

@@ -55,6 +55,10 @@ const Description = styled.div`
   margin-bottom: ${jumboPaddingY};
 `;
 
+const DescriptionText = styled.span`
+  white-space: pre-line;
+`;
+
 const Checkbox = styled.input`
   position: relative;
   top: 0.134rem;
@@ -85,6 +89,7 @@ export default {
   Header,
   Title,
   Description,
+  DescriptionText,
   Checkbox,
   Footer,
   ConfirmationButton,

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/component.jsx

@@ -46,7 +46,8 @@ class EndMeetingComponent extends PureComponent {
       : intl.formatMessage(intlMessages.endMeetingNoUserDescription);
 
     if (warnAboutUnsavedContentOnMeetingEnd) {
-      description += `<p>${intl.formatMessage(intlMessages.contentWarning)}</p>`;
+      // the double breakline it to put one empty line between the descriptions
+      description += `\n\n${intl.formatMessage(intlMessages.contentWarning)}`;
     }
 
     return (