StatusContent: migrate more to css, fix SpoilerButton on dark theme

app/soapbox/components/status-content.css

@@ -1,3 +1,15 @@
+.status-content p {
+  @apply mb-5 whitespace-pre-wrap;
+}
+
+.status-content p:last-child {
+  @apply mb-0.5;
+}
+
+.status-content a {
+  @apply text-primary-600 dark:text-accent-blue hover:underline;
+}
+
 .status-content strong {
   @apply font-bold;
 }
@@ -46,11 +58,21 @@
   @apply mb-0;
 }
 
+/* Inline emojis */
+.status-content .emojione {
+  @apply w-5 h-5 -mt-[3px] inline;
+}
+
 /* Markdown images */
 .status-content img:not(.emojione):not([width][height]) {
   @apply w-full h-72 object-contain rounded-lg overflow-hidden my-5 block;
 }
 
+/* User setting to underline links */
+body.underline-links .status-content a {
+  @apply underline;
+}
+
 .status-content .big-emoji img.emojione {
   @apply inline w-9 h-9 p-1;
 }

app/soapbox/components/status_content.tsx

@@ -49,7 +49,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ onClick, hidden, tabIndex })
       'inline-block rounded-md px-1.5 py-0.5 ml-[0.5em]',
       'text-gray-900 dark:text-gray-100',
       'font-bold text-[11px] uppercase',
-      'bg-primary-100 dark:bg-primary-900',
+      'bg-primary-100 dark:bg-primary-800',
       'hover:bg-primary-300 dark:hover:bg-primary-600',
       'focus:bg-primary-200 dark:focus:bg-primary-600',
       'hover:no-underline',
@@ -213,13 +213,16 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
   }
 
   const isHidden = onExpandedToggle ? !expanded : hidden;
+  const withSpoiler = status.spoiler_text.length > 0;
+
+  const baseClassName = 'text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-hidden relative focus:outline-none';
 
   const content = { __html: parsedHtml };
   const spoilerContent = { __html: status.spoilerHtml };
   const directionStyle: React.CSSProperties = { direction: 'ltr' };
-  const className = classNames('status-content', {
+  const className = classNames(baseClassName, 'status-content', {
     'cursor-pointer': onClick,
-    'status__content--with-spoiler': status.spoiler_text.length > 0,
+    'whitespace-normal': withSpoiler,
     'max-h-[300px]': collapsed,
     'leading-normal big-emoji': onlyEmoji,
   });
@@ -243,8 +246,10 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
 
         <div
           tabIndex={!isHidden ? 0 : undefined}
-          className={classNames('status__content__text', {
-            'status__content__text--visible': !isHidden,
+          className={classNames({
+            'whitespace-pre-wrap': withSpoiler,
+            'hidden': isHidden,
+            'block': !isHidden,
           })}
           style={directionStyle}
           dangerouslySetInnerHTML={content}
@@ -287,7 +292,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
         ref={node}
         tabIndex={0}
         key='content'
-        className={classNames('status-content', {
+        className={classNames(baseClassName, 'status-content', {
           'leading-normal big-emoji': onlyEmoji,
         })}
         style={directionStyle}

app/styles/components/status.scss

@@ -94,63 +94,6 @@
   padding: 10px;
 }
 
-.status__content {
-  @apply text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-hidden relative;
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &.status__content--with-spoiler {
-    @apply whitespace-normal;
-
-    .status__content__text {
-      @apply whitespace-pre-wrap;
-    }
-  }
-
-  .emojione {
-    width: 20px;
-    height: 20px;
-    margin: -3px 0 0;
-    display: inline;
-  }
-
-  p {
-    margin-bottom: 20px;
-    white-space: pre-wrap;
-
-    &:last-child {
-      margin-bottom: 2px;
-    }
-  }
-
-  a {
-    @apply text-primary-600 dark:text-accent-blue hover:underline;
-
-    .fa {
-      color: var(--primary-text-color);
-    }
-  }
-
-  .status__content__text {
-    display: none;
-
-    &.status__content__text--visible {
-      display: block;
-    }
-  }
-}
-
-.underline-links {
-  .status__content,
-  .reply-indicator__content {
-    a {
-      text-decoration: underline;
-    }
-  }
-}
-
 .focusable:focus,
 .focusable-within:focus-within {
   outline: 0; /* Required b/c HotKeys lib sets this outline */