Merge remote-tracking branch 'origin/next' into next-ts-strict

.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/"]}],
+    "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/", "layer"]}],
-    "no-invalid-position-at-import-rule": [true, { "ignoreAtRules": ["/tailwind/"]}]
+    "no-invalid-position-at-import-rule": null
   }
 }

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

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"

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', {
+      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': !transparent,
+        'bg-white dark:bg-transparent': !transparent,
         [className]: typeof className !== 'undefined',
       })}
       {...filteredProps}

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',
+  muted: 'text-gray-500 dark:text-gray-400',
-  subtle: 'text-gray-400',
+  subtle: 'text-gray-400 dark:text-gray-500',
   success: 'text-success-600',
   inherit: 'text-inherit',
   white: 'text-white',

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

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,
+      'status-placeholder bg-white dark:bg-slate-800': true,
-      'sm:shadow-xl sm:rounded-xl px-4 py-6 sm:p-6': !thread,
+      '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'>

app/soapbox/features/ui/components/navbar.tsx

@@ -27,7 +27,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 && (

app/soapbox/hooks/useOnScreen.ts

@@ -8,12 +8,14 @@ export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) =>  {
   );
 
   React.useEffect(() => {
+    if (ref.current) {
       observer.observe(ref.current);
+    }
 
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [ref.current]);
 
   return isIntersecting;
 };

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

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 {