wip dark mode

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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}

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>
 

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>

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>,
               }}
             />

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'>

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)}
 

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>
 

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

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

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 (

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'])}

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')}`}

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,
         })}
       >

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'>

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