From 793b0f9128f859cd29e69054ab69902ec970904a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Mar 2022 19:18:37 -0500
Subject: [PATCH] Start adding dark mode

---
 .stylelintrc.json                              |  4 ++--
 app/soapbox/components/autosuggest_textarea.js |  2 +-
 app/soapbox/components/status_action_bar.js    |  8 ++++----
 app/soapbox/components/status_list.js          |  2 +-
 app/soapbox/components/ui/card/card.tsx        |  2 +-
 .../components/ui/icon-button/icon-button.tsx  |  4 ++--
 app/soapbox/components/ui/text/text.tsx        |  6 +++---
 .../components/ui/textarea/textarea.tsx        |  2 +-
 app/soapbox/containers/soapbox.js              |  2 +-
 .../components/placeholder_avatar.js           |  2 +-
 .../components/placeholder_display_name.js     |  2 +-
 .../components/placeholder_status.tsx          |  4 ++--
 .../components/placeholder_status_content.js   |  2 +-
 app/styles/application.scss                    |  6 ++++++
 app/styles/components/status.scss              | 18 +++++++++---------
 15 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 403345750..c8a71a164 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -10,7 +10,7 @@
     "font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["ForkAwesome", "Font Awesome 5 Free", "OpenDyslexic", "soapbox"] }],
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
-    "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/"]}],
-    "no-invalid-position-at-import-rule": [true, { "ignoreAtRules": ["/tailwind/"]}]
+    "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/", "layer"]}],
+    "no-invalid-position-at-import-rule": null
   }
 }
diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js
index 6bd4c7d97..f64609b60 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('px-0 border-0 text-gray-800 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-color-400 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/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index 00937f00d..b3bc4786c 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -607,7 +607,7 @@ class StatusActionBar extends ImmutablePureComponent {
         <IconButton
           disabled={!publicStatus}
           className={classNames({
-            'text-gray-400 hover:text-gray-600': !status.get('reblogged'),
+            'text-gray-400 hover:text-gray-600 dark:hover:text-white': !status.get('reblogged'),
             'text-success-600 hover:text-success-600': status.get('reblogged'),
           })}
           title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
@@ -631,7 +631,7 @@ class StatusActionBar extends ImmutablePureComponent {
           title={intl.formatMessage(messages.share)}
           src={require('@tabler/icons/icons/upload.svg')}
           onClick={this.handleShareClick}
-          className='text-gray-400 hover:text-gray-600'
+          className='text-gray-400 hover:text-gray-600 dark:hover:text-white'
         />
       </div>
     );
@@ -643,7 +643,7 @@ class StatusActionBar extends ImmutablePureComponent {
             title={replyTitle}
             src={require('@tabler/icons/icons/message-circle.svg')}
             onClick={this.handleReplyClick}
-            className='text-gray-400 hover:text-gray-600'
+            className='text-gray-400 hover:text-gray-600 dark:hover:text-white'
           />
 
           {replyCount !== 0 ? (
@@ -672,7 +672,7 @@ class StatusActionBar extends ImmutablePureComponent {
           /> */}
           <IconButton
             className={classNames({
-              'text-gray-400 hover:text-gray-600': !meEmojiReact,
+              'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
               'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
             })}
             title={meEmojiTitle}
diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js
index c8bcbb217..251aedae4 100644
--- a/app/soapbox/components/status_list.js
+++ b/app/soapbox/components/status_list.js
@@ -226,7 +226,7 @@ export default class StatusList extends ImmutablePureComponent {
         placeholderComponent={PlaceholderStatus}
         placeholderCount={20}
         ref={this.setRef}
-        className={divideType === 'border' ? 'divide-y divide-solid divide-gray-200' : 'sm:space-y-3 divide-y divide-solid divide-gray-200 sm:divide-none'}
+        className={divideType === 'border' ? 'divide-y divide-solid divide-gray-200 dark:divide-gray-800' : 'sm:space-y-3 divide-y divide-solid divide-gray-200 dark:divide-gray-800 sm:divide-none'}
         {...other}
       >
         {this.renderScrollableContent()}
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 31f8e6931..ab5123455 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -26,7 +26,7 @@ const Card: React.FC<ICard> = React.forwardRef(({ children, variant, size = 'md'
     {...filteredProps}
     className={classNames({
       'space-y-4': true,
-      'bg-white sm:shadow-lg overflow-hidden': variant === 'rounded',
+      'bg-white dark:bg-slate-800 sm:shadow-lg dark:sm:shadow-inset overflow-hidden': variant === 'rounded',
       [sizes[size]]: true,
       [className]: typeof className !== 'undefined',
     })}
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index f52e2193b..158334346 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -23,8 +23,8 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
     <button
       ref={ref}
       type='button'
-      className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500', {
-        'bg-white': !transparent,
+      className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
+        'bg-white dark:bg-transparent': !transparent,
         [className]: typeof className !== 'undefined',
       })}
       {...filteredProps}
diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index de27f34dc..b7815c6a3 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -10,11 +10,11 @@ type Families = 'sans' | 'mono'
 type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
 const themes = {
-  default: 'text-gray-900',
+  default: 'text-gray-900 dark:text-gray-100',
   danger: 'text-danger-600',
   primary: 'text-primary-600',
-  muted: 'text-gray-500',
-  subtle: 'text-gray-400',
+  muted: 'text-gray-500 dark:text-gray-400',
+  subtle: 'text-gray-400 dark:text-gray-500',
   success: 'text-success-600',
   inherit: 'text-inherit',
   white: 'text-white',
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index ff8e2de57..d091f5165 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -18,7 +18,7 @@ const Textarea = React.forwardRef(
         {...props}
         ref={ref}
         className={classNames({
-          'shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md':
+          'dark:bg-slate-800 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md':
               true,
           'font-mono': isCodeEditor,
         })}
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 4dcfdafb7..f9ddf8bb1 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -170,7 +170,7 @@ class SoapboxMount extends React.PureComponent {
           <BrowserRouter basename={FE_SUBDIRECTORY}>
             <>
               <Helmet>
-                {/* <html lang='en' className={this.props.themeMode} /> */}
+                <html lang='en' className={classNames({ dark: this.props.themeMode === 'dark' })} />
                 <body className={bodyClass} />
                 {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
                 <meta name='theme-color' content={this.props.brandColor} />
diff --git a/app/soapbox/features/placeholder/components/placeholder_avatar.js b/app/soapbox/features/placeholder/components/placeholder_avatar.js
index 820db7abb..47cb346aa 100644
--- a/app/soapbox/features/placeholder/components/placeholder_avatar.js
+++ b/app/soapbox/features/placeholder/components/placeholder_avatar.js
@@ -15,7 +15,7 @@ const PlaceholderAvatar = ({ size }) => {
 
   return (
     <div
-      className='rounded-full bg-slate-200'
+      className='rounded-full bg-slate-200 dark:bg-slate-700'
       style={style}
       alt=''
     />
diff --git a/app/soapbox/features/placeholder/components/placeholder_display_name.js b/app/soapbox/features/placeholder/components/placeholder_display_name.js
index 37259eac8..ed71f6420 100644
--- a/app/soapbox/features/placeholder/components/placeholder_display_name.js
+++ b/app/soapbox/features/placeholder/components/placeholder_display_name.js
@@ -8,7 +8,7 @@ const PlaceholderDisplayName = ({ minLength, maxLength }) => {
   const acctLength = randomIntFromInterval(maxLength, minLength);
 
   return (
-    <div className='flex flex-col text-slate-200'>
+    <div className='flex flex-col text-slate-200 dark:text-slate-700'>
       <p>{generateText(length)}</p>
       <p>{generateText(acctLength)}</p>
     </div>
diff --git a/app/soapbox/features/placeholder/components/placeholder_status.tsx b/app/soapbox/features/placeholder/components/placeholder_status.tsx
index ab370b1bd..a11823f8a 100644
--- a/app/soapbox/features/placeholder/components/placeholder_status.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_status.tsx
@@ -12,8 +12,8 @@ interface IPlaceholderStatus {
 const PlaceholderStatus = ({ thread = false }: IPlaceholderStatus) => (
   <div
     className={classNames({
-      'status-placeholder bg-white': true,
-      'sm:shadow-xl sm:rounded-xl px-4 py-6 sm:p-6': !thread,
+      'status-placeholder bg-white dark:bg-slate-800': true,
+      'sm:shadow-xl dark:sm:shadow-inset sm:rounded-xl px-4 py-6 sm:p-6': !thread,
     })}
   >
     <div className='w-full animate-pulse overflow-hidden'>
diff --git a/app/soapbox/features/placeholder/components/placeholder_status_content.js b/app/soapbox/features/placeholder/components/placeholder_status_content.js
index 5da2122fd..84772ccf2 100644
--- a/app/soapbox/features/placeholder/components/placeholder_status_content.js
+++ b/app/soapbox/features/placeholder/components/placeholder_status_content.js
@@ -7,7 +7,7 @@ const PlaceholderStatusContent = ({ minLength, maxLength }) => {
   const length = randomIntFromInterval(maxLength, minLength);
 
   return (
-    <div className='flex flex-col text-slate-200'>
+    <div className='flex flex-col text-slate-200 dark:text-slate-700'>
       <p className='break-words'>{generateText(length)}</p>
     </div>
   );
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 243894ca5..64478a2f5 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -104,6 +104,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  .shadow-inset {
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
+  }
+}
+
 @import 'forms';
 @import 'utilities';
 @import 'components/datepicker';
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 8a85c3067..f2d2e8951 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -160,7 +160,7 @@
 }
 
 .status-link {
-  @apply hover:underline text-primary-600 hover:text-primary-800;
+  @apply hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500;
 }
 
 .status {
@@ -238,7 +238,7 @@
 }
 
 .status__wrapper {
-  @apply bg-white px-4 py-6 sm:shadow-xl sm:p-5 sm:rounded-xl;
+  @apply bg-white dark:bg-slate-800 px-4 py-6 sm:shadow-xl dark:sm:shadow-inset sm:p-5 sm:rounded-xl;
 }
 
 [column-type=filled] .status__wrapper,
@@ -379,7 +379,7 @@
 
 .status__content,
 .reply-indicator__content {
-  @apply text-gray-900 break-words text-ellipsis overflow-hidden relative;
+  @apply text-gray-900 dark:text-gray-300 break-words text-ellipsis overflow-hidden relative;
 
   &:focus {
     @apply outline-none;
@@ -410,7 +410,7 @@
   }
 
   a {
-    @apply text-primary-600 hover:underline;
+    @apply text-primary-600 dark:text-primary-400 hover:underline;
 
     .fa {
       color: var(--primary-text-color);
@@ -469,11 +469,11 @@
 }
 
 .status-card {
-  @apply flex text-sm border border-solid border-gray-200 rounded-lg text-gray-800 mt-3 min-h-[150px] no-underline overflow-hidden;
+  @apply flex text-sm border border-solid border-gray-200 dark:border-gray-700 rounded-lg text-gray-800 dark:text-gray-200 mt-3 min-h-[150px] no-underline overflow-hidden;
 }
 
 a.status-card {
-  @apply cursor-pointer hover:bg-gray-50 hover:no-underline;
+  @apply cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 hover:no-underline;
 }
 
 .status-card-photo {
@@ -489,7 +489,7 @@ a.status-card {
 }
 
 .status-card__title {
-  @apply block font-medium mb-2 text-gray-800 no-underline;
+  @apply block font-medium mb-2 text-gray-800 dark:text-gray-200 no-underline;
 }
 
 .status-card__content {
@@ -497,7 +497,7 @@ a.status-card {
 }
 
 .status-card__description {
-  @apply text-gray-500;
+  @apply text-gray-500 dark:text-gray-400;
 }
 
 .status-card__host {
@@ -549,7 +549,7 @@ a.status-card {
 }
 
 .status-card.compact {
-  @apply border-gray-200;
+  @apply border-gray-200 dark:border-gray-700;
 }
 
 .status-card__image-image {