add latest design updates to poll in public chat

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/component.jsx

@@ -41,6 +41,10 @@ const intlMessages = defineMessages({
     id: 'app.chat.pollResult',
     description: 'used in place of user name who published poll to chat',
   },
+  legendTitle: {
+    id: 'app.polling.pollingTitle',
+    description: 'heading for chat poll legend',
+  },
 });
 
 class MessageListItem extends Component {
@@ -169,6 +173,7 @@ class MessageListItem extends Component {
       time,
       intl,
       polls,
+      isDefaultPoll,
     } = this.props;
 
     if (polls.length < 1) return null;
@@ -177,12 +182,42 @@ class MessageListItem extends Component {
 
     let pollText = [];
     const pollElement = [];
+    const legendElements = [
+      (<div
+        className={styles.optionsTitle}
+        key={_.uniqueId('chat-poll-options-')}
+      >
+        {intl.formatMessage(intlMessages.legendTitle)}
+      </div>),
+    ];
 
+    let isDefault = true;
     polls.forEach((poll) => {
+      isDefault = isDefaultPoll(poll.text);
       pollText = poll.text.split('<br/>');
-      pollElement.push(pollText.map(o => <div key={_.uniqueId('chat-poll-result-')} className={styles.pollLine}>{o}</div>));
+      pollElement.push(pollText.map((p, index) => {
+        if (!isDefault) {
+          legendElements.push(
+            <div key={_.uniqueId('chat-poll-legend-')} className={styles.pollLegend}>
+              <span>{`${index + 1}: `}</span>
+              <span className={styles.pollOption}>{p.split(':')[0]}</span>
+            </div>,
+          );
+        }
+
+        return (
+          <div key={_.uniqueId('chat-poll-result-')} className={styles.pollLine}>
+            {!isDefault ? p.replace(p.split(':')[0], index + 1) : p}
+          </div>
+        );
+      }));
     });
 
+    if (!isDefault) {
+      pollElement.push(<div key={_.uniqueId('chat-poll-separator-')} className={styles.divider} />);
+      pollElement.push(legendElements);
+    }
+
     return polls ? (
       <div className={styles.item} key={_.uniqueId('message-poll-item-')}>
         <div className={styles.wrapper} ref={(ref) => { this.item = ref; }}>

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/container.jsx

@@ -34,5 +34,15 @@ export default withTracker(({ message }) => {
     time: mappedMessage.time,
     chats,
     polls,
+    isDefaultPoll: (pollText) => {
+      const pollValue = pollText.replace(/<br\/>|[ :|%\n\d+]/g, '');
+      switch (pollValue) {
+        case 'A': case 'AB': case 'ABC': case 'ABCD':
+        case 'ABCDE': case 'YesNo': case 'TrueFalse':
+          return true;
+        default:
+          return false;
+      }
+    },
   };
 })(MessageListItemContainer);

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss

@@ -4,6 +4,7 @@
   --systemMessage-background-color: #F9FBFC;
   --systemMessage-border-color: #C5CDD4;
   --systemMessage-font-color: var(--color-dark-grey);
+  --chat-poll-margin-sm: .25rem;
 }
 
 .item {
@@ -154,27 +155,45 @@
   }
 }
 
-.divider {
-  position: relative;
-  height: 1px;
-  width: 80%;
-  margin-right: auto;
-  border-bottom: solid 1px var(--color-gray-light);
-}
-
 .isPoll {
   bottom: var(--border-size-large);
 }
 
 .pollLine {
   overflow-wrap: break-word;
+  font-size: var(--font-size-large);
+  font-weight: 600;
 }
 
 .pollWrapper {
   border: solid 1px var(--color-gray-lighter);
-  border-radius: 3px;
-  padding: .25rem;
+  border-radius: var(--border-radius);
+  padding: var(--chat-poll-margin-sm);
   padding-left: 1rem;
-  margin-top: .25rem;
   background: var(--systemMessage-background-color);
 }
+
+.pollLegend {
+  display: flex;
+  flex-direction: row;
+  margin-top: var(--chat-poll-margin-sm);
+}
+
+.pollOption {
+  word-break: break-word;
+  margin-left: var(--md-padding-y);
+}
+
+.optionsTitle {
+  font-weight: bold;
+  margin-top: var(--md-padding-y);
+}
+
+.divider {
+  position: relative;
+  height: 1px;
+  width: 95%;
+  margin-right: auto;
+  margin-top: var(--md-padding-y);
+  border-bottom: solid 1px var(--color-gray-lightest);
+}