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 && (
-        <span
-          className={classNames('poll__input', { checkbox: poll.multiple, active })}
-          tabIndex={0}
-          role={poll.multiple ? 'checkbox' : 'radio'}
-          onKeyPress={handleOptionKeyPress}
-          aria-checked={active}
-          aria-label={option.title}
-          data-index={index}
-        />
-      )}
+      <HStack alignItems='center' className='p-1'>
+        {!showResults && (
+          <span
+            className={classNames('inline-block w-4 h-4 mr-2.5 border border-solid border-primary-600 rounded-full', {
+              'bg-primary-600': active,
+              'rounded': poll.multiple,
+            })}
+            tabIndex={0}
+            role={poll.multiple ? 'checkbox' : 'radio'}
+            onKeyPress={handleOptionKeyPress}
+            aria-checked={active}
+            aria-label={option.title}
+          />
+        )}
 
-      {showResults && (
-        <span className='poll__number' title={intl.formatMessage(messages.votes, { votes: option.votes_count })}>
-          {!!voted && <Icon src={require('@tabler/icons/icons/check.svg')} className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />}
-          {Math.round(percent)}%
-        </span>
-      )}
+        {showResults && (
+          <HStack space={2} alignItems='center' className='mr-2.5'>
+            {voted ? (
+              <Icon src={require('@tabler/icons/icons/check.svg')} title={intl.formatMessage(messages.voted)} />
+            ) : (
+              <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'>
-      {!showResults && <VoteButton poll={poll} selected={selected} />}
+    <Stack space={2}>
+      {!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 })}>
-        <ul>
-          {poll.options.map((option, i) => (
-            <PollOption
-              key={i}
-              poll={poll}
-              option={option}
-              index={i}
-              showResults={showResults}
-              active={!!this.state.selected[i]}
-              onToggle={this.toggleOption}
-            />
-          ))}
-        </ul>
+      <div onClick={e => e.stopPropagation()}>
+        <Stack className={classNames('my-2', { voted: poll.voted })}>
+          <Stack>
+            {poll.options.map((option, i) => (
+              <PollOption
+                key={i}
+                poll={poll}
+                option={option}
+                index={i}
+                showResults={showResults}
+                active={!!this.state.selected[i]}
+                onToggle={this.toggleOption}
+              />
+            ))}
+          </Stack>
 
-        <PollFooter
-          poll={poll}
-          showResults={showResults}
-          selected={selected}
-        />
+          <PollFooter
+            poll={poll}
+            showResults={showResults}
+            selected={selected}
+          />
+        </Stack>
       </div>
     );
   }