Add the tip message that explains how to mute/unmute using a phone

bigbluebutton-html5/imports/ui/components/audio/audio-dial/component.jsx

@@ -12,6 +12,14 @@ const intlMessages = defineMessages({
     id: 'app.audioDial.audioDialConfrenceText',
     description: 'audio settings back button label',
   },
+  tipIndicator: {
+    id: 'app.audioDial.tipIndicator',
+    description: 'Indicator for the tip message',
+  },
+  tipMessage: {
+    id: 'app.audioDial.tipMessage',
+    description: 'Tip message explaining how to mute/unmute yourself',
+  },
 });
 
 const propTypes = {
@@ -38,6 +46,14 @@ class AudioDial extends React.PureComponent {
           {intl.formatMessage(intlMessages.audioDialConfrenceText)}
         </div>
         <div className={styles.telvoice}>{telVoice}</div>
+        <div className={styles.tipBox}>
+          <span className={styles.tipIndicator}>
+            {intl.formatMessage(intlMessages.tipIndicator)}
+:
+          </span>
+          {' '}
+          {intl.formatMessage(intlMessages.tipMessage)}
+        </div>
       </span>
     );
   }

bigbluebutton-html5/imports/ui/components/audio/audio-dial/styles.scss

@@ -25,3 +25,13 @@
 .telvoice {
   margin-bottom: 0;
 }
+
+.tipBox {
+  background-color: var(--color-gray-lightest);
+  padding: 1.2rem;
+  margin-top: 2rem;
+}
+
+.tipIndicator {
+  font-weight: bold;
+}

bigbluebutton-html5/private/locales/en.json

@@ -403,6 +403,8 @@
     "app.audioModal.audioDialTitle": "Join using your phone",
     "app.audioDial.audioDialDescription": "Dial",
     "app.audioDial.audioDialConfrenceText": "and enter the conference PIN number:",
+    "app.audioDial.tipIndicator": "Tip",
+    "app.audioDial.tipMessage": "Press the '0' key on your phone to mute/unmute yourself.",
     "app.audioModal.connecting": "Connecting",
     "app.audioModal.connectingEchoTest": "Connecting to echo test",
     "app.audioManager.joinedAudio": "You have joined the audio conference",