Fixes to the polls UI (#10150)

* Allow unselecting choices in multiple choice polls

* Properly disable checkboxes/radio buttons for polls in public pages

* Visually differentiate checkboxes and radio buttons

app/javascript/mastodon/components/poll.js

@@ -60,7 +60,11 @@ class Poll extends ImmutablePureComponent {
 
     if (this.props.poll.get('multiple')) {
       const tmp = { ...this.state.selected };
+      if (tmp[value]) {
+        delete tmp[value];
+      } else {
         tmp[value] = true;
+      }
       this.setState({ selected: tmp });
     } else {
       const tmp = {};
@@ -86,7 +90,7 @@ class Poll extends ImmutablePureComponent {
   };
 
   renderOption (option, optionIndex) {
-    const { poll }    = this.props;
+    const { poll, disabled } = this.props;
     const percent            = (option.get('votes_count') / poll.get('votes_count')) * 100;
     const leading            = poll.get('options').filterNot(other => other.get('title') === option.get('title')).every(other => option.get('votes_count') > other.get('votes_count'));
     const active             = !!this.state.selected[`${optionIndex}`];
@@ -109,9 +113,10 @@ class Poll extends ImmutablePureComponent {
             value={optionIndex}
             checked={active}
             onChange={this.handleOptionChange}
+            disabled={disabled}
           />
 
-          {!showResults && <span className={classNames('poll__input', { active })} />}
+          {!showResults && <span className={classNames('poll__input', { checkbox: poll.get('multiple'), active })} />}
           {showResults && <span className='poll__number'>{Math.floor(percent)}%</span>}
 
           {option.get('title')}

app/javascript/styles/mastodon/polls.scss

@@ -47,9 +47,13 @@
     height: 18px;
     margin-right: 10px;
     top: -1px;
-    border-radius: 4px;
+    border-radius: 50%;
     vertical-align: middle;
 
+    &.checkbox {
+      border-radius: 4px;
+    }
+
     &.active {
       border-color: $valid-value-color;
       background: $valid-value-color;