From dbeb292009e984ef981de4b0cb3901a6e6f67367 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 29 Mar 2022 15:40:02 +0200
Subject: [PATCH] wip dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/autosuggest_textarea.js         |  2 +-
 app/soapbox/components/list.js                         |  4 ++--
 app/soapbox/components/scrollable_list.js              |  2 +-
 app/soapbox/components/status.js                       |  2 +-
 app/soapbox/components/thumb_navigation.js             | 10 +++++++---
 app/soapbox/components/ui/form-group/form-group.tsx    |  4 ++--
 app/soapbox/components/ui/modal/modal.tsx              |  4 ++--
 app/soapbox/components/ui/tabs/tabs.css                |  4 ++--
 app/soapbox/components/ui/tabs/tabs.tsx                |  2 +-
 app/soapbox/features/chats/components/audio_toggle.js  |  2 +-
 .../features/compose/components/reply_indicator.js     |  2 +-
 .../features/notifications/components/notification.js  |  2 +-
 app/soapbox/features/notifications/index.js            |  2 +-
 .../features/ui/components/confirmation_modal.js       |  2 +-
 app/styles/components/display-name.scss                |  2 +-
 15 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js
index f64609b60..9b5d186f5 100644
--- a/app/soapbox/components/autosuggest_textarea.js
+++ b/app/soapbox/components/autosuggest_textarea.js
@@ -257,7 +257,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
 
             <Textarea
               ref={this.setTextarea}
-              className={classNames('dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-color-400 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
+              className={classNames('dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
                 'min-h-[100px]': !condensed,
               })}
               id={id}
diff --git a/app/soapbox/components/list.js b/app/soapbox/components/list.js
index 43476dc4c..eb6de5b60 100644
--- a/app/soapbox/components/list.js
+++ b/app/soapbox/components/list.js
@@ -43,10 +43,10 @@ const ListItem = ({ label, hint, children, onClick }) => {
       {...linkProps}
     >
       <div className='flex flex-col py-1.5 pr-4'>
-        <LabelComp htmlFor={domId}>{label}</LabelComp>
+        <LabelComp className='text-black dark:text-white' htmlFor={domId}>{label}</LabelComp>
 
         {hint ? (
-          <span className='text-sm text-gray-500'>{hint}</span>
+          <span className='text-sm text-gray-500 dark:text-gray-400'>{hint}</span>
         ) : null}
       </div>
 
diff --git a/app/soapbox/components/scrollable_list.js b/app/soapbox/components/scrollable_list.js
index 8021acf32..5e2f150d9 100644
--- a/app/soapbox/components/scrollable_list.js
+++ b/app/soapbox/components/scrollable_list.js
@@ -276,7 +276,7 @@ class ScrollableList extends PureComponent {
       <div className={classNames('mt-2', className)} ref={this.setRef}>
         {alwaysPrepend && prepend}
 
-        <div className='bg-primary-50 mt-2 rounded-lg text-center p-8'>
+        <div className='bg-primary-50 dark:bg-slate-700 mt-2 rounded-lg text-center p-8'>
           <Text>{emptyMessage}</Text>
         </div>
       </div>
diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 4de466c05..ef9aafdbe 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -381,7 +381,7 @@ class Status extends ImmutablePureComponent {
               defaultMessage='{name} reposted'
               values={{
                 name: <bdi className='max-w-[100px] truncate pr-1'>
-                  <strong className='text-gray-800' dangerouslySetInnerHTML={displayNameHtml} />
+                  <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
                 </bdi>,
               }}
             />
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
index caf6566f6..8f31e46ca 100644
--- a/app/soapbox/components/thumb_navigation.js
+++ b/app/soapbox/components/thumb_navigation.js
@@ -99,12 +99,16 @@ class ThumbNavigation extends React.PureComponent {
             <NavLink to='/chats' className='thumb-navigation__link'>
               <IconWithCounter
                 src={require('@tabler/icons/icons/messages.svg')}
-                className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
+                className={classNames({
+                  'h-5 w-5': true,
+                  'text-gray-600': location.pathname !== '/chats',
+                  'text-primary-600': location.pathname === '/chats',
+                })}
                 count={chatsCount}
               />
-              <span>
+              <Text tag='span' size='xs'>
                 <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
-              </span>
+              </Text>
             </NavLink>
           ) : (
             <NavLink to='/messages' className='thumb-navigation__link'>
diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index 91924f428..acb78b623 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -24,12 +24,12 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
     <div>
       <label
         htmlFor={formFieldId}
-        className='block text-sm font-medium text-gray-700'
+        className='block text-sm font-medium text-gray-700 dark:text-gray-400'
       >
         {labelText}
       </label>
 
-      <div className='mt-1'>
+      <div className='mt-1 dark:text-white'>
         {firstChild}
         {inputChildren.filter((_, i) => i !== 0)}
 
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index dc77d8f0d..d6d23ce92 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -46,11 +46,11 @@ const Modal: React.FC<IModal> = ({
   }, [buttonRef]);
 
   return (
-    <div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl pointer-events-auto'>
+    <div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 shadow-xl rounded-2xl pointer-events-auto'>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           <div className='w-full flex flex-row justify-between items-center'>
-            <h3 className='text-lg leading-6 font-medium text-gray-900'>
+            <h3 className='text-lg leading-6 font-medium text-gray-900 dark:text-white'>
               {title}
             </h3>
 
diff --git a/app/soapbox/components/ui/tabs/tabs.css b/app/soapbox/components/ui/tabs/tabs.css
index 6218bd801..02f096825 100644
--- a/app/soapbox/components/ui/tabs/tabs.css
+++ b/app/soapbox/components/ui/tabs/tabs.css
@@ -12,9 +12,9 @@
 
 [data-reach-tab] {
   @apply flex-1 flex justify-center py-4 px-1 text-center font-medium text-sm
-  text-gray-500 hover:text-gray-700;
+  text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200;
 }
 
 [data-reach-tab][data-selected] {
-  @apply text-gray-900;
+  @apply text-gray-900 dark:text-white;
 }
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 030911f55..183d74369 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -40,7 +40,7 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
         ref={ref}
       >
         <div
-          className='w-full h-[3px] bg-primary-200 absolute'
+          className='w-full h-[3px] bg-primary-200 dark:bg-slate-600 absolute'
           style={{ top }}
         />
         <div
diff --git a/app/soapbox/features/chats/components/audio_toggle.js b/app/soapbox/features/chats/components/audio_toggle.js
index 1f4e44ed8..f0068d1f3 100644
--- a/app/soapbox/features/chats/components/audio_toggle.js
+++ b/app/soapbox/features/chats/components/audio_toggle.js
@@ -40,7 +40,7 @@ class AudioToggle extends React.PureComponent {
 
   render() {
     const { intl, checked, showLabel } = this.props;
-    const id ='chats-audio-toggle';
+    const id = 'chats-audio-toggle';
     const label = intl.formatMessage(checked ? messages.switchOff : messages.switchOn);
 
     return (
diff --git a/app/soapbox/features/compose/components/reply_indicator.js b/app/soapbox/features/compose/components/reply_indicator.js
index 24deb8906..7063970b3 100644
--- a/app/soapbox/features/compose/components/reply_indicator.js
+++ b/app/soapbox/features/compose/components/reply_indicator.js
@@ -43,7 +43,7 @@ export default class ReplyIndicator extends ImmutablePureComponent {
     }
 
     return (
-      <Stack space={2} className='p-4 rounded-lg bg-gray-100'>
+      <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
         <AccountContainer
           {...actions}
           id={status.getIn(['account', 'id'])}
diff --git a/app/soapbox/features/notifications/components/notification.js b/app/soapbox/features/notifications/components/notification.js
index 7ff10cc2c..77fa5762e 100644
--- a/app/soapbox/features/notifications/components/notification.js
+++ b/app/soapbox/features/notifications/components/notification.js
@@ -27,7 +27,7 @@ function FormattedMessageFixed(props) {
 const buildLink = (account) => (
   <bdi>
     <Permalink
-      className='text-gray-800 font-bold hover:underline'
+      className='text-gray-800 dark:text-gray-200 font-bold hover:underline'
       href={`/@${account.get('acct')}`}
       title={account.get('acct')}
       to={`/@${account.get('acct')}`}
diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index e98b581b8..fe77bee19 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/app/soapbox/features/notifications/index.js
@@ -216,7 +216,7 @@ class Notifications extends React.PureComponent {
         onScrollToTop={this.handleScrollToTop}
         onScroll={this.handleScroll}
         className={classNames({
-          'divide-y divide-gray-200 divide-solid': notificationsToRender.size > 0,
+          'divide-y divide-gray-200 dark:divide-gray-600 divide-solid': notificationsToRender.size > 0,
           'space-y-2': notificationsToRender.size === 0,
         })}
       >
diff --git a/app/soapbox/features/ui/components/confirmation_modal.js b/app/soapbox/features/ui/components/confirmation_modal.js
index ae899dac5..76327ed73 100644
--- a/app/soapbox/features/ui/components/confirmation_modal.js
+++ b/app/soapbox/features/ui/components/confirmation_modal.js
@@ -63,7 +63,7 @@ class ConfirmationModal extends React.PureComponent {
         secondaryText={secondary}
         sectondaryAction={this.handleSecondary}
       >
-        <p className='text-gray-600'>{message}</p>
+        <p className='text-gray-600 dark:text-gray-300'>{message}</p>
 
         <div className='mt-2'>
           {checkbox && <div className='confirmation-modal__checkbox'>
diff --git a/app/styles/components/display-name.scss b/app/styles/components/display-name.scss
index b5bed6ac0..7ae87eff7 100644
--- a/app/styles/components/display-name.scss
+++ b/app/styles/components/display-name.scss
@@ -10,7 +10,7 @@
 .status__display-name,
 .account__display-name {
   strong {
-    color: var(--primary-text-color);
+    @apply text-gray-800 dark:text-gray-200;
   }
 }