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 1/4] Start adding dark mode

---
 .stylelintrc.json                             |   4 ++--
 .../components/autosuggest_textarea.js        | Bin 8301 -> 8335 bytes
 app/soapbox/components/status_action_bar.js   | Bin 25632 -> 25720 bytes
 app/soapbox/components/status_list.js         | Bin 7302 -> 7344 bytes
 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             | Bin 8661 -> 8686 bytes
 .../components/placeholder_avatar.js          | Bin 498 -> 516 bytes
 .../components/placeholder_display_name.js    | Bin 643 -> 663 bytes
 .../components/placeholder_status.tsx         |   4 ++--
 .../components/placeholder_status_content.js  | Bin 567 -> 587 bytes
 app/styles/application.scss                   |   6 ++++++
 app/styles/components/status.scss             |  18 +++++++++---------
 15 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 4033457508..c8a71a1648 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 6bd4c7d97319088fdae63116f516db8c6de2db2c..f64609b608314c255590e2a5dccc9fb15ce32d27 100644
GIT binary patch
delta 74
zcmaFs(C@h6k+f|}Vo|nLQo3$&PGU)_u7!btLP3SDfkIM#QA%nNkWrFaQKFk(lvoLt
T1FHrLm1ks@q;CEzUBChW`4k$^

delta 40
ucmeBoeCx2`k+gI{g|2}@QhrfNY7vl8l3G!sn_iSyscT_iuvuQFfCT_MHVyIs

diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index 00937f00d8b25f9617cd5b6cd684f83622893837..b3bc4786c3c43d29a96ab6b96723bb2255018a28 100644
GIT binary patch
delta 129
zcmZ2*g7L=*#tmYDQVJ=FMcGyv`DLj^RwbzwCA#GqnI);}Rtk!f?M=lu8wNgN7Q?P)
WvvBBDMqF|)!q`}G$-Rp<;s5|K<}gnH

delta 29
lcmexyf^oqK#tmYDn{@*JGH<pIy~?;*E1ZpWvs;W22LQw_3ta#J

diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js
index c8bcbb217bad98fd29f1d784776586880e877bc0..251aedae449ac81fad0822e080b04bb5c0991266 100644
GIT binary patch
delta 54
scmZp(++exklC-cwN@7vARZ3=AW=g7VdQoDfuEpdF(pExPgxO{40WfzHqyPW_

delta 15
WcmdmB*=D)nlJw-~(iW3VWNH96?FMoH

diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 31f8e69318..ab5123455d 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 f52e2193bc..1583343466 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 de27f34dc9..b7815c6a34 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 ff8e2de57b..d091f51652 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 4dcfdafb744186025cb33359ef5870dc41292571..f9ddf8bb1a6eaba9dd7b888a4ac159bb4d5e408f 100644
GIT binary patch
delta 75
zcmccW{LXnpnb_niF=?~poW$Z{zr@_sVvTBrl*FQJD}|Db%woNQqWpqly^@U7+*IHE
clvD*<TU!Nnki5D=t!C|HM;VdLhs1=r0XGU7dH?_b

delta 72
zcmaFoeARhFnV5C8zLtVbMoDgtLQY~{x~+O@p1MMEPGWJfUt(^mZFNaTX0cvDQGP+O
bUP(r3ZmMs7N@}fwzMX=We(mN{Vk+DK(DE7A

diff --git a/app/soapbox/features/placeholder/components/placeholder_avatar.js b/app/soapbox/features/placeholder/components/placeholder_avatar.js
index 820db7abb01da59f5ab6ddb6cdac7f478dc26dbd..47cb346aa6ef70b86453fb88771021aed5316480 100644
GIT binary patch
delta 28
jcmeyw+`_UUgi$~tC9x>mDk)vJI47|rRo8rS5aR*>iZ%&|

delta 11
ScmZo+`NX^-gmH2j<2(QvWCR-k

diff --git a/app/soapbox/features/placeholder/components/placeholder_display_name.js b/app/soapbox/features/placeholder/components/placeholder_display_name.js
index 37259eac84d1248fc5c2d06fbb743a37d334118d..ed71f64204ee9571459206c03652a8d903ea99a0 100644
GIT binary patch
delta 37
tcmZo>ozA+UhEY@@C9x>mswB0dM7KC6u_RU3+`vG6@<K+*$<r9$0s!g8488yW

delta 12
TcmbQv+RVD4hH>)*Ms`L38(jmQ

diff --git a/app/soapbox/features/placeholder/components/placeholder_status.tsx b/app/soapbox/features/placeholder/components/placeholder_status.tsx
index ab370b1bd0..a11823f8a8 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 5da2122fdf8a0b85c9e4b21ce7309fe3ebff2808..84772ccf21d99c802d5d5b8743d20ae7f939a5c2 100644
GIT binary patch
delta 30
lcmdnaa++m>4Wp1kN@7vARY__^iEeRDVo9p5`D81`zW|{=3cvsW

delta 11
ScmX@jvYlmv4ddhh#@_%L@dQ@@

diff --git a/app/styles/application.scss b/app/styles/application.scss
index 243894ca5c..64478a2f56 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 8a85c30675..f2d2e89517 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 {

From 09d3f375d5195bce2da2df50001c70281e3c3a95 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Mar 2022 21:46:59 -0500
Subject: [PATCH 2/4] Dark mode: navbar bg, update snapshots

---
 .../ui/column/__tests__/__snapshots__/column.test.js.snap       | 2 +-
 app/soapbox/features/ui/components/navbar.tsx                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap b/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap
index e33e9b74b0..4c5b293fa1 100644
--- a/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap
+++ b/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap
@@ -6,7 +6,7 @@ exports[`<Column /> renders correctly with minimal props 1`] = `
   role="region"
 >
   <div
-    className="space-y-4 bg-white sm:shadow-lg overflow-hidden p-4 sm:rounded-xl"
+    className="space-y-4 bg-white dark:bg-slate-800 sm:shadow-lg dark:sm:shadow-inset overflow-hidden p-4 sm:rounded-xl"
   >
     <div
       className="mb-4 flex flex-row items-center"
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index d9198ecc43..e4ca72fdcc 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -30,7 +30,7 @@ const Navbar = () => {
   const onOpenSidebar = () => dispatch(openSidebar());
 
   return (
-    <nav className='bg-white shadow z-50 sticky top-0' ref={node}>
+    <nav className='bg-white dark:bg-slate-800 shadow z-50 sticky top-0' ref={node}>
       <div className='max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
         <div className='relative flex justify-between h-12 lg:h-16'>
           {account && (

From 2094f9673dee77fca1c980bc947c72a9e6337f44 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 24 Mar 2022 08:23:18 -0400
Subject: [PATCH 3/4] Fix bug when clicking on a Status

---
 app/soapbox/components/status.js | Bin 21404 -> 21395 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index a2c0869125aafc4ac57bc10c60734634b328676d..4de466c051502d8845a358b58e45036f54ec4c4f 100644
GIT binary patch
delta 18
acmbQUoN@AU#tpIFliS3FH&=Qqa{vHHDh9m(

delta 29
kcmbQdoN>-_#tpIFe98HFC8-r9dPVuAC8<T5le`T%0I_8YQvd(}


From a9c83ed294cf65c8e9c294adb26f2dfc6fef5259 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 24 Mar 2022 11:06:01 -0400
Subject: [PATCH 4/4] Make sure the current element is present before execution

---
 app/soapbox/hooks/useOnScreen.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/hooks/useOnScreen.ts b/app/soapbox/hooks/useOnScreen.ts
index 1ae207326b..7cfd4f2848 100644
--- a/app/soapbox/hooks/useOnScreen.ts
+++ b/app/soapbox/hooks/useOnScreen.ts
@@ -8,12 +8,14 @@ export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) =>  {
   );
 
   React.useEffect(() => {
-    observer.observe(ref.current);
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
 
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [ref.current]);
 
   return isIntersecting;
 };