From e37208b8ce3a27f65dd95a90f2ce23b5a090c74a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ram=C3=B3n=20Souza?= <contato@ramonsouza.com>
Date: Thu, 4 Nov 2021 14:19:38 +0000
Subject: [PATCH] convert poll component

---
 .../imports/ui/components/poll/component.jsx  | 155 +++---
 .../imports/ui/components/poll/styles.js      | 403 ++++++++++++++++
 .../imports/ui/components/poll/styles.scss    | 441 ------------------
 .../stylesheets/styled-components/general.js  |   4 +
 .../stylesheets/styled-components/palette.js  |   4 +-
 5 files changed, 477 insertions(+), 530 deletions(-)
 create mode 100644 bigbluebutton-html5/imports/ui/components/poll/styles.js
 delete mode 100644 bigbluebutton-html5/imports/ui/components/poll/styles.scss

diff --git a/bigbluebutton-html5/imports/ui/components/poll/component.jsx b/bigbluebutton-html5/imports/ui/components/poll/component.jsx
index aadbfd4a80..03cb5ad251 100644
--- a/bigbluebutton-html5/imports/ui/components/poll/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/poll/component.jsx
@@ -4,12 +4,9 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import _ from 'lodash';
 import { Session } from 'meteor/session';
-import cx from 'classnames';
-import Button from '/imports/ui/components/button/component';
-import Checkbox from '/imports/ui/components/checkbox/component';
 import Toggle from '/imports/ui/components/switch/component';
 import LiveResult from './live-result/component';
-import { styles } from './styles.scss';
+import Styled from './styles';
 import { PANELS, ACTIONS } from '../layout/enums';
 import DragAndDrop from './dragAndDrop/component';
 import { alertScreenReader } from '/imports/utils/dom-utils';
@@ -353,10 +350,10 @@ class Poll extends Component {
     const { intl } = this.props;
 
     return (
-      <span className={styles.toggleLabel}>
+      <Styled.ToggleLabel>
         {status ? intl.formatMessage(intlMessages.on)
           : intl.formatMessage(intlMessages.off)}
-      </span>
+      </Styled.ToggleLabel>
     );
   }
 
@@ -388,20 +385,18 @@ class Poll extends Component {
               justifyContent: 'spaceBetween',
             }}
           >
-            <input
+            <Styled.PollOptionInput
               type="text"
               value={o.val}
               placeholder={intl.formatMessage(intlMessages.customPlaceholder)}
               data-test="pollOptionItem"
-              className={styles.pollOption}
               onChange={(e) => this.handleInputChange(e, i)}
               maxLength={MAX_INPUT_CHARS}
             />
             {i > 1
               ? (
                 <>
-                  <Button
-                    className={styles.deleteBtn}
+                  <Styled.DeletePollOptionButton
                     label={intl.formatMessage(intlMessages.delete)}
                     aria-describedby={`option-${i}`}
                     icon="delete"
@@ -422,9 +417,9 @@ class Poll extends Component {
               : <div style={{ width: '40px', flex: 'none' }} />}
           </div>
           {!hasVal && type !== pollTypes.Response && error ? (
-            <div className={styles.inputError}>{error}</div>
+            <Styled.InputError>{error}</Styled.InputError>
           ) : (
-            <div className={styles.errorSpacer}>&nbsp;</div>
+            <Styled.ErrorSpacer>&nbsp;</Styled.ErrorSpacer>
           )}
         </span>
       );
@@ -444,9 +439,9 @@ class Poll extends Component {
 
     return (
       <div>
-        <div className={styles.instructions}>
+        <Styled.Instructions>
           {intl.formatMessage(intlMessages.activePollInstruction)}
-        </div>
+        </Styled.Instructions>
         <LiveResult
           {...{
             isMeteorConnected,
@@ -483,13 +478,9 @@ class Poll extends Component {
     return (
       <div>
         <div>
-          <textarea
+          <Styled.PollQuestionArea
+            hasError={hasQuestionError}
             data-test="pollQuestionArea"
-            className={
-              cx(styles.pollQuestion, {
-                [styles.hasError]: hasQuestionError,
-              })
-            }
             value={question}
             onChange={(e) => this.handleTextareaChange(e)}
             rows="4"
@@ -499,15 +490,19 @@ class Poll extends Component {
             placeholder={intl.formatMessage(questionPlaceholder)}
           />
           {hasQuestionError ? (
-            <div className={styles.inputError}>{error}</div>
+            <Styled.InputError>{error}</Styled.InputError>
           ) : (
-            <div className={styles.errorSpacer}>&nbsp;</div>
+            <Styled.ErrorSpacer>&nbsp;</Styled.ErrorSpacer>
           )}
         </div>
         <div data-test="responseTypes">
-          <h4 className={styles.sectionHeading}>{intl.formatMessage(intlMessages.responseTypesLabel)}</h4>
-          <div className={styles.responseType}>
-            <Button
+          <Styled.SectionHeading>
+            {intl.formatMessage(intlMessages.responseTypesLabel)}
+          </Styled.SectionHeading>
+          <Styled.ResponseType>
+            <Styled.PollConfigButton
+              selected={type === pollTypes.TrueFalse}
+              small={!smallSidebar}
               label={intl.formatMessage(intlMessages.tf)}
               aria-describedby="poll-config-button"
               color="default"
@@ -520,14 +515,10 @@ class Poll extends Component {
                   ],
                 });
               }}
-              className={
-                cx(styles.pBtn, {
-                  [styles.selectedTypeBtn]: type === pollTypes.TrueFalse,
-                  [styles.smallBtn]: !smallSidebar,
-                })
-              }
             />
-            <Button
+            <Styled.PollConfigButton
+              selected={type === pollTypes.Letter}
+              small={!smallSidebar}
               label={intl.formatMessage(intlMessages.a4)}
               aria-describedby="poll-config-button"
               color="default"
@@ -542,14 +533,11 @@ class Poll extends Component {
                   ],
                 });
               }}
-              className={
-                cx(styles.pBtn, {
-                  [styles.selectedTypeBtn]: type === pollTypes.Letter,
-                  [styles.smallBtn]: !smallSidebar,
-                })
-              }
             />
-            <Button
+            <Styled.PollConfigButton
+              selected={type === pollTypes.YesNoAbstention}
+              small={false}
+              full={true}
               label={intl.formatMessage(intlMessages.yna)}
               aria-describedby="poll-config-button"
               color="default"
@@ -563,35 +551,30 @@ class Poll extends Component {
                   ],
                 });
               }}
-              className={
-              cx(styles.pBtn, styles.yna, {
-                [styles.selectedTypeBtn]: type === pollTypes.YesNoAbstention,
-              })
-            }
             />
-            <Button
+            <Styled.PollConfigButton
+              selected={type === pollTypes.Response}
+              small={false}
+              full={true}
               label={intl.formatMessage(intlMessages.userResponse)}
               aria-describedby="poll-config-button"
               color="default"
               onClick={() => { this.setState({ type: pollTypes.Response }); }}
-              className={
-              cx(styles.pBtn, styles.fullWidth, {
-                [styles.selectedTypeBtn]: type === pollTypes.Response,
-              })
-            }
             />
-          </div>
+          </Styled.ResponseType>
         </div>
         {type
           && (
             <div data-test="responseChoices">
-              <h4 className={styles.sectionHeading}>{intl.formatMessage(intlMessages.responseChoices)}</h4>
+              <Styled.SectionHeading>
+                {intl.formatMessage(intlMessages.responseChoices)}
+              </Styled.SectionHeading>
               {
                 type === pollTypes.Response
                 && (
-                  <div className={styles.pollParagraph}>
+                  <Styled.PollParagraph>
                     <span>{intl.formatMessage(intlMessages.typedResponseDesc)}</span>
-                  </div>
+                  </Styled.PollParagraph>
                 )
               }
                 {
@@ -606,22 +589,20 @@ class Poll extends Component {
                       {defaultPoll
                         && (
                         <div>
-                          <Checkbox
+                          <Styled.PollCheckbox
                             onChange={this.toggleIsMultipleResponse}
                             checked={isMultipleResponse}
-                            className={styles.checkbox}
                             ariaLabelledBy="multipleResponseCheckboxLabel"
                           />
-                          <label id="multipleResponseCheckboxLabel" className={styles.instructions}>
+                          <Styled.InstructionsLabel id="multipleResponseCheckboxLabel">
                             {intl.formatMessage(intlMessages.enableMultipleResponseLabel)}
-                          </label>
+                          </Styled.InstructionsLabel>
                         </div>
                         )}
                       {defaultPoll && this.renderInputs()}
                       {defaultPoll
                         && (
-                        <Button
-                          className={styles.addItemBtn}
+                        <Styled.AddItemButton
                           data-test="addPollItem"
                           label={intl.formatMessage(intlMessages.addOptionLabel)}
                           aria-describedby="add-item-button"
@@ -631,15 +612,15 @@ class Poll extends Component {
                           onClick={() => this.handleAddOption()}
                         />
                       )}
-                    <div className={styles.row}>
-                      <div className={styles.col} aria-hidden="true">
-                        <h4 className={styles.sectionHeading}>
+                    <Styled.Row>
+                      <Styled.Col aria-hidden="true">
+                        <Styled.SectionHeading>
                           {intl.formatMessage(intlMessages.secretPollLabel)}
-                        </h4>
-                      </div>
-                      <div className={styles.col}>
+                        </Styled.SectionHeading>
+                      </Styled.Col>
+                      <Styled.Col>
                         {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                        <label className={styles.toggle}>
+                        <Styled.Toggle>
                           {this.displayToggleStatus(secretPoll)}
                           <Toggle
                             icons={false}
@@ -648,17 +629,16 @@ class Poll extends Component {
                             ariaLabel={intl.formatMessage(intlMessages.secretPollLabel)}
                             showToggleLabel={false}
                           />
-                        </label>
-                      </div>
-                    </div>
+                        </Styled.Toggle>
+                      </Styled.Col>
+                    </Styled.Row>
                     {secretPoll
                       && (
-                        <div className={styles.pollParagraph}>
+                        <Styled.PollParagraph>
                           { intl.formatMessage(intlMessages.isSecretPollLabel) }
-                        </div>
+                        </Styled.PollParagraph>
                       )}
-                    <Button
-                      className={styles.startPollBtn}
+                    <Styled.StartPollBtn
                       data-test="startPoll"
                       label={intl.formatMessage(intlMessages.startPollLabel)}
                       color="primary"
@@ -722,15 +702,16 @@ class Poll extends Component {
   renderNoSlidePanel() {
     const { intl } = this.props;
     return (
-      <div className={styles.noSlidePanelContainer}>
-        <h4 className={styles.sectionHeading}>{intl.formatMessage(intlMessages.noPresentationSelected)}</h4>
-        <Button
+      <Styled.NoSlidePanelContainer>
+        <Styled.SectionHeading>
+          {intl.formatMessage(intlMessages.noPresentationSelected)}
+        </Styled.SectionHeading>
+        <Styled.PollButton
           label={intl.formatMessage(intlMessages.clickHereToSelect)}
           color="primary"
           onClick={() => Session.set('showUploadPresentationView', true)}
-          className={styles.pollBtn}
         />
-      </div>
+      </Styled.NoSlidePanelContainer>
     );
   }
 
@@ -754,14 +735,14 @@ class Poll extends Component {
     const { intl } = this.props;
     return (
       <div>
-        <div className={styles.instructions}>
+        <Styled.Instructions>
           {intl.formatMessage(intlMessages.dragDropPollInstruction)}
-        </div>
+        </Styled.Instructions>
         <DragAndDrop
           {...{ intl, MAX_INPUT_CHARS }}
           handlePollValuesText={(e) => this.handlePollValuesText(e)}
         >
-          <div className={styles.dragAndDropPollContainer} />
+          <Styled.DragAndDropPollContainer />
         </DragAndDrop>
       </div>
     );
@@ -777,15 +758,14 @@ class Poll extends Component {
 
     return (
       <div>
-        <header className={styles.header}>
-          <Button
+        <Styled.Header>
+          <Styled.PollHideButton
             ref={(node) => { this.hideBtn = node; }}
             data-test="hidePollDesc"
             tabIndex={0}
             label={intl.formatMessage(intlMessages.pollPaneTitle)}
             icon="left_arrow"
             aria-label={intl.formatMessage(intlMessages.hidePollDesc)}
-            className={styles.hideBtn}
             onClick={() => {
               layoutContextDispatch({
                 type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
@@ -797,7 +777,7 @@ class Poll extends Component {
               });
             }}
           />
-          <Button
+          <Styled.PollCloseButton
             label={intl.formatMessage(intlMessages.closeLabel)}
             aria-label={`${intl.formatMessage(intlMessages.closeLabel)} ${intl.formatMessage(intlMessages.pollPaneTitle)}`}
             onClick={() => {
@@ -813,12 +793,11 @@ class Poll extends Component {
               Session.set('forcePollOpen', false);
               Session.set('pollInitiated', false);
             }}
-            className={styles.closeBtn}
             icon="close"
             size="sm"
             hideLabel
           />
-        </header>
+        </Styled.Header>
         {this.renderPollPanel()}
         <span className="sr-only" id="poll-config-button">{intl.formatMessage(intlMessages.showRespDesc)}</span>
         <span className="sr-only" id="add-item-button">{intl.formatMessage(intlMessages.addRespDesc)}</span>
diff --git a/bigbluebutton-html5/imports/ui/components/poll/styles.js b/bigbluebutton-html5/imports/ui/components/poll/styles.js
new file mode 100644
index 0000000000..2096733f88
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/poll/styles.js
@@ -0,0 +1,403 @@
+import styled from 'styled-components';
+import Button from '/imports/ui/components/button/component';
+import Checkbox from '/imports/ui/components/checkbox/component';
+import {
+  smPaddingX,
+  smPaddingY,
+  lgPaddingX,
+  borderRadius,
+  mdPaddingY,
+  borderSize,
+  borderSizeLarge,
+  pollInputHeight,
+  pollSmMargin,
+  pollMdMargin,
+  pollHeaderOffset,
+} from '/imports/ui/stylesheets/styled-components/general';
+import {
+  colorText,
+  colorBlueLight,
+  colorGray,
+  colorGrayLight,
+  colorGrayLighter,
+  colorGrayLightest,
+  colorDanger,
+  colorHeading,
+  colorPrimary,
+  colorGrayDark,
+  colorWhite,
+  pollBlue,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import { fontSizeBase, fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
+
+const ToggleLabel = styled.span`
+  margin-right: ${smPaddingX};
+
+  [dir="rtl"] & {
+    margin: 0 0 0 ${smPaddingX};
+  }
+`;
+
+const PollOptionInput = styled.input`
+  margin-right: 1rem;
+
+  [dir="rtl"] & {
+      margin-right: 0;
+      margin-left: 1rem;
+  }
+
+  &:focus {
+    outline: none;
+    border-radius: ${borderSize};
+    box-shadow: 0 0 0 ${borderSize} ${colorBlueLight}, inset 0 0 0 1px ${colorPrimary};
+  }
+
+  width: 100%;
+  color: ${colorText};
+  -webkit-appearance: none;
+  padding: calc(${smPaddingY} * 2) ${smPaddingX};
+  border-radius: ${borderRadius};
+  font-size: ${fontSizeBase};
+  border: 1px solid ${colorGrayLighter};
+  box-shadow: 0 0 0 1px ${colorGrayLighter};
+`;
+
+const DeletePollOptionButton = styled(Button)`
+  font-size: ${fontSizeBase};
+  flex: none;
+  width: 40px;
+  position: relative;
+  & > i {
+    font-size: 150%;
+  }
+`;
+
+const ErrorSpacer = styled.div`
+  position: relative;
+  height: 1.25rem;
+`;
+
+const InputError = styled(ErrorSpacer)`
+  color: ${colorDanger};
+  font-size: ${fontSizeSmall};
+`;
+
+const Instructions = styled.div`
+  margin-bottom: ${lgPaddingX};
+  color: ${colorText};
+`;
+
+const PollQuestionArea = styled.textarea`
+  resize: none;
+
+  &:focus {
+    outline: none;
+    border-radius: ${borderSize};
+    box-shadow: 0 0 0 ${borderSize} ${colorBlueLight}, inset 0 0 0 1px ${colorPrimary};
+  }
+
+  width: 100%;
+  color: ${colorText};
+  -webkit-appearance: none;
+  padding: calc(${smPaddingY} * 2) ${smPaddingX};
+  border-radius: ${borderRadius};
+  font-size: ${fontSizeBase};
+  border: 1px solid ${colorGrayLighter};
+  box-shadow: 0 0 0 1px ${colorGrayLighter};
+
+  ${({ hasError }) => hasError && `
+    border-color: ${colorDanger};
+    box-shadow: 0 0 0 1px ${colorDanger};
+  `}
+`;
+
+const SectionHeading = styled.h4`
+  margin-top: 0;
+  font-weight: 600;
+  color: ${colorHeading};
+`;
+
+const ResponseType = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: wrap;
+  overflow-wrap: break-word;
+  position: relative;
+  width: 100%;
+  margin-bottom: ${lgPaddingX};
+
+  & > button {
+    position: relative;
+    width: 100%;
+  }
+`;
+
+const PollConfigButton = styled(Button)`
+  border: solid ${colorGrayLight} 1px;
+  min-height: ${pollInputHeight};
+  font-size: ${fontSizeBase};
+  white-space: pre-wrap;
+  width: 100%;
+  margin-bottom: 1rem;
+
+  & > span {
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  ${({ selected }) => selected && `
+    background-color: ${colorGrayLightest};
+    font-size: ${fontSizeBase};
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: ${colorGrayLightest} !important;
+      box-shadow: none !important;
+    }
+  `}
+
+  ${({ small }) => small && `
+    width: 49% !important;
+  `}
+
+  ${({ full }) => full && `
+    width: 100%;
+  `}
+`;
+
+const PollParagraph = styled.div`
+  color: ${colorText};
+`;
+
+const PollCheckbox = styled(Checkbox)`
+  display: inline-block;
+  margin-right: ${pollSmMargin};
+  margin-bottom: ${pollMdMargin};
+`;
+
+const InstructionsLabel = styled.label`
+  margin-bottom: ${lgPaddingX};
+  color: ${colorText};
+`;
+
+const AddItemButton = styled(Button)`
+  top: 1px;
+  position: relative;
+  display: block;
+  width: 100%;
+  text-align: left;
+  color: ${colorPrimary};
+  padding-left: 0;
+  padding-right: 0;
+  font-size: ${fontSizeBase};
+  white-space: pre-wrap;
+
+  &:hover {
+    & > span {
+      opacity: 1;
+    }
+  }
+`;
+
+const Row = styled.div`
+  display: flex;
+  flex-flow: wrap;
+  flex-grow: 1;
+  justify-content: space-between;
+  margin-top: 0.7rem;
+  margin-bottom: 0.7rem;
+`;
+
+const Col = styled.div`
+  display: flex;
+  position: relative;
+  flex-flow: column;
+  flex-grow: 1;
+  
+  &:last-child {
+    padding-right: 0;
+    padding-left: 1rem;
+
+    [dir="rtl"] & {
+      padding-right: 0.1rem;
+      padding-left: 0;
+    }
+  }
+`;
+
+const Toggle = styled.label`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+`;
+
+const StartPollBtn = styled(Button)`
+  position: relative;
+  width: 100%;
+  min-height: ${pollInputHeight};
+  margin-top: 1rem;
+  font-size: ${fontSizeBase};
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+
+  &:hover {
+    & > span {
+      opacity: 1;
+    }
+  }
+`;
+
+const NoSlidePanelContainer = styled.div`
+  color: ${colorGrayDark};
+  text-align: center;
+`;
+
+const PollButton = styled(Button)`
+  margin-top: ${smPaddingY};
+  margin-bottom: ${smPaddingY};
+  background-color: ${colorWhite};
+  box-shadow: 0 0 0 1px ${colorGray};
+  color: ${colorGray};
+
+  & > span {
+    color: ${colorGray};
+  }
+
+  & > span:hover {
+    color: ${pollBlue};
+    opacity: 1;
+  }
+
+  &:active {
+    background-color: ${colorWhite};
+    box-shadow: 0 0 0 1px ${pollBlue};
+
+    & > span {
+      color: ${pollBlue};
+    }
+  }
+
+  &:focus {
+    background-color: ${colorWhite};
+    box-shadow: 0 0 0 1px ${pollBlue};
+
+    & > span {
+      color: ${pollBlue};
+    }
+  }
+
+  &:nth-child(even) {
+    margin-right: inherit;
+    margin-left: ${smPaddingY};
+
+    [dir="rtl"] & {
+      margin-right: ${smPaddingY};
+      margin-left: inherit;
+    }
+  }
+
+  &:nth-child(odd) {
+    margin-right: 1rem;
+    margin-left: inherit;
+
+    [dir="rtl"] & {
+      margin-right: inherit;
+      margin-left: ${smPaddingY};
+    }
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 1px ${pollBlue};
+    background-color: ${colorWhite};
+    color: ${pollBlue};
+
+    & > span {
+      color: ${pollBlue};
+      opacity: 1;
+    }
+  }
+`;
+
+const DragAndDropPollContainer = styled.div`
+  width: 200px !important;
+  height: 200px !important;
+`;
+
+const Header = styled.header`
+  position: relative;
+  top: ${pollHeaderOffset};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${mdPaddingY};
+`;
+
+const PollHideButton = styled(Button)`
+  position: relative;
+  background-color: ${colorWhite};
+  display: block;
+  margin: ${borderSizeLarge};
+  margin-bottom: ${borderSize};
+  padding-left: 0;
+  padding-right: inherit;
+
+  [dir="rtl"] & {
+    padding-left: inherit;
+    padding-right: 0;
+  }
+
+  > i {
+    color: ${colorGrayDark};
+    font-size: smaller;
+
+    [dir="rtl"] & {
+      -webkit-transform: scale(-1, 1);
+      -moz-transform: scale(-1, 1);
+      -ms-transform: scale(-1, 1);
+      -o-transform: scale(-1, 1);
+      transform: scale(-1, 1);
+    }
+  }
+
+  &:hover {
+    background-color: ${colorWhite};
+  }
+`;
+
+const PollCloseButton = styled(Button)`
+  font-size: ${fontSizeBase};
+  position: relative;
+  & > i {
+    color: ${colorText};
+  }
+`;
+
+export default {
+  ToggleLabel,
+  PollOptionInput,
+  DeletePollOptionButton,
+  ErrorSpacer,
+  InputError,
+  Instructions,
+  PollQuestionArea,
+  SectionHeading,
+  ResponseType,
+  PollConfigButton,
+  PollParagraph,
+  PollCheckbox,
+  InstructionsLabel,
+  AddItemButton,
+  Row,
+  Col,
+  Toggle,
+  StartPollBtn,
+  NoSlidePanelContainer,
+  PollButton,
+  DragAndDropPollContainer,
+  Header,
+  PollHideButton,
+  PollCloseButton,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/poll/styles.scss b/bigbluebutton-html5/imports/ui/components/poll/styles.scss
deleted file mode 100644
index 1a7547986e..0000000000
--- a/bigbluebutton-html5/imports/ui/components/poll/styles.scss
+++ /dev/null
@@ -1,441 +0,0 @@
-@import "/imports/ui/stylesheets/mixins/focus";
-@import "/imports/ui/stylesheets/mixins/_indicators";
-@import "/imports/ui/stylesheets/variables/placeholders";
-
-:root {
-    --poll-column-amount: 2;
-    --poll-blue: #1A73D4;
-    --poll-header-offset: -0.875rem;
-    --poll-addItem-width: 100%;
-    --poll-input-height: 2.5rem;
-}
-
-.closeBtn {
-    font-size: var(--font-size-base);
-    position: relative;
-	> i {
-        color: var(--color-text);
-	}
-}
-
-.btn {
-    margin-top: var(--sm-padding-y);
-    margin-bottom: var(--sm-padding-y);
-}
-
-.hideBtn {
-    position: relative;
-    background-color: var(--color-white);
-    display: block;
-    margin: var(--border-size-large);
-    margin-bottom: var(--border-size);
-    padding-left: 0;
-    padding-right: inherit;
-
-    [dir="rtl"] & {
-      padding-left: inherit;
-      padding-right: 0;
-    }
-
-    > i {
-        color: var(--color-gray-dark);
-        font-size: smaller;
-
-        [dir="rtl"] & {
-            -webkit-transform: scale(-1, 1);
-            -moz-transform: scale(-1, 1);
-            -ms-transform: scale(-1, 1);
-            -o-transform: scale(-1, 1);
-            transform: scale(-1, 1);
-        }
-    }
-
-    &:hover {
-        background-color: var(--color-white);
-    }
-  }
-
-.customInputWrapper {
-  width: 100%;
-  margin-top: var(--md-padding-y);
-
-  > Button {
-    width: 100%;
-    margin-top: var(--sm-padding-y);
-    margin-bottom: var(--sm-padding-y);
-  }
-}
-
-.pollInput {
-  > input {
-    width: 100%;
-    margin-top: var(--sm-padding-y);
-    margin-bottom: var(--sm-padding-y);
-  }
-
-  > input::placeholder {
-    color: var(--color-text);
-    opacity: 1; /* Firefox */
-  }
-}
-
-.header {
-    position: relative;
-    top: var(--poll-header-offset);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: var(--md-padding-y);
-}
-
-.instructions {
-    margin-bottom: var(--lg-padding-x);
-    color: var(--color-text);
-}
-
-.pollBtn:nth-child(even) {
-    margin-right: inherit;
-    margin-left: var(--sm-padding-y);
-
-    [dir="rtl"] & {
-        margin-right: var(--sm-padding-y);
-        margin-left: inherit;
-    }
-}
-
-.pollBtn:nth-child(odd) {
-    margin-right: 1rem;
-    margin-left: inherit;
-
-    [dir="rtl"] & {
-        margin-right: inherit;
-        margin-left: var(--sm-padding-y);
-    }
-}
-
-.pollBtn:hover {
-    box-shadow: 0 0 0 1px var(--poll-blue);
-    background-color: var(--color-white);
-    color: var(--poll-blue);
-
-    > span {
-        color: var(--poll-blue);
-        opacity: 1;
-    }
-}
-
-.pollBtn {
-    margin-top: var(--sm-padding-y);
-    margin-bottom: var(--sm-padding-y);
-    background-color: var(--color-white);
-    box-shadow: 0 0 0 1px var(--color-gray);
-    color: var(--color-gray);
-
-    > span {
-        color: var(--color-gray);
-    }
-
-    > span:hover {
-        color: var(--poll-blue);
-        opacity: 1;
-    }
-}
-
-.pollBtn:active {
-    &:focus {
-        box-shadow: 0 0 0 1px var(--poll-blue);
-    }
-
-    background-color: var(--color-white);
-    box-shadow: 0 0 0 1px var(--poll-blue);
-
-    > span {
-        color: var(--poll-blue);
-    }
-}
-
-.pollBtn:focus {
-    background-color: var(--color-white);
-    box-shadow: 0 0 0 1px var(--poll-blue);
-
-    > span {
-        color: var(--poll-blue);
-    }
-}
-
-.inputError {
-    color: var(--color-danger);
-    font-size: var(--font-size-small);
-}
-
-.inputError,
-.errorSpacer {
-    position: relative;
-    height: 1.25rem;
-}
-
-.input {
-    @include inputFocus(var(--color-blue-light));
-
-    &:hover,
-    &:focus {
-        @extend %highContrastOutline;
-    }
-
-    &:focus {
-        outline-style: solid !important;
-    }
-
-    margin: 0;
-    color: var(--color-text);
-    background: var(--color-white);
-    font-size: var(--font-size-small);
-    border: 1px solid var(--color-gray-lighter);
-    border-radius: var(--border-radius);
-}
-
-.noSlidePanelContainer {
-    color: var(--color-gray-drak);
-    text-align: center;
-}
-
-.checkbox {
-    display: inline-block;
-    margin-right: var(--poll-sm-margin);
-    margin-bottom: var(--poll-md-margin);
-}
-
-
-.responseType {
-    display: flex;
-    justify-content: space-between;
-    flex-flow: wrap;
-    overflow-wrap: break-word;
-    position: relative;
-    width: 100%;
-    margin-bottom: var(--lg-padding-x);
-
-    button {
-        position: relative;
-        width: 100%;
-    }
-}
-
-.fullWidth {
-    width: 100%;
-}
-
-.pollQuestion {
-    resize: none;
-}
-
-.pollOption {
-    margin-right: 1rem;
-
-    [dir="rtl"] & {
-        margin-right: 0;
-        margin-left: 1rem;
-    }
-}
-
-.pollQuestion,
-.pollOption {
-    @include inputFocus(var(--color-blue-light));
-
-    width: 100%;
-    color: var(--color-text);
-    -webkit-appearance: none;
-    padding: calc(var(--sm-padding-y) * 2) calc(var(--sm-padding-x) * 1);
-    border-radius: var(--border-radius);
-    font-size: var(--font-size-base);
-    border: 1px solid var(--color-gray-lighter);
-    box-shadow: 0 0 0 1px var(--color-gray-lighter);
-}
-
-.hasError {
-    border-color: var(--color-danger);
-    box-shadow: 0 0 0 1px var(--color-danger);
-}
-
-.exampleTitle {
-    background-color: var(--color-gray-lightest);
-    height: var(--sm-padding-x);
-    border-radius:  var(--border-radius);
-    width: 75%;
-}
-
-.exampleResponse {
-    border: var(--color-gray-light) solid 1px;
-    border-radius:  var(--border-radius);
-    padding: 1rem;
-    margin-top: 1rem;
-
-    .responseInput {
-        border: var(--color-gray-light) solid 1px;
-        border-radius: var(--border-radius);
-        margin-top: 1rem;
-        height: var(--poll-input-height);
-        padding-top: var(--sm-padding-x);
-        padding-left: var(--sm-padding-x);
-        position: relative;
-    }
-}
-
-.rInput {
-    background-color: var(--color-gray-lightest);
-    height: var(--lg-padding-y);
-    border-radius: var(--border-radius);
-    width: 75%;
-}
-
-.addItemBtn {
-    top: 1px;
-    position: relative;
-    display: block;
-    width: var(--poll-addItem-width);
-    text-align: left;
-    color: var(--color-primary);
-    padding-left: 0;
-    padding-right: 0;
-    font-size: var(--font-size-base);
-    white-space: pre-wrap;
-
-    &:hover {
-        span {
-            opacity: 1;
-        }
-    }
-}
-
-.startPollBtn {
-    position: relative;
-    width: 100%;
-    min-height: var(--poll-input-height);
-    margin-top: 1rem;
-    font-size: var(--font-size-base);
-    overflow-wrap: break-word;
-    white-space: pre-wrap;
-
-    &:hover {
-        span {
-            opacity: 1;
-        }
-    }
-}
-
-.pBtn {
-    border: solid var(--color-gray-light) 1px;
-    min-height: var(--poll-input-height);
-    font-size: var(--font-size-base);
-    white-space: pre-wrap;
-    span {
-        &:hover {
-            opacity: 1;
-        }
-    }
-}
-
-.deleteBtn {
-    font-size: var(--font-size-base);
-    flex: none;
-    width: 40px;
-    position: relative;
-    i {
-        font-size: 150%;
-    }
-}
-
-.pBtn {
-    width: 100%;
-    margin-bottom: 1rem;
-}
-
-.smallBtn {
-    width: 49% !important;
-}
-
-.selectedBtnBlue {
-    background-color: var(--poll-blue);
-    color: var(--color-white);
-    font-size: var(--font-size-base);
-
-    &:hover,
-    &:focus,
-    &:active {
-        background-color: var(--poll-blue) !important;
-        box-shadow: none !important;
-        color: var(--color-white) !important;
-    }
-}
-
-.selectedTypeBtn {
-    background-color: var(--color-gray-lightest);
-    font-size: var(--font-size-base);
-
-    &:hover,
-    &:focus,
-    &:active {
-        background-color: var(--color-gray-lightest) !important;
-        box-shadow: none !important;
-    }
-}
-
-.dragAndDropPollContainer {
-    width: 200px !important;
-    height: 200px !important;
-}
-
-.row {
-  display: flex;
-  flex-flow: wrap;
-  flex-grow: 1;
-  justify-content: space-between;
-  margin-top: 0.7rem;
-  margin-bottom: 0.7rem;
-}
-
-.label {
-    color: var(--color-text);
-}
-
-.toggle {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-}
-
-.col {
-  display: flex;
-  position: relative;
-  flex-flow: column;
-  flex-grow: 1;
-  
-  &:last-child {
-    padding-right: 0;
-    padding-left: 1rem;
-
-    [dir="rtl"] & {
-      padding-right: 0.1rem;
-      padding-left: 0;
-    }
-  }
-}
-
-.toggleLabel {
-  margin-right: var(--sm-padding-x);
-
-  [dir="rtl"] & {
-    margin: 0 0 0 var(--sm-padding-x);
-  }
-}
-
-.sectionHeading {
-  margin-top: 0;
-  font-weight: 600;
-  color: var(--color-heading);
-}
-
-.pollParagraph {
-  color: var(--color-text);
-}
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js
index 9fb19a0ce5..9fce0ecfbf 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js
+++ b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js
@@ -44,7 +44,9 @@ const toolbarMargin = '.8rem';
 
 const pollStatsElementWidth = '17%';
 const pollSmMargin = '0.3125rem';
+const pollMdMargin = '0.7rem';
 const pollResultWidth = '15rem';
+const pollInputHeight = '2.5rem';
 
 export {
   borderSizeSmall,
@@ -89,5 +91,7 @@ export {
   toolbarMargin,
   pollStatsElementWidth,
   pollSmMargin,
+  pollMdMargin,
   pollResultWidth,
+  pollInputHeight,
 };
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
index 89d0dcc6e1..3c9d251c2b 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
+++ b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
@@ -52,7 +52,8 @@ const toolbarButtonBg = btnDefaultBg;
 const toolbarListBg = '#DDD';
 const toolbarListBgFocus = '#C6C6C6';
 
-const pollStatsBorderColor = '#d4d9df';
+const pollStatsBorderColor = '#D4D9DF';
+const pollBlue = '#1A73D4';
 
 export {
   colorWhite,
@@ -97,4 +98,5 @@ export {
   toolbarListBg,
   toolbarListBgFocus,
   pollStatsBorderColor,
+  pollBlue,
 };