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] 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;