From fb9796b0c4de13146bb638584f9c20a8765d8e4e Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 14 Jun 2022 16:14:14 -0400
Subject: [PATCH 1/9] Redesign Poll within Status

---
 .../pleroma-status-with-poll-with-emojis.json |   2 +-
 app/soapbox/components/poll.tsx               | 119 +++++++++++-------
 app/soapbox/components/relative_timestamp.js  |  18 +--
 app/soapbox/components/status_content.tsx     |   9 +-
 app/soapbox/features/test_timeline/index.tsx  |   2 +-
 .../features/ui/components/poll_preview.tsx   |  48 ++++---
 app/soapbox/locales/en.json                   |   2 +-
 7 files changed, 122 insertions(+), 78 deletions(-)

diff --git a/app/soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json b/app/soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json
index 76c722a45..3439ebd8f 100644
--- a/app/soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json
+++ b/app/soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json
@@ -196,7 +196,7 @@
     "expired": false,
     "expires_at": "2022-03-12T01:33:18.000Z",
     "id": "AHHue67gF2JDqCQGhc",
-    "multiple": false,
+    "multiple": true,
     "options": [
       {
         "title": "Regular emoji 😍 ",
diff --git a/app/soapbox/components/poll.tsx b/app/soapbox/components/poll.tsx
index e95b4342e..e8742ab5f 100644
--- a/app/soapbox/components/poll.tsx
+++ b/app/soapbox/components/poll.tsx
@@ -6,8 +6,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, Button, Stack, HStack } from 'soapbox/components/ui';
+import { Text, Button, Icon, Stack, HStack } from 'soapbox/components/ui';
 import Motion from 'soapbox/features/ui/util/optional_motion';
 import { useAppSelector } from 'soapbox/hooks';
 
@@ -21,10 +20,10 @@ const messages = defineMessages({
   votes: { id: 'poll.votes', defaultMessage: '{votes, plural, one {# vote} other {# votes}}' },
 });
 
-const PollPercentageBar: React.FC<{percent: number, leading: boolean}> = ({ percent, leading }): JSX.Element => {
+const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ percent, leading }): JSX.Element => {
   return (
     <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
-      {({ width }) =>(
+      {({ width }) => (
         <span
           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,
@@ -59,7 +58,12 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
 
   return (
     <label
-      className={classNames('relative', { 'cursor-pointer': !showResults })}
+      className={classNames({
+        'relative flex rounded-full border border-solid bg-white p-2 hover:bg-primary-50': true,
+        'border-primary-600 ring-1 ring-primary-600 bg-primary-50': active,
+        'border-primary-300': !active,
+        'cursor-pointer': !showResults,
+      })}
       title={showResults ? message : undefined}
     >
       <input
@@ -71,34 +75,44 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
         onChange={handleOptionChange}
       />
 
-      <HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
-        {!showResults && (
-          <span
-            className={classNames('inline-block w-4 h-4 flex-none 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}
+      <div className='grid items-center w-full'>
+        <div className='col-start-1 row-start-1 justify-self-center ml-4 mr-6'>
+          <Text
+            theme='primary'
+            weight='semibold'
+            dangerouslySetInnerHTML={{ __html: option.title_emojified }}
           />
-        )}
+        </div>
 
-        {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 }} />
-      </HStack>
+        <div className='col-start-1 row-start-1 justify-self-end flex items-center'>
+          {showResults ? (
+            <HStack space={2} alignItems='center' className='mr-2.5'>
+              {voted ? (
+                <Icon src={require('@tabler/icons/icons/check.svg')} alt={intl.formatMessage(messages.voted)} />
+              ) : (
+                <div className='svg-icon' />
+              )}
+              <span className='font-bold'>{Math.round(percent)}%</span>
+            </HStack>
+          ) : (
+            <span
+              className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
+                'bg-primary-600 border-primary-600': active,
+                'border-primary-300 bg-white': !active,
+              })}
+              tabIndex={0}
+              role={poll.multiple ? 'checkbox' : 'radio'}
+              onKeyPress={handleOptionKeyPress}
+              aria-checked={active}
+              aria-label={option.title}
+            >
+              {active && (
+                <Icon src={require('@tabler/icons/icons/check.svg')} className='text-white w-4 h-4' />
+              )}
+            </span>
+          )}
+        </div>
+      </div>
     </label>
   );
 };
@@ -120,7 +134,7 @@ 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 (
-    <div className='relative mb-2.5' key={option.title}>
+    <div className='relative' key={option.title}>
       {showResults && (
         <PollPercentageBar percent={percent} leading={leading} />
       )}
@@ -130,7 +144,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
   );
 };
 
-const RefreshButton: React.FC<{poll: PollEntity}> = ({ poll }): JSX.Element => {
+const RefreshButton: React.FC<{ poll: PollEntity }> = ({ poll }): JSX.Element => {
   const dispatch = useDispatch();
 
   const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
@@ -148,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 VoteButton: React.FC<{ poll: PollEntity, selected: Selected }> = ({ poll, selected }): JSX.Element => {
   const dispatch = useDispatch();
   const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
 
   return (
-    <Button onClick={handleVote} theme='ghost'>
+    <Button onClick={handleVote} theme='primary' block>
       <FormattedMessage id='poll.vote' defaultMessage='Vote' />
     </Button>
   );
@@ -167,18 +181,35 @@ interface IPollFooter {
 
 const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {
   const intl = useIntl();
-  const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.expires_at} futureDate />;
+  const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp weight='medium' timestamp={poll.expires_at} futureDate />;
 
   return (
-    <Stack space={2}>
+    <Stack space={4}>
       {!showResults && <div><VoteButton poll={poll} selected={selected} /></div>}
-      <Text>
+
+      <HStack space={1.5} alignItems='center'>
         {showResults && (
-          <><RefreshButton poll={poll} /> · </>
+          <>
+            <RefreshButton poll={poll} />
+            <Text theme='muted'>&middot;</Text>
+          </>
         )}
-        <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.votes_count }} />
-        {poll.expires_at && <span> · {timeRemaining}</span>}
-      </Text>
+
+        <Text theme='muted' weight='medium'>
+          <FormattedMessage
+            id='poll.total_votes'
+            defaultMessage='{count, plural, one {# vote} other {# votes}}'
+            values={{ count: poll.votes_count }}
+          />
+        </Text>
+
+        {poll.expires_at && (
+          <>
+            <Text theme='muted'>&middot;</Text>
+            <Text weight='medium' theme='muted'>{timeRemaining}</Text>
+          </>
+        )}
+      </HStack>
     </Stack>
   );
 };
@@ -231,8 +262,8 @@ const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
 
   return (
     <div onClick={e => e.stopPropagation()}>
-      <Stack className={classNames('my-2', { voted: poll.voted })}>
-        <Stack>
+      <Stack space={4} className={classNames('mt-4', { voted: poll.voted })}>
+        <Stack space={2}>
           {poll.options.map((option, i) => (
             <PollOption
               key={i}
diff --git a/app/soapbox/components/relative_timestamp.js b/app/soapbox/components/relative_timestamp.js
index 576de4e63..f6eda412d 100644
--- a/app/soapbox/components/relative_timestamp.js
+++ b/app/soapbox/components/relative_timestamp.js
@@ -33,8 +33,8 @@ const shortDateFormatOptions = {
 
 const SECOND = 1000;
 const MINUTE = 1000 * 60;
-const HOUR   = 1000 * 60 * 60;
-const DAY    = 1000 * 60 * 60 * 24;
+const HOUR = 1000 * 60 * 60;
+const DAY = 1000 * 60 * 60 * 24;
 
 const MAX_DELAY = 2147483647;
 
@@ -160,12 +160,12 @@ class RelativeTimestamp extends React.Component {
   _scheduleNextUpdate() {
     clearTimeout(this._timer);
 
-    const { timestamp }  = this.props;
-    const delta          = (new Date(timestamp)).getTime() - this.state.now;
-    const unitDelay      = getUnitDelay(selectUnits(delta));
-    const unitRemainder  = Math.abs(delta % unitDelay);
+    const { timestamp } = this.props;
+    const delta = (new Date(timestamp)).getTime() - this.state.now;
+    const unitDelay = getUnitDelay(selectUnits(delta));
+    const unitRemainder = Math.abs(delta % unitDelay);
     const updateInterval = 1000 * 10;
-    const delay          = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
+    const delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
 
     this._timer = setTimeout(() => {
       this.setState({ now: Date.now() });
@@ -175,11 +175,11 @@ class RelativeTimestamp extends React.Component {
   render() {
     const { timestamp, intl, year, futureDate, ...textProps } = this.props;
 
-    const date         = new Date(timestamp);
+    const date = new Date(timestamp);
     const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now) : timeAgoString(intl, date, this.state.now, year);
 
     return (
-      <Text {...textProps} color='inherit' tag='time' title={intl.formatDate(date, dateFormatOptions)}>
+      <Text {...textProps} theme='inherit' tag='time' title={intl.formatDate(date, dateFormatOptions)}>
         {relativeTime}
       </Text>
     );
diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx
index 9cbafa67f..0420a86c4 100644
--- a/app/soapbox/components/status_content.tsx
+++ b/app/soapbox/components/status_content.tsx
@@ -174,8 +174,8 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
     const target = e.target as HTMLElement;
     const parentNode = target.parentNode as HTMLElement;
 
-    const [ startX, startY ] = startXY.current;
-    const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)];
+    const [startX, startY] = startXY.current;
+    const [deltaX, deltaY] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)];
 
     if (target.localName === 'button' || target.localName === 'a' || (parentNode && (parentNode.localName === 'button' || parentNode.localName === 'a'))) {
       return;
@@ -273,11 +273,12 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
       output.push(<ReadMoreButton onClick={onClick} key='read-more' />);
     }
 
-    if (status.poll && typeof status.poll === 'string') {
+    const hasPoll = status.poll && typeof status.poll === 'string';
+    if (hasPoll) {
       output.push(<Poll id={status.poll} key='poll' status={status.url} />);
     }
 
-    return <>{output}</>;
+    return <div className={classNames({ 'bg-gray-100 rounded-md p-4': hasPoll })}>{output}</div>;
   } else {
     const output = [
       <div
diff --git a/app/soapbox/features/test_timeline/index.tsx b/app/soapbox/features/test_timeline/index.tsx
index 024f38204..c15116a58 100644
--- a/app/soapbox/features/test_timeline/index.tsx
+++ b/app/soapbox/features/test_timeline/index.tsx
@@ -18,9 +18,9 @@ const messages = defineMessages({
  * These get embedded into the build, but only in this chunk, so it's okay.
  */
 const MOCK_STATUSES: any[] = [
+  require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
   require('soapbox/__fixtures__/pleroma-status-with-poll.json'),
   require('soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json'),
-  require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
   require('soapbox/__fixtures__/pleroma-quote-of-quote-post.json'),
   require('soapbox/__fixtures__/truthsocial-status-with-external-video.json'),
 ];
diff --git a/app/soapbox/features/ui/components/poll_preview.tsx b/app/soapbox/features/ui/components/poll_preview.tsx
index 3d3b48408..fcabbe02b 100644
--- a/app/soapbox/features/ui/components/poll_preview.tsx
+++ b/app/soapbox/features/ui/components/poll_preview.tsx
@@ -1,30 +1,44 @@
 import classNames from 'classnames';
 import React from 'react';
 
+import { Stack } from 'soapbox/components/ui';
 import { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
 
 interface IPollPreview {
   poll: PollEntity,
 }
 
+
+// {/* <li key={index}>
+//   <label className={classNames('poll__text', { selectable: !showResults })}>
+//     <input
+//       name='vote-options'
+//       type={poll.multiple ? 'checkbox' : 'radio'}
+//       disabled
+//     />
+
+//     <span className={classNames('poll__input', { checkbox: poll.multiple })} />
+
+//     <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
+//   </label>
+// </li> */}
+
 const PollPreview: React.FC<IPollPreview> = ({ poll }) => {
   const renderOption = (option: PollOptionEntity, index: number) => {
     const showResults = poll.voted || poll.expired;
 
     return (
-      <li key={index}>
-        <label className={classNames('poll__text', { selectable: !showResults })}>
-          <input
-            name='vote-options'
-            type={poll.multiple ? 'checkbox' : 'radio'}
-            disabled
-          />
-
-          <span className={classNames('poll__input', { checkbox: poll.multiple })} />
-
-          <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
-        </label>
-      </li>
+      <label className='rounded-tl-md rounded-tr-md relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-3 focus:outline-none'>
+        <span className='flex items-center text-sm'>
+          <input type='radio' name='pricing-plan' value='Startup' className='h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500' aria-labelledby='pricing-plans-0-label' aria-describedby='pricing-plans-0-description-0 pricing-plans-0-description-1' />
+          <span id='pricing-plans-0-label' className='ml-3 font-medium'>Startup</span>
+        </span>
+        <span id='pricing-plans-0-description-0' className='ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center'>
+          <span className='font-medium'>$29 / mo</span>
+          <span>($290 / yr)</span>
+        </span>
+        <span id='pricing-plans-0-description-1' className='ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right'>Up to 5 active job postings</span>
+      </label>
     );
   };
 
@@ -33,11 +47,9 @@ const PollPreview: React.FC<IPollPreview> = ({ poll }) => {
   }
 
   return (
-    <div className='poll'>
-      <ul>
-        {poll.options.map((option, i) => renderOption(option, i))}
-      </ul>
-    </div>
+    <Stack>
+      {poll.options.map((option, i) => renderOption(option, i))}
+    </Stack>
   );
 };
 
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index d6808069a..2d246e12c 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -780,7 +780,7 @@
   "poll.closed": "Closed",
   "poll.refresh": "Refresh",
   "poll.total_votes": "{count, plural, one {# vote} other {# votes}}",
-  "poll.vote": "Vote",
+  "poll.vote": "Submit Vote",
   "poll.voted": "You voted for this answer",
   "poll.votes": "{votes, plural, one {# vote} other {# votes}}",
   "poll_button.add_poll": "Add a poll",

From b124705bfd9c7422eff6cbca73cd734f0ab9781a Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 15 Jun 2022 15:59:17 -0400
Subject: [PATCH 2/9] Refactor polls

---
 app/soapbox/components/poll.tsx              | 290 -------------------
 app/soapbox/components/polls/poll-footer.tsx |  79 +++++
 app/soapbox/components/polls/poll-option.tsx | 157 ++++++++++
 app/soapbox/components/polls/poll.tsx        |  89 ++++++
 app/soapbox/components/status_content.tsx    |   3 +-
 5 files changed, 327 insertions(+), 291 deletions(-)
 delete mode 100644 app/soapbox/components/poll.tsx
 create mode 100644 app/soapbox/components/polls/poll-footer.tsx
 create mode 100644 app/soapbox/components/polls/poll-option.tsx
 create mode 100644 app/soapbox/components/polls/poll.tsx

diff --git a/app/soapbox/components/poll.tsx b/app/soapbox/components/poll.tsx
deleted file mode 100644
index e8742ab5f..000000000
--- a/app/soapbox/components/poll.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-import classNames from 'classnames';
-import React, { useState } from 'react';
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-import { spring } from 'react-motion';
-import { useDispatch } from 'react-redux';
-
-import { openModal } from 'soapbox/actions/modals';
-import { vote, fetchPoll } from 'soapbox/actions/polls';
-import { Text, Button, Icon, Stack, HStack } from 'soapbox/components/ui';
-import Motion from 'soapbox/features/ui/util/optional_motion';
-import { useAppSelector } from 'soapbox/hooks';
-
-import RelativeTimestamp from './relative_timestamp';
-
-import type { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
-
-const messages = defineMessages({
-  closed: { id: 'poll.closed', defaultMessage: 'Closed' },
-  voted: { id: 'poll.voted', defaultMessage: 'You voted for this answer' },
-  votes: { id: 'poll.votes', defaultMessage: '{votes, plural, one {# vote} other {# votes}}' },
-});
-
-const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ percent, leading }): JSX.Element => {
-  return (
-    <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
-      {({ width }) => (
-        <span
-          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}%` }}
-        />
-      )}
-    </Motion>
-  );
-};
-
-interface IPollOptionText extends IPollOption {
-  percent: number,
-}
-
-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: React.EventHandler<React.ChangeEvent> = () => {
-    onToggle(index);
-  };
-
-  const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      onToggle(index);
-      e.stopPropagation();
-      e.preventDefault();
-    }
-  };
-
-  return (
-    <label
-      className={classNames({
-        'relative flex rounded-full border border-solid bg-white p-2 hover:bg-primary-50': true,
-        'border-primary-600 ring-1 ring-primary-600 bg-primary-50': active,
-        'border-primary-300': !active,
-        'cursor-pointer': !showResults,
-      })}
-      title={showResults ? message : undefined}
-    >
-      <input
-        className='hidden'
-        name='vote-options'
-        type={poll.multiple ? 'checkbox' : 'radio'}
-        value={index}
-        checked={active}
-        onChange={handleOptionChange}
-      />
-
-      <div className='grid items-center w-full'>
-        <div className='col-start-1 row-start-1 justify-self-center ml-4 mr-6'>
-          <Text
-            theme='primary'
-            weight='semibold'
-            dangerouslySetInnerHTML={{ __html: option.title_emojified }}
-          />
-        </div>
-
-        <div className='col-start-1 row-start-1 justify-self-end flex items-center'>
-          {showResults ? (
-            <HStack space={2} alignItems='center' className='mr-2.5'>
-              {voted ? (
-                <Icon src={require('@tabler/icons/icons/check.svg')} alt={intl.formatMessage(messages.voted)} />
-              ) : (
-                <div className='svg-icon' />
-              )}
-              <span className='font-bold'>{Math.round(percent)}%</span>
-            </HStack>
-          ) : (
-            <span
-              className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
-                'bg-primary-600 border-primary-600': active,
-                'border-primary-300 bg-white': !active,
-              })}
-              tabIndex={0}
-              role={poll.multiple ? 'checkbox' : 'radio'}
-              onKeyPress={handleOptionKeyPress}
-              aria-checked={active}
-              aria-label={option.title}
-            >
-              {active && (
-                <Icon src={require('@tabler/icons/icons/check.svg')} className='text-white w-4 h-4' />
-              )}
-            </span>
-          )}
-        </div>
-      </div>
-    </label>
-  );
-};
-
-interface IPollOption {
-  poll: PollEntity,
-  option: PollOptionEntity,
-  index: number,
-  showResults?: boolean,
-  active: boolean,
-  onToggle: (value: number) => void,
-}
-
-const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
-  const { poll, option, showResults } = props;
-  if (!poll) return null;
-
-  const percent = poll.votes_count === 0 ? 0 : (option.votes_count / poll.votes_count) * 100;
-  const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
-
-  return (
-    <div className='relative' key={option.title}>
-      {showResults && (
-        <PollPercentageBar percent={percent} leading={leading} />
-      )}
-
-      <PollOptionText percent={percent} {...props} />
-    </div>
-  );
-};
-
-const RefreshButton: React.FC<{ poll: PollEntity }> = ({ poll }): JSX.Element => {
-  const dispatch = useDispatch();
-
-  const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
-    dispatch(fetchPoll(poll.id));
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
-  return (
-    <span>
-      <button className='underline' onClick={handleRefresh}>
-        <Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text>
-      </button>
-    </span>
-  );
-};
-
-const VoteButton: React.FC<{ poll: PollEntity, selected: Selected }> = ({ poll, selected }): JSX.Element => {
-  const dispatch = useDispatch();
-  const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
-
-  return (
-    <Button onClick={handleVote} theme='primary' block>
-      <FormattedMessage id='poll.vote' defaultMessage='Vote' />
-    </Button>
-  );
-};
-
-interface IPollFooter {
-  poll: PollEntity,
-  showResults: boolean,
-  selected: Selected,
-}
-
-const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {
-  const intl = useIntl();
-  const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp weight='medium' timestamp={poll.expires_at} futureDate />;
-
-  return (
-    <Stack space={4}>
-      {!showResults && <div><VoteButton poll={poll} selected={selected} /></div>}
-
-      <HStack space={1.5} alignItems='center'>
-        {showResults && (
-          <>
-            <RefreshButton poll={poll} />
-            <Text theme='muted'>&middot;</Text>
-          </>
-        )}
-
-        <Text theme='muted' weight='medium'>
-          <FormattedMessage
-            id='poll.total_votes'
-            defaultMessage='{count, plural, one {# vote} other {# votes}}'
-            values={{ count: poll.votes_count }}
-          />
-        </Text>
-
-        {poll.expires_at && (
-          <>
-            <Text theme='muted'>&middot;</Text>
-            <Text weight='medium' theme='muted'>{timeRemaining}</Text>
-          </>
-        )}
-      </HStack>
-    </Stack>
-  );
-};
-
-type Selected = Record<number, boolean>;
-
-interface IPoll {
-  id: string,
-  status?: string,
-}
-
-const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
-  const dispatch = useDispatch();
-
-  const me = useAppSelector((state) => state.me);
-  const poll = useAppSelector((state) => state.polls.get(id));
-
-  const [selected, setSelected] = useState({} as Selected);
-
-  const openUnauthorizedModal = () => {
-    dispatch(openModal('UNAUTHORIZED', {
-      action: 'POLL_VOTE',
-      ap_id: status,
-    }));
-  };
-
-  const toggleOption = (value: number) => {
-    if (me) {
-      if (poll?.multiple) {
-        const tmp = { ...selected };
-        if (tmp[value]) {
-          delete tmp[value];
-        } else {
-          tmp[value] = true;
-        }
-        setSelected(tmp);
-      } else {
-        const tmp: Selected = {};
-        tmp[value] = true;
-        setSelected(tmp);
-      }
-    } else {
-      openUnauthorizedModal();
-    }
-  };
-
-  if (!poll) return null;
-
-  const showResults = poll.voted || poll.expired;
-
-  return (
-    <div onClick={e => e.stopPropagation()}>
-      <Stack space={4} className={classNames('mt-4', { voted: poll.voted })}>
-        <Stack space={2}>
-          {poll.options.map((option, i) => (
-            <PollOption
-              key={i}
-              poll={poll}
-              option={option}
-              index={i}
-              showResults={showResults}
-              active={!!selected[i]}
-              onToggle={toggleOption}
-            />
-          ))}
-        </Stack>
-
-        <PollFooter
-          poll={poll}
-          showResults={showResults}
-          selected={selected}
-        />
-      </Stack>
-    </div>
-  );
-};
-
-export default Poll;
diff --git a/app/soapbox/components/polls/poll-footer.tsx b/app/soapbox/components/polls/poll-footer.tsx
new file mode 100644
index 000000000..386d25180
--- /dev/null
+++ b/app/soapbox/components/polls/poll-footer.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { fetchPoll, vote } from 'soapbox/actions/polls';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import RelativeTimestamp from '../relative_timestamp';
+import { Button, HStack, Stack, Text } from '../ui';
+
+import type { Selected } from './poll';
+import type { Poll as PollEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  closed: { id: 'poll.closed', defaultMessage: 'Closed' },
+});
+
+interface IPollFooter {
+  poll: PollEntity,
+  showResults: boolean,
+  selected: Selected,
+}
+
+const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
+
+  const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
+    dispatch(fetchPoll(poll.id));
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const timeRemaining = poll.expired ?
+    intl.formatMessage(messages.closed) :
+    <RelativeTimestamp weight='medium' timestamp={poll.expires_at} futureDate />;
+
+  return (
+    <Stack space={4}>
+      {(!showResults && poll?.multiple) && (
+        <Button onClick={handleVote} theme='primary' block>
+          <FormattedMessage id='poll.vote' defaultMessage='Vote' />
+        </Button>
+      )}
+
+      <HStack space={1.5} alignItems='center'>
+        {showResults && (
+          <>
+            <button className='text-gray-600 underline' onClick={handleRefresh}>
+              <Text theme='muted' weight='medium'>
+                <FormattedMessage id='poll.refresh' defaultMessage='Refresh' />
+              </Text>
+            </button>
+
+            <Text theme='muted'>&middot;</Text>
+          </>
+        )}
+
+        <Text theme='muted' weight='medium'>
+          <FormattedMessage
+            id='poll.total_votes'
+            defaultMessage='{count, plural, one {# vote} other {# votes}}'
+            values={{ count: poll.votes_count }}
+          />
+        </Text>
+
+        {poll.expires_at && (
+          <>
+            <Text theme='muted'>&middot;</Text>
+            <Text weight='medium' theme='muted'>{timeRemaining}</Text>
+          </>
+        )}
+      </HStack>
+    </Stack>
+  );
+};
+
+export default PollFooter;
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
new file mode 100644
index 000000000..6c8523a2d
--- /dev/null
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -0,0 +1,157 @@
+import classNames from 'classnames';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Motion, presets, spring } from 'react-motion';
+
+import { HStack, Icon, Text } from '../ui';
+
+import type {
+  Poll as PollEntity,
+  PollOption as PollOptionEntity,
+} from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  closed: { id: 'poll.closed', defaultMessage: 'Closed' },
+  voted: { id: 'poll.voted', defaultMessage: 'You voted for this answer' },
+  votes: { id: 'poll.votes', defaultMessage: '{votes, plural, one {# vote} other {# votes}}' },
+});
+
+const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ percent, leading }): JSX.Element => {
+  return (
+    <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
+      {({ width }) => (
+        <span
+          className='absolute inset-0 h-full inline-block bg-primary-100 rounded-l-md'
+          style={{ width: `${width}%` }}
+        />
+      )}
+    </Motion>
+  );
+};
+
+interface IPollOptionText extends IPollOption {
+  percent: number,
+}
+
+const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, onToggle }) => {
+  const handleOptionChange: React.EventHandler<React.ChangeEvent> = () => onToggle(index);
+
+  const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      onToggle(index);
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <label
+      className={
+        classNames('flex relative p-2 bg-white cursor-pointer rounded-full border border-solid hover:bg-primary-50', {
+          'border-primary-600 ring-1 ring-primary-600 bg-primary-50': active,
+          'border-primary-300': !active,
+        })
+      }
+    >
+      <input
+        className='hidden'
+        name='vote-options'
+        type={poll.multiple ? 'checkbox' : 'radio'}
+        value={index}
+        checked={active}
+        onChange={handleOptionChange}
+      />
+
+      <div className='grid items-center w-full'>
+        <div className='col-start-1 row-start-1 justify-self-center ml-4 mr-6'>
+          <Text
+            theme='primary'
+            weight='medium'
+            dangerouslySetInnerHTML={{ __html: option.title_emojified }}
+          />
+        </div>
+
+        <div className='col-start-1 row-start-1 justify-self-end flex items-center'>
+          <span
+            className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
+              'bg-primary-600 border-primary-600': active,
+              'border-primary-300 bg-white': !active,
+            })}
+            tabIndex={0}
+            role={poll.multiple ? 'checkbox' : 'radio'}
+            onKeyPress={handleOptionKeyPress}
+            aria-checked={active}
+            aria-label={option.title}
+          >
+            {active && (
+              <Icon src={require('@tabler/icons/icons/check.svg')} className='text-white w-4 h-4' />
+            )}
+          </span>
+        </div>
+      </div>
+    </label>
+  );
+};
+
+interface IPollOption {
+  poll: PollEntity,
+  option: PollOptionEntity,
+  index: number,
+  showResults?: boolean,
+  active: boolean,
+  onToggle: (value: number) => void,
+}
+
+const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
+  const { index, poll, option, showResults } = props;
+
+  const intl = useIntl();
+
+  if (!poll) return null;
+
+  const percent = poll.votes_count === 0 ? 0 : (option.votes_count / poll.votes_count) * 100;
+  const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
+  const voted = poll.own_votes?.includes(index);
+  const message = intl.formatMessage(messages.votes, { votes: option.votes_count });
+
+  return (
+    <div key={option.title}>
+      {showResults ? (
+        <div title={voted ? message : undefined}>
+          <HStack
+            justifyContent='between'
+            alignItems='center'
+            className='relative p-2 w-full bg-white rounded-md overflow-hidden'
+          >
+            <PollPercentageBar percent={percent} leading={leading} />
+
+            <Text
+              theme='primary'
+              weight='medium'
+              dangerouslySetInnerHTML={{ __html: option.title_emojified }}
+              className='relative'
+            />
+
+            <HStack space={2} alignItems='center' className='relative'>
+              {voted ? (
+                <Icon
+                  src={require('@tabler/icons/icons/circle-check.svg')}
+                  alt={intl.formatMessage(messages.voted)}
+                  className='text-primary-600 w-4 h-4'
+                />
+              ) : (
+                <div className='svg-icon' />
+              )}
+
+              <Text weight='medium' theme='primary'>{Math.round(percent)}%</Text>
+            </HStack>
+          </HStack>
+        </div>
+      ) : (
+        <PollOptionText percent={percent} {...props} />
+      )}
+    </div>
+  );
+};
+
+export default PollOption;
diff --git a/app/soapbox/components/polls/poll.tsx b/app/soapbox/components/polls/poll.tsx
new file mode 100644
index 000000000..37a2a591a
--- /dev/null
+++ b/app/soapbox/components/polls/poll.tsx
@@ -0,0 +1,89 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+
+import { openModal } from 'soapbox/actions/modals';
+import { vote } from 'soapbox/actions/polls';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import { Stack } from '../ui';
+
+import PollFooter from './poll-footer';
+import PollOption from './poll-option';
+
+export type Selected = Record<number, boolean>;
+
+interface IPoll {
+  id: string,
+  status?: string,
+}
+
+const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
+  const dispatch = useAppDispatch();
+
+  const isLoggedIn = useAppSelector((state) => state.me);
+  const poll = useAppSelector((state) => state.polls.get(id));
+
+  const [selected, setSelected] = useState({} as Selected);
+
+  const openUnauthorizedModal = () =>
+    dispatch(openModal('UNAUTHORIZED', {
+      action: 'POLL_VOTE',
+      ap_id: status,
+    }));
+
+  const handleVote = (selectedId: number) => dispatch(vote(id, [selectedId]));
+
+  const toggleOption = (value: number) => {
+    if (isLoggedIn) {
+      if (poll?.multiple) {
+        const tmp = { ...selected };
+        if (tmp[value]) {
+          delete tmp[value];
+        } else {
+          tmp[value] = true;
+        }
+        setSelected(tmp);
+      } else {
+        const tmp: Selected = {};
+        tmp[value] = true;
+        setSelected(tmp);
+        handleVote(value);
+      }
+    } else {
+      openUnauthorizedModal();
+    }
+  };
+
+  if (!poll) return null;
+
+  const showResults = poll.voted || poll.expired;
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onClick={e => e.stopPropagation()}>
+      <Stack space={4} className={classNames('mt-4', { voted: poll.voted })}>
+        <Stack space={2}>
+          {poll.options.map((option, i) => (
+            <PollOption
+              key={i}
+              poll={poll}
+              option={option}
+              index={i}
+              showResults={showResults}
+              active={!!selected[i]}
+              onToggle={toggleOption}
+            />
+          ))}
+        </Stack>
+
+        <PollFooter
+          poll={poll}
+          showResults={showResults}
+          selected={selected}
+        />
+      </Stack>
+    </div>
+  );
+};
+
+export default Poll;
diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx
index 0420a86c4..40fcf9f56 100644
--- a/app/soapbox/components/status_content.tsx
+++ b/app/soapbox/components/status_content.tsx
@@ -4,13 +4,14 @@ import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
-import Poll from 'soapbox/components/poll';
 import { useSoapboxConfig } from 'soapbox/hooks';
 import { addGreentext } from 'soapbox/utils/greentext';
 import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich_content';
 
 import { isRtl } from '../rtl';
 
+import Poll from './polls/poll';
+
 import type { Status, Mention } from 'soapbox/types/entities';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)

From 06888b8ebcc12a190ec26ce1f391a3e294a4a8e7 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 16 Jun 2022 07:56:16 -0400
Subject: [PATCH 3/9] Undo some accidental changes

---
 .../pleroma-status-with-poll-with-emojis.json |  2 +-
 app/soapbox/components/relative_timestamp.js  | 16 +++----
 app/soapbox/features/test_timeline/index.tsx  |  2 +-
 .../features/ui/components/poll_preview.tsx   | 48 +++++++------------
 4 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/app/soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json b/app/soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json
index 3439ebd8f..76c722a45 100644
--- a/app/soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json
+++ b/app/soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json
@@ -196,7 +196,7 @@
     "expired": false,
     "expires_at": "2022-03-12T01:33:18.000Z",
     "id": "AHHue67gF2JDqCQGhc",
-    "multiple": true,
+    "multiple": false,
     "options": [
       {
         "title": "Regular emoji 😍 ",
diff --git a/app/soapbox/components/relative_timestamp.js b/app/soapbox/components/relative_timestamp.js
index f6eda412d..eaffbafe4 100644
--- a/app/soapbox/components/relative_timestamp.js
+++ b/app/soapbox/components/relative_timestamp.js
@@ -33,8 +33,8 @@ const shortDateFormatOptions = {
 
 const SECOND = 1000;
 const MINUTE = 1000 * 60;
-const HOUR = 1000 * 60 * 60;
-const DAY = 1000 * 60 * 60 * 24;
+const HOUR   = 1000 * 60 * 60;
+const DAY    = 1000 * 60 * 60 * 24;
 
 const MAX_DELAY = 2147483647;
 
@@ -160,12 +160,12 @@ class RelativeTimestamp extends React.Component {
   _scheduleNextUpdate() {
     clearTimeout(this._timer);
 
-    const { timestamp } = this.props;
-    const delta = (new Date(timestamp)).getTime() - this.state.now;
-    const unitDelay = getUnitDelay(selectUnits(delta));
-    const unitRemainder = Math.abs(delta % unitDelay);
+    const { timestamp }  = this.props;
+    const delta          = (new Date(timestamp)).getTime() - this.state.now;
+    const unitDelay      = getUnitDelay(selectUnits(delta));
+    const unitRemainder  = Math.abs(delta % unitDelay);
     const updateInterval = 1000 * 10;
-    const delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
+    const delay          = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
 
     this._timer = setTimeout(() => {
       this.setState({ now: Date.now() });
@@ -175,7 +175,7 @@ class RelativeTimestamp extends React.Component {
   render() {
     const { timestamp, intl, year, futureDate, ...textProps } = this.props;
 
-    const date = new Date(timestamp);
+    const date         = new Date(timestamp);
     const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now) : timeAgoString(intl, date, this.state.now, year);
 
     return (
diff --git a/app/soapbox/features/test_timeline/index.tsx b/app/soapbox/features/test_timeline/index.tsx
index c15116a58..024f38204 100644
--- a/app/soapbox/features/test_timeline/index.tsx
+++ b/app/soapbox/features/test_timeline/index.tsx
@@ -18,9 +18,9 @@ const messages = defineMessages({
  * These get embedded into the build, but only in this chunk, so it's okay.
  */
 const MOCK_STATUSES: any[] = [
-  require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
   require('soapbox/__fixtures__/pleroma-status-with-poll.json'),
   require('soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json'),
+  require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
   require('soapbox/__fixtures__/pleroma-quote-of-quote-post.json'),
   require('soapbox/__fixtures__/truthsocial-status-with-external-video.json'),
 ];
diff --git a/app/soapbox/features/ui/components/poll_preview.tsx b/app/soapbox/features/ui/components/poll_preview.tsx
index fcabbe02b..3d3b48408 100644
--- a/app/soapbox/features/ui/components/poll_preview.tsx
+++ b/app/soapbox/features/ui/components/poll_preview.tsx
@@ -1,44 +1,30 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { Stack } from 'soapbox/components/ui';
 import { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
 
 interface IPollPreview {
   poll: PollEntity,
 }
 
-
-// {/* <li key={index}>
-//   <label className={classNames('poll__text', { selectable: !showResults })}>
-//     <input
-//       name='vote-options'
-//       type={poll.multiple ? 'checkbox' : 'radio'}
-//       disabled
-//     />
-
-//     <span className={classNames('poll__input', { checkbox: poll.multiple })} />
-
-//     <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
-//   </label>
-// </li> */}
-
 const PollPreview: React.FC<IPollPreview> = ({ poll }) => {
   const renderOption = (option: PollOptionEntity, index: number) => {
     const showResults = poll.voted || poll.expired;
 
     return (
-      <label className='rounded-tl-md rounded-tr-md relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-3 focus:outline-none'>
-        <span className='flex items-center text-sm'>
-          <input type='radio' name='pricing-plan' value='Startup' className='h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500' aria-labelledby='pricing-plans-0-label' aria-describedby='pricing-plans-0-description-0 pricing-plans-0-description-1' />
-          <span id='pricing-plans-0-label' className='ml-3 font-medium'>Startup</span>
-        </span>
-        <span id='pricing-plans-0-description-0' className='ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center'>
-          <span className='font-medium'>$29 / mo</span>
-          <span>($290 / yr)</span>
-        </span>
-        <span id='pricing-plans-0-description-1' className='ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right'>Up to 5 active job postings</span>
-      </label>
+      <li key={index}>
+        <label className={classNames('poll__text', { selectable: !showResults })}>
+          <input
+            name='vote-options'
+            type={poll.multiple ? 'checkbox' : 'radio'}
+            disabled
+          />
+
+          <span className={classNames('poll__input', { checkbox: poll.multiple })} />
+
+          <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
+        </label>
+      </li>
     );
   };
 
@@ -47,9 +33,11 @@ const PollPreview: React.FC<IPollPreview> = ({ poll }) => {
   }
 
   return (
-    <Stack>
-      {poll.options.map((option, i) => renderOption(option, i))}
-    </Stack>
+    <div className='poll'>
+      <ul>
+        {poll.options.map((option, i) => renderOption(option, i))}
+      </ul>
+    </div>
   );
 };
 

From a66814d11dc12322903c019e78c2edaed40f51a4 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 16 Jun 2022 09:20:33 -0400
Subject: [PATCH 4/9] Add tests for PollFooter

---
 .../polls/__tests__/poll-footer.test.tsx      | 103 ++++++++++++++++++
 app/soapbox/components/polls/poll-footer.tsx  |   4 +-
 app/soapbox/components/polls/poll.tsx         |   2 +-
 3 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/components/polls/__tests__/poll-footer.test.tsx

diff --git a/app/soapbox/components/polls/__tests__/poll-footer.test.tsx b/app/soapbox/components/polls/__tests__/poll-footer.test.tsx
new file mode 100644
index 000000000..2f4f21a6f
--- /dev/null
+++ b/app/soapbox/components/polls/__tests__/poll-footer.test.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+
+import { normalizePoll } from 'soapbox/normalizers/poll';
+
+import { render, screen } from '../../../jest/test-helpers';
+import PollFooter from '../poll-footer';
+
+
+let poll = normalizePoll({
+  options: [{ title: 'Apples', votes_count: 0 }],
+  emojis: [],
+  expired: false,
+  expires_at: '2020-03-24T19:33:06.000Z',
+  multiple: true,
+  voters_count: 0,
+  votes_count: 0,
+  own_votes: null,
+  voted: false,
+});
+
+describe('<PollFooter />', () => {
+  describe('with "showResults" enabled', () => {
+    it('renders the Refresh button', () => {
+      render(<PollFooter poll={poll} showResults selected={{}} />);
+
+      expect(screen.getByTestId('poll-footer')).toHaveTextContent('Refresh');
+    });
+
+    it('does not render the Vote button', () => {
+      render(<PollFooter poll={poll} showResults selected={{}} />);
+
+      expect(screen.queryAllByTestId('button')).toHaveLength(0);
+    });
+
+    describe('when the Poll has not expired', () => {
+      beforeEach(() => {
+        poll = normalizePoll({
+          ...poll.toJS(),
+          expired: false,
+        });
+      });
+
+      it('renders time remaining', () => {
+        render(<PollFooter poll={poll} showResults selected={{}} />);
+
+        expect(screen.getByTestId('poll-expiration')).toHaveTextContent('Moments remaining');
+      });
+    });
+
+    describe('when the Poll has expired', () => {
+      beforeEach(() => {
+        poll = normalizePoll({
+          ...poll.toJS(),
+          expired: true,
+        });
+      });
+
+      it('renders closed', () => {
+        render(<PollFooter poll={poll} showResults selected={{}} />);
+
+        expect(screen.getByTestId('poll-expiration')).toHaveTextContent('Closed');
+      });
+    });
+  });
+
+  describe('with "showResults" disabled', () => {
+    it('does not render the Refresh button', () => {
+      render(<PollFooter poll={poll} showResults={false} selected={{}} />);
+
+      expect(screen.getByTestId('poll-footer')).not.toHaveTextContent('Refresh');
+    });
+
+    describe('when the Poll is multiple', () => {
+      beforeEach(() => {
+        poll = normalizePoll({
+          ...poll.toJS(),
+          multiple: true,
+        });
+      });
+
+      it('renders the Vote button', () => {
+        render(<PollFooter poll={poll} showResults={false} selected={{}} />);
+
+        expect(screen.getByTestId('button')).toHaveTextContent('Vote');
+      });
+    });
+
+    describe('when the Poll is not multiple', () => {
+      beforeEach(() => {
+        poll = normalizePoll({
+          ...poll.toJS(),
+          multiple: false,
+        });
+      });
+
+      it('does not render the Vote button', () => {
+        render(<PollFooter poll={poll} showResults={false} selected={{}} />);
+
+        expect(screen.queryAllByTestId('button')).toHaveLength(0);
+      });
+    });
+  });
+});
diff --git a/app/soapbox/components/polls/poll-footer.tsx b/app/soapbox/components/polls/poll-footer.tsx
index 386d25180..ad3db5dbd 100644
--- a/app/soapbox/components/polls/poll-footer.tsx
+++ b/app/soapbox/components/polls/poll-footer.tsx
@@ -37,7 +37,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
     <RelativeTimestamp weight='medium' timestamp={poll.expires_at} futureDate />;
 
   return (
-    <Stack space={4}>
+    <Stack space={4} data-testid='poll-footer'>
       {(!showResults && poll?.multiple) && (
         <Button onClick={handleVote} theme='primary' block>
           <FormattedMessage id='poll.vote' defaultMessage='Vote' />
@@ -68,7 +68,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
         {poll.expires_at && (
           <>
             <Text theme='muted'>&middot;</Text>
-            <Text weight='medium' theme='muted'>{timeRemaining}</Text>
+            <Text weight='medium' theme='muted' data-testid='poll-expiration'>{timeRemaining}</Text>
           </>
         )}
       </HStack>
diff --git a/app/soapbox/components/polls/poll.tsx b/app/soapbox/components/polls/poll.tsx
index 37a2a591a..3a96c34ff 100644
--- a/app/soapbox/components/polls/poll.tsx
+++ b/app/soapbox/components/polls/poll.tsx
@@ -61,7 +61,7 @@ const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div onClick={e => e.stopPropagation()}>
-      <Stack space={4} className={classNames('mt-4', { voted: poll.voted })}>
+      <Stack space={4} className={classNames('mt-4')}>
         <Stack space={2}>
           {poll.options.map((option, i) => (
             <PollOption

From 7a7fda0c08d491fc0a447fdecc2b423c5de25194 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 16 Jun 2022 11:08:57 -0400
Subject: [PATCH 5/9] Improve PollPreview

---
 .../components/scheduled_status.tsx           |   2 +-
 .../features/ui/components/pending_status.tsx |   2 +-
 .../features/ui/components/poll_preview.tsx   |  49 +++----
 app/styles/application.scss                   |   1 -
 app/styles/polls.scss                         | 131 ------------------
 5 files changed, 23 insertions(+), 162 deletions(-)
 delete mode 100644 app/styles/polls.scss

diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
index 15a8e1ed9..363b267a5 100644
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
+++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
@@ -55,7 +55,7 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
           />
         )}
 
-        {status.poll && <PollPreview poll={status.poll as PollEntity} />}
+        {status.poll && <PollPreview pollId={status.poll as string} />}
 
         <ScheduledStatusActionBar status={status} {...other} />
       </div>
diff --git a/app/soapbox/features/ui/components/pending_status.tsx b/app/soapbox/features/ui/components/pending_status.tsx
index 9e7bfaef1..26afa0f3e 100644
--- a/app/soapbox/features/ui/components/pending_status.tsx
+++ b/app/soapbox/features/ui/components/pending_status.tsx
@@ -81,7 +81,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
 
             <PendingStatusMedia status={status} />
 
-            {status.poll && <PollPreview poll={status.poll as PollEntity} />}
+            {status.poll && <PollPreview pollId={status.poll as string} />}
 
             {status.quote && <QuotedStatus statusId={status.quote as string} />}
           </div>
diff --git a/app/soapbox/features/ui/components/poll_preview.tsx b/app/soapbox/features/ui/components/poll_preview.tsx
index 3d3b48408..af8bef06f 100644
--- a/app/soapbox/features/ui/components/poll_preview.tsx
+++ b/app/soapbox/features/ui/components/poll_preview.tsx
@@ -1,43 +1,36 @@
-import classNames from 'classnames';
+import noop from 'lodash/noop';
 import React from 'react';
 
-import { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
+import PollOption from 'soapbox/components/polls/poll-option';
+import { Stack } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { Poll as PollEntity } from 'soapbox/types/entities';
 
 interface IPollPreview {
-  poll: PollEntity,
+  pollId: string,
 }
 
-const PollPreview: React.FC<IPollPreview> = ({ poll }) => {
-  const renderOption = (option: PollOptionEntity, index: number) => {
-    const showResults = poll.voted || poll.expired;
-
-    return (
-      <li key={index}>
-        <label className={classNames('poll__text', { selectable: !showResults })}>
-          <input
-            name='vote-options'
-            type={poll.multiple ? 'checkbox' : 'radio'}
-            disabled
-          />
-
-          <span className={classNames('poll__input', { checkbox: poll.multiple })} />
-
-          <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
-        </label>
-      </li>
-    );
-  };
+const PollPreview: React.FC<IPollPreview> = ({ pollId }) => {
+  const poll = useAppSelector((state) => state.polls.get(pollId) as PollEntity);
 
   if (!poll) {
     return null;
   }
 
   return (
-    <div className='poll'>
-      <ul>
-        {poll.options.map((option, i) => renderOption(option, i))}
-      </ul>
-    </div>
+    <Stack space={2}>
+      {poll.options.map((option, i) => (
+        <PollOption
+          key={i}
+          poll={poll}
+          option={option}
+          index={i}
+          showResults={false}
+          active={false}
+          onToggle={noop}
+        />
+      ))}
+    </Stack>
   );
 };
 
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 12e286976..73622665e 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -18,7 +18,6 @@
 @import 'boost';
 @import 'loading';
 @import 'ui';
-@import 'polls';
 // @import 'introduction';
 @import 'emoji_picker';
 @import 'about';
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
deleted file mode 100644
index 2d0dd4142..000000000
--- a/app/styles/polls.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-.poll {
-  margin-top: 16px;
-  font-size: 14px;
-
-  li {
-    margin-bottom: 10px;
-    position: relative;
-  }
-
-  &__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] {
-      @apply border border-solid border-primary-600;
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      font-size: 14px;
-      outline: 0;
-      font-family: inherit;
-      border-radius: 4px;
-      padding: 6px 10px;
-
-      &:focus {
-        @apply border border-solid border-primary-500;
-      }
-    }
-
-    &.selectable {
-      cursor: pointer;
-    }
-
-    &.editable {
-      display: flex;
-      align-items: center;
-      overflow: visible;
-
-      .autosuggest-input {
-        width: 100%;
-      }
-    }
-  }
-
-  &__input {
-    @apply border border-solid border-primary-600;
-    display: inline-block;
-    position: relative;
-    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;
-    }
-  }
-
-  .button {
-    height: 36px;
-    padding: 0 16px;
-    margin-right: 10px;
-    font-size: 14px;
-  }
-
-  &__cancel {
-    @apply h-5;
-
-    .svg-icon {
-      @apply h-5 w-5;
-    }
-  }
-}
-
-.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);
-    }
-  }
-}

From dcde237fc9fec9db016c81f6ac3bd1efa3508b57 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 16 Jun 2022 11:40:58 -0400
Subject: [PATCH 6/9] Add test for handling the Refresh button

---
 .../polls/__tests__/poll-footer.test.tsx      | 32 +++++++++++++++++--
 app/soapbox/components/polls/poll-footer.tsx  |  2 +-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/polls/__tests__/poll-footer.test.tsx b/app/soapbox/components/polls/__tests__/poll-footer.test.tsx
index 2f4f21a6f..7265f7e1c 100644
--- a/app/soapbox/components/polls/__tests__/poll-footer.test.tsx
+++ b/app/soapbox/components/polls/__tests__/poll-footer.test.tsx
@@ -1,12 +1,16 @@
+import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { Provider } from 'react-redux';
 
+import { __stub } from 'soapbox/api';
 import { normalizePoll } from 'soapbox/normalizers/poll';
 
-import { render, screen } from '../../../jest/test-helpers';
+import { mockStore, render, rootReducer, screen } from '../../../jest/test-helpers';
 import PollFooter from '../poll-footer';
 
-
 let poll = normalizePoll({
+  id: 1,
   options: [{ title: 'Apples', votes_count: 0 }],
   emojis: [],
   expired: false,
@@ -26,6 +30,30 @@ describe('<PollFooter />', () => {
       expect(screen.getByTestId('poll-footer')).toHaveTextContent('Refresh');
     });
 
+    it('responds to the Refresh button', async() => {
+      __stub((mock) => {
+        mock.onGet('/api/v1/polls/1').reply(200, {});
+      });
+
+      const user = userEvent.setup();
+      const store = mockStore(rootReducer(undefined, {}));
+      render(
+        <Provider store={store}>
+          <IntlProvider locale='en'>
+            <PollFooter poll={poll} showResults selected={{}} />
+          </IntlProvider>
+        </Provider>,
+      );
+
+      await user.click(screen.getByTestId('poll-refresh'));
+      const actions = store.getActions();
+      expect(actions).toEqual([
+        { type: 'POLL_FETCH_REQUEST' },
+        { type: 'POLLS_IMPORT', polls: [{}] },
+        { type: 'POLL_FETCH_SUCCESS', poll: {} },
+      ]);
+    });
+
     it('does not render the Vote button', () => {
       render(<PollFooter poll={poll} showResults selected={{}} />);
 
diff --git a/app/soapbox/components/polls/poll-footer.tsx b/app/soapbox/components/polls/poll-footer.tsx
index ad3db5dbd..bfa105ebd 100644
--- a/app/soapbox/components/polls/poll-footer.tsx
+++ b/app/soapbox/components/polls/poll-footer.tsx
@@ -47,7 +47,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
       <HStack space={1.5} alignItems='center'>
         {showResults && (
           <>
-            <button className='text-gray-600 underline' onClick={handleRefresh}>
+            <button className='text-gray-600 underline' onClick={handleRefresh} data-testid='poll-refresh'>
               <Text theme='muted' weight='medium'>
                 <FormattedMessage id='poll.refresh' defaultMessage='Refresh' />
               </Text>

From 4687f9b79b00632629e06c4deb1341d857904346 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 16 Jun 2022 11:47:57 -0400
Subject: [PATCH 7/9] Lint

---
 .../features/scheduled_statuses/components/scheduled_status.tsx | 2 +-
 app/soapbox/features/ui/components/pending_status.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
index 363b267a5..65a90ad50 100644
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
+++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
@@ -13,7 +13,7 @@ import { buildStatus } from '../builder';
 
 import ScheduledStatusActionBar from './scheduled_status_action_bar';
 
-import type { Account as AccountEntity, Poll as PollEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 interface IScheduledStatus {
   statusId: string,
diff --git a/app/soapbox/features/ui/components/pending_status.tsx b/app/soapbox/features/ui/components/pending_status.tsx
index 26afa0f3e..70ab0ccfe 100644
--- a/app/soapbox/features/ui/components/pending_status.tsx
+++ b/app/soapbox/features/ui/components/pending_status.tsx
@@ -14,7 +14,7 @@ import { buildStatus } from '../util/pending_status_builder';
 
 import PollPreview from './poll_preview';
 
-import type { Account as AccountEntity, Poll as PollEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 const shouldHaveCard = (pendingStatus: StatusEntity) => {
   return Boolean(pendingStatus.content.match(/https?:\/\/\S*/));

From 2f4f2c02b1a8739e95afa0bac2a7282db9cfe2a9 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 16 Jun 2022 14:22:00 -0400
Subject: [PATCH 8/9] Dark mode support for Polls

---
 app/soapbox/components/polls/poll-option.tsx | 48 +++++++++++---------
 app/soapbox/components/status_content.tsx    |  2 +-
 app/soapbox/components/ui/text/text.tsx      |  2 +-
 app/styles/components/status.scss            |  2 +-
 4 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index 6c8523a2d..7aa68667e 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -21,7 +21,7 @@ const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ pe
     <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
       {({ width }) => (
         <span
-          className='absolute inset-0 h-full inline-block bg-primary-100 rounded-l-md'
+          className='absolute inset-0 h-full inline-block bg-primary-100 dark:bg-primary-500 rounded-l-md'
           style={{ width: `${width}%` }}
         />
       )}
@@ -47,9 +47,9 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
   return (
     <label
       className={
-        classNames('flex relative p-2 bg-white cursor-pointer rounded-full border border-solid hover:bg-primary-50', {
-          'border-primary-600 ring-1 ring-primary-600 bg-primary-50': active,
-          'border-primary-300': !active,
+        classNames('flex relative p-2 bg-white dark:bg-primary-900 cursor-pointer rounded-full border border-solid hover:bg-primary-50 dark:hover:bg-primary-800/50', {
+          'border-primary-600 ring-1 ring-primary-600 bg-primary-50 dark:bg-primary-800/50 dark:border-primary-300 dark:ring-primary-300': active,
+          'border-primary-300 dark:border-primary-500': !active,
         })
       }
     >
@@ -64,18 +64,20 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
 
       <div className='grid items-center w-full'>
         <div className='col-start-1 row-start-1 justify-self-center ml-4 mr-6'>
-          <Text
-            theme='primary'
-            weight='medium'
-            dangerouslySetInnerHTML={{ __html: option.title_emojified }}
-          />
+          <div className='text-primary-600 dark:text-white'>
+            <Text
+              theme='inherit'
+              weight='medium'
+              dangerouslySetInnerHTML={{ __html: option.title_emojified }}
+            />
+          </div>
         </div>
 
         <div className='col-start-1 row-start-1 justify-self-end flex items-center'>
           <span
             className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
-              'bg-primary-600 border-primary-600': active,
-              'border-primary-300 bg-white': !active,
+              'bg-primary-600 border-primary-600 dark:bg-primary-300 dark:border-primary-300': active,
+              'border-primary-300 bg-white dark:bg-primary-900 dark:border-primary-500': !active,
             })}
             tabIndex={0}
             role={poll.multiple ? 'checkbox' : 'radio'}
@@ -84,7 +86,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/icons/check.svg')} className='text-white w-4 h-4' />
+              <Icon src={require('@tabler/icons/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
             )}
           </span>
         </div>
@@ -121,29 +123,33 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
           <HStack
             justifyContent='between'
             alignItems='center'
-            className='relative p-2 w-full bg-white rounded-md overflow-hidden'
+            className='relative p-2 w-full bg-white dark:bg-primary-800 rounded-md overflow-hidden'
           >
             <PollPercentageBar percent={percent} leading={leading} />
 
-            <Text
-              theme='primary'
-              weight='medium'
-              dangerouslySetInnerHTML={{ __html: option.title_emojified }}
-              className='relative'
-            />
+            <div className='text-primary-600 dark:text-white'>
+              <Text
+                theme='inherit'
+                weight='medium'
+                dangerouslySetInnerHTML={{ __html: option.title_emojified }}
+                className='relative'
+              />
+            </div>
 
             <HStack space={2} alignItems='center' className='relative'>
               {voted ? (
                 <Icon
                   src={require('@tabler/icons/icons/circle-check.svg')}
                   alt={intl.formatMessage(messages.voted)}
-                  className='text-primary-600 w-4 h-4'
+                  className='text-primary-600 dark:text-primary-800 dark:fill-white w-4 h-4'
                 />
               ) : (
                 <div className='svg-icon' />
               )}
 
-              <Text weight='medium' theme='primary'>{Math.round(percent)}%</Text>
+              <div className='text-primary-600 dark:text-white'>
+                <Text weight='medium' theme='inherit'>{Math.round(percent)}%</Text>
+              </div>
             </HStack>
           </HStack>
         </div>
diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx
index 40fcf9f56..ca0c3fca5 100644
--- a/app/soapbox/components/status_content.tsx
+++ b/app/soapbox/components/status_content.tsx
@@ -279,7 +279,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
       output.push(<Poll id={status.poll} key='poll' status={status.url} />);
     }
 
-    return <div className={classNames({ 'bg-gray-100 rounded-md p-4': hasPoll })}>{output}</div>;
+    return <div className={classNames({ 'bg-gray-100 dark:bg-primary-900 rounded-md p-4': hasPoll })}>{output}</div>;
   } else {
     const output = [
       <div
diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index f7513595f..340b55dde 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -15,7 +15,7 @@ const themes = {
   default: 'text-gray-900 dark:text-gray-100',
   danger: 'text-danger-600',
   primary: 'text-primary-600 dark:text-primary-400',
-  muted: 'text-gray-500 dark:text-gray-400',
+  muted: 'text-gray-500 dark:text-gray-300',
   subtle: 'text-gray-400 dark:text-gray-500',
   success: 'text-success-600',
   inherit: 'text-inherit',
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 2b302de85..242d91beb 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -209,7 +209,7 @@
 }
 
 .status__content {
-  @apply text-gray-900 dark:text-gray-300 break-words text-ellipsis overflow-hidden relative;
+  @apply text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-hidden relative;
 
   &:focus {
     @apply outline-none;

From 4ff54095fde058c8e0e008e88edab7d423b7e49b Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 21 Jun 2022 07:35:19 -0400
Subject: [PATCH 9/9] Add help text for selecting multiple

---
 app/soapbox/components/polls/poll-option.tsx |  1 -
 app/soapbox/components/polls/poll.tsx        | 14 +++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index 7aa68667e..427033021 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -11,7 +11,6 @@ import type {
 } from 'soapbox/types/entities';
 
 const messages = defineMessages({
-  closed: { id: 'poll.closed', defaultMessage: 'Closed' },
   voted: { id: 'poll.voted', defaultMessage: 'You voted for this answer' },
   votes: { id: 'poll.votes', defaultMessage: '{votes, plural, one {# vote} other {# votes}}' },
 });
diff --git a/app/soapbox/components/polls/poll.tsx b/app/soapbox/components/polls/poll.tsx
index 3a96c34ff..b6d8a0d0f 100644
--- a/app/soapbox/components/polls/poll.tsx
+++ b/app/soapbox/components/polls/poll.tsx
@@ -1,11 +1,12 @@
 import classNames from 'classnames';
 import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
 import { vote } from 'soapbox/actions/polls';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
-import { Stack } from '../ui';
+import { Stack, Text } from '../ui';
 
 import PollFooter from './poll-footer';
 import PollOption from './poll-option';
@@ -17,8 +18,13 @@ interface IPoll {
   status?: string,
 }
 
+const messages = defineMessages({
+  multiple: { id: 'poll.chooseMultiple', defaultMessage: 'Choose as many as you\'d like.' },
+});
+
 const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
   const dispatch = useAppDispatch();
+  const intl = useIntl();
 
   const isLoggedIn = useAppSelector((state) => state.me);
   const poll = useAppSelector((state) => state.polls.get(id));
@@ -61,6 +67,12 @@ const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div onClick={e => e.stopPropagation()}>
+      {poll.multiple && (
+        <Text theme='muted' size='sm'>
+          {intl.formatMessage(messages.multiple)}
+        </Text>
+      )}
+
       <Stack space={4} className={classNames('mt-4')}>
         <Stack space={2}>
           {poll.options.map((option, i) => (