Polls: style with Tailwind

app/soapbox/components/poll.tsx

@@ -8,7 +8,7 @@ import { useDispatch } from 'react-redux';
 import { openModal } from 'soapbox/actions/modals';
 import { vote, fetchPoll } from 'soapbox/actions/polls';
 import Icon from 'soapbox/components/icon';
-import { Text } from 'soapbox/components/ui';
+import { Text, Button, Stack, HStack } from 'soapbox/components/ui';
 import Motion from 'soapbox/features/ui/util/optional_motion';
 
 import RelativeTimestamp from './relative_timestamp';
@@ -26,7 +26,7 @@ const PollPercentageBar: React.FC<{percent: number, leading: boolean}> = ({ perc
     <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
       {({ width }) =>(
         <span
-          className={classNames('poll__chart bg-gray-300 dark:bg-slate-900', {
+          className={classNames('absolute inset-0 h-full inline-block rounded bg-gray-300 dark:bg-slate-900', {
             'bg-primary-300 dark:bg-primary-400': leading,
           })}
           style={{ width: `${width}%` }}
@@ -43,12 +43,13 @@ interface IPollOptionText extends IPollOption {
 const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, percent, showResults, onToggle }) => {
   const intl = useIntl();
   const voted = poll.own_votes?.includes(index);
+  const message = intl.formatMessage(messages.votes, { votes: option.votes_count });
 
-  const handleOptionChange = (): void => {
+  const handleOptionChange: React.EventHandler<React.ChangeEvent> = () => {
     onToggle(index);
   };
 
-  const handleOptionKeyPress = (e: React.KeyboardEvent): void => {
+  const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
     if (e.key === 'Enter' || e.key === ' ') {
       onToggle(index);
       e.stopPropagation();
@@ -57,8 +58,12 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
   };
 
   return (
-    <label className={classNames('poll__text', { selectable: !showResults })}>
+    <label
+      className={classNames('relative', { 'cursor-pointer': !showResults })}
+      title={showResults ? message : undefined}
+    >
       <input
+        className='hidden'
         name='vote-options'
         type={poll.multiple ? 'checkbox' : 'radio'}
         value={index}
@@ -66,26 +71,34 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
         onChange={handleOptionChange}
       />
 
-      {!showResults && (
+      <HStack alignItems='center' className='p-1'>
-        <span
+        {!showResults && (
-          className={classNames('poll__input', { checkbox: poll.multiple, active })}
+          <span
-          tabIndex={0}
+            className={classNames('inline-block w-4 h-4 mr-2.5 border border-solid border-primary-600 rounded-full', {
-          role={poll.multiple ? 'checkbox' : 'radio'}
+              'bg-primary-600': active,
-          onKeyPress={handleOptionKeyPress}
+              'rounded': poll.multiple,
-          aria-checked={active}
+            })}
-          aria-label={option.title}
+            tabIndex={0}
-          data-index={index}
+            role={poll.multiple ? 'checkbox' : 'radio'}
-        />
+            onKeyPress={handleOptionKeyPress}
-      )}
+            aria-checked={active}
+            aria-label={option.title}
+          />
+        )}
 
-      {showResults && (
+        {showResults && (
-        <span className='poll__number' title={intl.formatMessage(messages.votes, { votes: option.votes_count })}>
+          <HStack space={2} alignItems='center' className='mr-2.5'>
-          {!!voted && <Icon src={require('@tabler/icons/icons/check.svg')} className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />}
+            {voted ? (
-          {Math.round(percent)}%
+              <Icon src={require('@tabler/icons/icons/check.svg')} title={intl.formatMessage(messages.voted)} />
-        </span>
+            ) : (
-      )}
+              <div className='svg-icon' />
+            )}
+            <span className='font-bold'>{Math.round(percent)}%</span>
+          </HStack>
+        )}
 
-      <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
+        <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
+      </HStack>
     </label>
   );
 };
@@ -107,13 +120,13 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
   const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
 
   return (
-    <li key={option.title}>
+    <div className='relative mb-2.5' key={option.title}>
       {showResults && (
         <PollPercentageBar percent={percent} leading={leading} />
       )}
 
       <PollOptionText percent={percent} {...props} />
-    </li>
+    </div>
   );
 };
 
@@ -131,11 +144,16 @@ interface IPollState {
 
 const RefreshButton: React.FC<{poll: PollEntity}> = ({ poll }): JSX.Element => {
   const dispatch = useDispatch();
-  const handleRefresh = () => dispatch(fetchPoll(poll.id));
+
+  const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
+    dispatch(fetchPoll(poll.id));
+    e.stopPropagation();
+    e.preventDefault();
+  };
 
   return (
     <span>
-      <button className='poll__link' onClick={handleRefresh}>
+      <button className='underline' onClick={handleRefresh}>
         <Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text>
       </button>
     </span>
@@ -144,12 +162,12 @@ const RefreshButton: React.FC<{poll: PollEntity}> = ({ poll }): JSX.Element => {
 
 const VoteButton: React.FC<{poll: PollEntity, selected: Selected}> = ({ poll, selected }): JSX.Element => {
   const dispatch = useDispatch();
-  const handleVote = dispatch(vote(poll.id, Object.keys(selected)));
+  const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
 
   return (
-    <button className='button button-secondary' onClick={handleVote}>
+    <Button onClick={handleVote} theme='ghost'>
       <FormattedMessage id='poll.vote' defaultMessage='Vote' />
-    </button>
+    </Button>
   );
 };
 
@@ -164,8 +182,8 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
   const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.expires_at} futureDate />;
 
   return (
-    <div className='poll__footer'>
+    <Stack space={2}>
-      {!showResults && <VoteButton poll={poll} selected={selected} />}
+      {!showResults && <div><VoteButton poll={poll} selected={selected} /></div>}
       <Text>
         {showResults && (
           <><RefreshButton poll={poll} /> · </>
@@ -173,7 +191,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
         <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.votes_count }} />
         {poll.expires_at && <span> · {timeRemaining}</span>}
       </Text>
-    </div>
+    </Stack>
   );
 };
 
@@ -207,12 +225,6 @@ class Poll extends ImmutablePureComponent<IPoll, IPollState> {
     }
   }
 
-  handleVote = () => {
-    const { dispatch, poll } = this.props;
-    if (!dispatch || !poll) return;
-    dispatch(vote(poll.id, Object.keys(this.state.selected)));
-  };
-
   openUnauthorizedModal = () => {
     const { dispatch, status } = this.props;
     if (!dispatch) return;
@@ -230,26 +242,28 @@ class Poll extends ImmutablePureComponent<IPoll, IPollState> {
     const showResults = poll.voted || poll.expired;
 
     return (
-      <div className={classNames('poll', { voted: poll.voted })}>
+      <div onClick={e => e.stopPropagation()}>
-        <ul>
+        <Stack className={classNames('my-2', { voted: poll.voted })}>
-          {poll.options.map((option, i) => (
+          <Stack>
-            <PollOption
+            {poll.options.map((option, i) => (
-              key={i}
+              <PollOption
-              poll={poll}
+                key={i}
-              option={option}
+                poll={poll}
-              index={i}
+                option={option}
-              showResults={showResults}
+                index={i}
-              active={!!this.state.selected[i]}
+                showResults={showResults}
-              onToggle={this.toggleOption}
+                active={!!this.state.selected[i]}
-            />
+                onToggle={this.toggleOption}
-          ))}
+              />
-        </ul>
+            ))}
+          </Stack>
 
-        <PollFooter
+          <PollFooter
-          poll={poll}
+            poll={poll}
-          showResults={showResults}
+            showResults={showResults}
-          selected={selected}
+            selected={selected}
-        />
+          />
+        </Stack>
       </div>
     );
   }

app/styles/application.scss

@@ -19,7 +19,6 @@
 @import 'boost';
 @import 'loading';
 @import 'ui';
-@import 'polls';
 // @import 'introduction';
 @import 'emoji_picker';
 @import 'about';

app/styles/polls.scss

@@ -1,254 +0,0 @@
-.poll {
-  margin-top: 16px;
-  font-size: 14px;
-
-  li {
-    margin-bottom: 10px;
-    position: relative;
-  }
-
-  &__chart {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    display: inline-block;
-    border-radius: 4px;
-    background: hsla(var(--primary-text-color_hsl), 0.1);
-    &.leading { background: hsla(var(--primary-text-color_hsl), 0.15); }
-  }
-
-  &__text {
-    position: relative;
-    display: flex;
-    padding: 6px 0;
-    line-height: 18px;
-    cursor: default;
-    overflow: hidden;
-    width: 100%;
-    text-overflow: ellipsis;
-    color: var(--primary-text-color--faint);
-
-    input[type=radio],
-    input[type=checkbox] {
-      display: none;
-    }
-
-    > span:last-child {
-      flex: 1;
-    }
-
-    .autossugest-input {
-      flex: 1 1 auto;
-    }
-
-    input[type=text] {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      font-size: 14px;
-      color: var(--primary-text-color);
-      outline: 0;
-      font-family: inherit;
-      background: var(--foreground-color);
-      border: 1px solid var(--foreground-color);
-      border-radius: 4px;
-      padding: 6px 10px;
-
-      &:focus {
-        border-color: var(--highlight-text-color);
-      }
-    }
-
-    &.selectable {
-      cursor: pointer;
-    }
-
-    &.editable {
-      display: flex;
-      align-items: center;
-      overflow: visible;
-
-      .autosuggest-input {
-        width: 100%;
-      }
-    }
-  }
-
-  &__input {
-    display: inline-block;
-    position: relative;
-    border: 1px solid var(--brand-color);
-    box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    flex: 0 0 auto;
-    margin-right: 10px;
-    top: -1px;
-    border-radius: 50%;
-    vertical-align: middle;
-
-    &.checkbox {
-      border-radius: 4px;
-    }
-
-    &.active {
-      border-color: $valid-value-color;
-      background: $valid-value-color;
-    }
-
-    &:active,
-    &:focus,
-    &:hover {
-      border-width: 4px;
-      background: none;
-    }
-
-    &::-moz-focus-inner {
-      outline: 0 !important;
-      border: 0;
-    }
-
-    &:focus,
-    &:active {
-      outline: 0 !important;
-    }
-  }
-
-  &__number {
-    display: inline-block;
-    width: 36px;
-    font-weight: 700;
-    padding: 0 10px;
-    text-align: right;
-  }
-
-  &.voted &__number {
-    width: 52px;
-    padding-left: 8px;
-    flex: 0 0 52px;
-  }
-
-  &__vote__mark {
-    float: left;
-    color: var(--highlight-text-color);
-    line-height: 18px;
-  }
-
-  &__footer {
-    padding-top: 6px;
-    padding-bottom: 5px;
-    color: var(--primary-text-color);
-  }
-
-  &__link {
-    display: inline;
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    color: var(--primary-text-color);
-    text-decoration: underline;
-    font-size: inherit;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:active,
-    &:focus {
-      background-color: hsla(var(--primary-text-color_hsl), 0.1);
-    }
-  }
-
-  .button {
-    height: 36px;
-    padding: 0 16px;
-    margin-right: 10px;
-    font-size: 14px;
-  }
-
-  &__cancel {
-    height: 20px;
-
-    .svg-icon {
-      height: 20px;
-      width: 20px;
-    }
-  }
-}
-
-.compose-form__poll-wrapper {
-  border-top: 1px solid var(--foreground-color);
-
-  ul {
-    padding: 10px;
-  }
-
-  .poll__footer {
-    border-top: 1px solid var(--foreground-color);
-    padding: 10px;
-    margin: -5px 0 0 -5px;
-
-    button,
-    select {
-      flex: 1 1 50%;
-      margin: 5px 0 0 5px;
-    }
-  }
-
-  .button.button-secondary {
-    font-size: 14px;
-    font-weight: 400;
-    padding: 6px 10px;
-    height: auto;
-    line-height: inherit;
-    color: var(--brand-color);
-    border-color: var(--brand-color);
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-
-    .poll__text {
-      flex: 0 0 auto;
-      width: calc(100% - (23px + 6px));
-      margin-right: 6px;
-    }
-  }
-
-  select {
-    box-sizing: border-box;
-    font-size: 14px;
-    color: var(--brand-color);
-    display: inline-block;
-    width: auto;
-    outline: 0;
-    font-family: inherit;
-    background-color: var(--foreground-color);
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-    background-size: auto 16px;
-    border: 1px solid var(--brand-color);
-    border-radius: 4px;
-    padding: 6px 10px;
-    padding-right: 30px;
-  }
-
-  .icon-button.disabled {
-    color: var(--brand-color);
-  }
-}
-
-.muted .poll {
-  color: var(--primary-text-color);
-
-  &__chart {
-    background: hsla(var(--brand-color_hsl), 0.2);
-
-    &.leading {
-      background: hsla(var(--brand-color_hsl), 0.2);
-    }
-  }
-}