From 2855642fc35f83e01d9f4c0629938f26d985be3e Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Fri, 15 Oct 2021 10:38:43 +0300
Subject: [PATCH] fix(polls): Update ux according to design

---
 css/_polls.scss                               | 282 +++++++++---------
 .../polls/components/web/PollAnswer.js        |   9 +-
 .../polls/components/web/PollCreate.js        |   8 +-
 .../polls/components/web/PollsPane.js         |   4 +-
 4 files changed, 145 insertions(+), 158 deletions(-)

diff --git a/css/_polls.scss b/css/_polls.scss
index f4b49b5442..da9791eea5 100644
--- a/css/_polls.scss
+++ b/css/_polls.scss
@@ -1,5 +1,7 @@
 .poll-dialog {
-    font-size: 1rem;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
 
     h1, span, li, strong {
         color: #bce;
@@ -16,28 +18,52 @@
 }
 
 .poll-header {
-    padding: 8px 16px;
+    margin-bottom: 8px;
 }
 
-.poll-answer-container{
-    padding: 8px;
+.poll-answer-container {
     background: #3D3D3D;
     border-radius: 3px;
     margin-bottom: 8px;
+
+    @media (max-width: 580px) {
+      &> span {
+        padding: 8px 0;
+      }
+
+      svg {
+        margin-top: 6px;
+      }
+    }
+}
+
+.poll-answer-option {
+   font-weight: 400;
+   display: block;
+   margin: 4px;
+
+   @media (max-width: 580px) {
+      font-size: 16px;
+      margin: 11px 8px
+   }
 }
 
 .poll-answer-field-list, .poll-answer-list, .poll-result-list {
     list-style-type: none;
-    padding: 0 16px;
+    padding: 0;
     margin: 0;
 }
 
+.poll-answer-field-list {
+    padding: 0 16px;
+}
+
 ol.poll-result-list {
     margin-bottom: 1.5em;
 }
 
 .poll-result-list > li {
-    margin-bottom: 8px;
+    margin-bottom: 16px;
 }
 
 .poll-answer-field {
@@ -60,7 +86,7 @@ ol.poll-result-list {
 .poll-create-container .jsYMHu {
     background: #292929;
     border-color: #808090;
-    color: white // #808090
+    color: #fff // #808090
 }
 
 .poll-add-button {
@@ -72,7 +98,7 @@ ol.poll-result-list {
 .poll-remove-option-button {
     background: 0 0;
     border: none;
-    color: #8B8B8B;
+    color: #E04757;
     padding-left: 0;
 }
 
@@ -85,7 +111,7 @@ ol.poll-result-list {
 
 .poll-icon-button, .poll-drag-handle {
     .jitsi-icon svg {
-        fill: #bce;
+        fill: #929292;
     }
 }
 
@@ -94,6 +120,7 @@ ol.poll-result-list {
     border: none;
     cursor: grab;
     padding-left: 8;
+    padding-top: 8px;
     display: flex;
 }
 
@@ -105,13 +132,12 @@ ol.poll-result-list {
 }
 
 .poll-question {
-    font-size: 1.2em;
+    font-size: 16px;
     font-weight: 600;
-    margin-bottom: 0.5em;
+    margin-bottom: 16px;
 }
 
 .poll-answer-voters {
-    font-size: 1em;
     font-weight: lighter;
     list-style-type: none;
     border: #616161 solid 1px;
@@ -191,29 +217,40 @@ ol.poll-result-list {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+
+    a.poll-detail-link, a.poll-change-vote-link {
+      color: #669AEC;
+      cursor: pointer;
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover {
+        color: #669AEC;
+      }
+
+      &:visited {
+        color: #669AEC;
+      }
+    }
 }
 
-a.poll-detail-link, a.poll-change-vote-link {
-    color: #246FE5;
-    cursor: pointer;
-    text-decoration: none;
-}
 
 .polls-pane-content {
-    display: flex;
-    flex-direction: column;
-    font-weight: 600;
-    height: 85%;
-    align-items: stretch;
+    height: calc(100% - 102px);
+    position: relative;
+
+    @media (max-width: 580px) {
+        height: calc(100% - 32px);
+    }
 }
 
 .pane-content{
     display: flex;
     flex-direction: column;
+    height: 100%;
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: 100%;
 }
 
 .empty-pane-icon {
@@ -228,37 +265,41 @@ a.poll-detail-link, a.poll-change-vote-link {
 }
 
 .empty-pane-message {
+    color: #fff;
+    padding: 0 16px;
     text-align: center;
-}
 
-.poll-results {
-    color: white;
-}
-
-.poll-answer {
-    h1, strong ,span {
-        color: white;
-    }
 }
 
 .poll-results, .poll-answer {
-    margin-bottom: 16px;
     background: #292929;
     border-radius: 8px;
-    padding: 12px 8px;
-    border-width: thin;
-    border-style: solid;
-    border-color: #616161;
+    border: 1px solid #666666;
+    margin: 16px;
+    padding: 16px;
     word-break: break-word;
 }
 
+.poll-results {
+    color: #fff;
+}
+
+.poll-answer {
+
+    h1, strong ,span {
+        color: #fff;
+    }
+}
+
 .poll-create-label {
-    color: white;
-    margin-bottom: 4;
+    color: #C2C2C2;
     display: flex;
+    font-weight: 400;
+    margin-bottom: 4;
 }
 
 .expandable-input{
+    line-height: 18px;
     resize: none;
     width: 100%;
     height: 40px;
@@ -272,23 +313,26 @@ a.poll-detail-link, a.poll-change-vote-link {
 }
 
 .poll-container {
-    box-sizing: border-box;
-    flex: 1;
+    font-size: 14px;
+    font-weight: 600;
+    height: calc(100% - 88px);
+    line-height: 20px;
     overflow-y: auto;
     position: relative;
-    padding: 16px;
 
     & > * + *:not(.ignore-child) {
         margin-top: 16px;
     }
 
-    &::-webkit-scrollbar {
-        display: none;
+    @media (max-width: 580px) {
+        height: calc(100% - 102px);
     }
 }
 
 .poll-create-header {
+    color: #fff;
     font-size: 20px;
+    line-height: 28px;
     margin: 20px 16px;
     font-weight: 600;
 }
@@ -297,28 +341,45 @@ a.poll-detail-link, a.poll-change-vote-link {
     padding: 8px 0;
 }
 
+.poll-create-footer {
+    background-color: #141414;
+    bottom: 0;
+    position: absolute;
+    width: calc(100% - 32px);
+}
+
 .poll-footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: 8px 16px;
-    height: 40px;
-    align-items: stretch;
-
-    & > *:not(:last-child) {
-        margin-right: 16px;
-    }
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px 16px 16px;
 }
 
-.poll-primary-button {
-    align-items: center;
+.poll-answer-footer {
+  padding: 8px 0 0 0;
+}
+
+.poll-button {
+   align-items: center;
+   border: 0;
+   border-radius: 6px;
+   font-size: 14px;
+   font-weight: 600;
+   display: flex;
+   justify-content: center;
+   min-height: 40px;
+   width: 100%;
+
+   &:disabled {
+     cursor: initial;
+   }
+
+   @media (max-width: 580px) {
+     min-height: 48px;
+   }
+}
+
+.poll-button-primary {
     background-color: #0056E0;
-    border: 0;
-    border-radius: 6px;
-    display: flex;
-    font-weight: unset;
-    justify-content: center;
-    font-size: 15px;
-    flex: 1;
 
     &:hover {
         background-color: #246FE5;
@@ -337,23 +398,10 @@ a.poll-detail-link, a.poll-change-vote-link {
         background-color: #00225A;
         color: #858585;
     }
-
-    & > *:not(:last-child) {
-        margin-right: 8px;
-    }
 }
 
-.poll-secondary-button {
-    align-items: center;
+.poll-button-secondary {
     background-color: #3D3D3D;
-    border: 0;
-    border-radius: 6px;
-    display: flex;
-    font-weight: unset;
-    justify-content: center;
-    font-size: 15px;
-    height: 40px;
-    width: 100%;
 
     &:hover {
         background-color: #525252;
@@ -372,79 +420,19 @@ a.poll-detail-link, a.poll-change-vote-link {
         background-color: #141414;
         color: #858585;
     }
-
-    & > *:not(:last-child) {
-        margin-right: 8px;
-    }
 }
 
-.poll-small-primary-button {
-    align-items: center;
-    background-color: #0056E0;
-    border: 0;
-    border-radius: 6px;
-    display: flex;
-    font-weight: unset;
-    justify-content: center;
-    font-size: 15px;
-    height: 40px;
-    width: 50%;
-
-    &:hover {
-        background-color: #246FE5;
-    }
-
-    &:active {
-        background-color: #0045B3;
-    }
-
-    &:focus {
-        background-color: #0045B3;
-        border: 3px solid #99BBF3;
-    }
-
-    &:disabled {
-        background-color: #00225A;
-        color: #858585;
-        cursor: default;
-    }
-
-    & > *:not(:last-child) {
-        margin-right: 8px;
-    }
+.poll-button-short {
+  max-width: 132px;
 }
 
-.poll-small-secondary-button {
-    align-items: center;
-    background-color: #3D3D3D;
-    border: 0;
-    border-radius: 6px;
-    display: flex;
-    font-weight: unset;
-    justify-content: center;
-    font-size: 15px;
-    height: 40px;
-    width: 50%;
-
-    &:hover {
-        background-color: #525252;
-    }
-
-    &:active {
-        background-color: #292929;
-    }
-
-    &:focus {
-        background-color: #292929;
-        border: 3px solid #858585;
-    }
-
-    &:disabled {
-        background-color: #141414;
-        color: #858585;
-    }
-
-    & > *:not(:last-child) {
-        margin-right: 8px;
-    }
+.poll-button-shortest {
+  max-width: 117px;
+}
+
+.poll-button-short,
+.poll-button-shortest {
+   @media (max-width: 580px) {
+     min-width: 49%;
+   }
 }
diff --git a/react/features/polls/components/web/PollAnswer.js b/react/features/polls/components/web/PollAnswer.js
index 2e2f5ad86e..141aabd460 100644
--- a/react/features/polls/components/web/PollAnswer.js
+++ b/react/features/polls/components/web/PollAnswer.js
@@ -33,7 +33,7 @@ const PollAnswer = (props: AbstractProps) => {
                             <Checkbox
                                 isChecked = { checkBoxStates[index] }
                                 key = { index }
-                                label = { <span>{ answer.name }</span> }
+                                label = { <span className = 'poll-answer-option'>{ answer.name }</span> }
                                 // eslint-disable-next-line react/jsx-no-bind
                                 onChange = { ev => setCheckbox(index, ev.target.checked) }
                                 size = 'large' />
@@ -41,22 +41,21 @@ const PollAnswer = (props: AbstractProps) => {
                     ))
                 }
             </ol>
-            <div className = { 'poll-footer' }>
+            <div className = 'poll-footer poll-answer-footer' >
                 <button
                     aria-label = { t('polls.answer.skip') }
-                    className = { 'poll-small-secondary-button' }
+                    className = 'poll-button poll-button-secondary poll-button-shortest'
                     onClick = { skipAnswer } >
                     <span>{t('polls.answer.skip')}</span>
                 </button>
                 <button
                     aria-label = { t('polls.answer.submit') }
-                    className = 'poll-small-primary-button'
+                    className = 'poll-button poll-button-primary poll-button-shortest'
                     disabled = { isSubmitAnswerDisabled(checkBoxStates) }
                     onClick = { submitAnswer }>
                     <span>{t('polls.answer.submit')}</span>
                 </button>
             </div>
-
         </div>
     );
 };
diff --git a/react/features/polls/components/web/PollCreate.js b/react/features/polls/components/web/PollCreate.js
index 9592bd960f..81875bb814 100644
--- a/react/features/polls/components/web/PollCreate.js
+++ b/react/features/polls/components/web/PollCreate.js
@@ -212,7 +212,7 @@ const PollCreate = (props: AbstractProps) => {
             <div className = 'poll-add-button'>
                 <button
                     aria-label = { 'Add option' }
-                    className = { 'poll-secondary-button' }
+                    className = 'poll-button poll-button-secondary'
                     onClick = { () => {
                         addAnswer();
                         requestFocus(answers.length);
@@ -222,17 +222,17 @@ const PollCreate = (props: AbstractProps) => {
                 </button>
             </div>
         </div>
-        <div className = 'poll-footer'>
+        <div className = 'poll-footer poll-create-footer'>
             <button
                 aria-label = { t('polls.create.cancel') }
-                className = 'poll-small-secondary-button'
+                className = 'poll-button poll-button-secondary poll-button-short'
                 onClick = { () => setCreateMode(false) }
                 type = 'button' >
                 <span>{t('polls.create.cancel')}</span>
             </button>
             <button
                 aria-label = { t('polls.create.send') }
-                className = 'poll-small-primary-button'
+                className = 'poll-button poll-button-primary poll-button-short'
                 disabled = { isSubmitDisabled }
                 type = 'submit' >
                 <span>{t('polls.create.send')}</span>
diff --git a/react/features/polls/components/web/PollsPane.js b/react/features/polls/components/web/PollsPane.js
index a01676c5ba..74bc159d41 100644
--- a/react/features/polls/components/web/PollsPane.js
+++ b/react/features/polls/components/web/PollsPane.js
@@ -19,10 +19,10 @@ const PollsPane = (props: AbstractProps) => {
             <div className = { 'poll-container' } >
                 <PollsList />
             </div>
-            <div className = { 'poll-footer' }>
+            <div className = 'poll-footer poll-create-footer'>
                 <button
                     aria-label = { t('polls.create.create') }
-                    className = { 'poll-primary-button' }
+                    className = 'poll-button poll-button-primary'
                     // eslint-disable-next-line react/jsx-no-bind
                     onClick = { onCreate } >
                     <span>{t('polls.create.create')}</span>