fix(polls): Update ux according to design

This commit is contained in:
Vlad Piersec
2021-10-15 10:38:43 +03:00
committed by vp8x8
parent ebb0a206f1
commit 2855642fc3
4 changed files with 145 additions and 158 deletions

View File

@@ -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>
);
};

View File

@@ -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>

View File

@@ -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>