Move StatusContent css into status-content.css

app/soapbox/components/status-content.css

@@ -0,0 +1,60 @@
+.status-content strong {
+  @apply font-bold;
+}
+
+.status-content em {
+  @apply italic;
+}
+
+.status-content ul,
+.status-content ol {
+  @apply pl-10 mb-5;
+}
+
+.status-content ul {
+  @apply list-disc list-outside;
+}
+
+.status-content ol {
+  @apply list-decimal list-outside;
+}
+
+.status-content blockquote {
+  @apply py-1 pl-4 mb-5 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400;
+}
+
+.status-content code {
+  @apply cursor-text font-mono;
+}
+
+.status-content p > code,
+.status-content pre {
+  @apply bg-gray-100 dark:bg-primary-800;
+}
+
+/* Inline code */
+.status-content p > code {
+  @apply py-0.5 px-1 rounded-sm;
+}
+
+/* Code block */
+.status-content pre {
+  @apply py-2 px-3 mb-5 leading-6 overflow-x-auto rounded-md break-all;
+}
+
+.status-content pre:last-child {
+  @apply mb-0;
+}
+
+/* Markdown images */
+.status-content img:not(.emojione):not([width][height]) {
+  @apply w-full h-72 object-contain rounded-lg overflow-hidden my-5 block;
+}
+
+.status-content .big-emoji img.emojione {
+  @apply inline w-9 h-9 p-1;
+}
+
+.status-content .status-link {
+  @apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue;
+}

app/soapbox/components/status_content.tsx

@@ -11,6 +11,7 @@ import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich_content';
 import { isRtl } from '../rtl';
 
 import Poll from './polls/poll';
+import './status-content.css';
 
 import type { Status, Mention } from 'soapbox/types/entities';
 
@@ -28,7 +29,7 @@ interface IReadMoreButton {
 
 /** Button to expand a truncated status (due to too much content) */
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
-  <button className='status__content__read-more-button' onClick={onClick}>
+  <button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}>
     <FormattedMessage id='status.read_more' defaultMessage='Read more' />
     <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
   </button>
@@ -216,11 +217,11 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
   const content = { __html: parsedHtml };
   const spoilerContent = { __html: status.spoilerHtml };
   const directionStyle: React.CSSProperties = { direction: 'ltr' };
-  const className = classNames('status__content', {
-    'status__content--with-action': onClick,
+  const className = classNames('status-content', {
+    'cursor-pointer': onClick,
     'status__content--with-spoiler': status.spoiler_text.length > 0,
-    'status__content--collapsed': collapsed,
-    'status__content--big': onlyEmoji,
+    'max-h-[300px]': collapsed,
+    'leading-normal big-emoji': onlyEmoji,
   });
 
   if (isRtl(status.search_index)) {
@@ -286,8 +287,8 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
         ref={node}
         tabIndex={0}
         key='content'
-        className={classNames('status__content', {
-          'status__content--big': onlyEmoji,
+        className={classNames('status-content', {
+          'leading-normal big-emoji': onlyEmoji,
         })}
         style={directionStyle}
         dangerouslySetInnerHTML={content}

app/soapbox/normalizers/soapbox/soapbox_config.ts

@@ -44,6 +44,7 @@ const DEFAULT_COLORS = ImmutableMap<string, any>({
     900: '#7f1d1d',
   }),
   'sea-blue': '#2feecc',
+  'greentext': '#789922',
 });
 
 export const PromoPanelItemRecord = ImmutableRecord({

app/soapbox/utils/greentext.ts

@@ -11,7 +11,7 @@ export const addGreentext = (html: string): string => {
             .replace(/@\w+/gi, '') // remove mentions (even failed ones)
             .trim()
             .startsWith('>')) {
-        return `<span class='greentext'>${string}</span>`;
+        return `<span class='text-greentext'>${string}</span>`;
       } else {
         return string;
       }

app/styles/basics.scss

@@ -99,14 +99,6 @@ noscript {
   }
 }
 
-.floating-link {
-  @apply w-full h-full inset-0 absolute z-10;
-}
-
-.greentext {
-  color: #789922;
-}
-
 // Virtuoso empty placeholder fix.
 // https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506
 div[data-viewport-type="window"] {

app/styles/components/status.scss

@@ -1,125 +1,3 @@
-.status__content {
-  p,
-  li {
-    strong {
-      font-weight: bold;
-    }
-  }
-
-  p,
-  li {
-    em {
-      font-style: italic;
-    }
-  }
-
-  ul,
-  ol {
-    @apply pl-10;
-  }
-
-  ul {
-    list-style: disc outside none;
-  }
-
-  ol {
-    list-style: decimal outside none;
-  }
-
-  blockquote {
-    @apply py-1 pl-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400;
-  }
-
-  code {
-    font-family: 'Roboto Mono', monospace;
-    cursor: text;
-  }
-
-  p > code,
-  pre {
-    @apply bg-gray-100 dark:bg-primary-800;
-  }
-
-  /* Inline code */
-  p > code {
-    padding: 2px 4px;
-    border-radius: 4px;
-  }
-
-  /* Code block */
-  pre {
-    line-height: 1.6em;
-    overflow-x: auto;
-    border-radius: 6px;
-    padding: 8px 12px;
-    margin-bottom: 20px;
-    word-break: break-all;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  /* Markdown images */
-  img:not(.emojione):not([width][height]) {
-    width: 100%;
-    height: 285.188px;
-    object-fit: contain;
-    background: var(--background-color);
-    border-radius: 4px;
-    overflow: hidden;
-    margin: 20px 0;
-    display: block;
-  }
-
-  &--big {
-    line-height: normal !important;
-
-    img.emojione {
-      display: inline;
-      width: 36px;
-      height: 36px;
-      padding: 5px;
-    }
-  }
-
-  &--quote {
-    ul,
-    ol {
-      @apply pl-4;
-    }
-
-    blockquote {
-      @apply pl-2;
-    }
-  }
-}
-
-.status__content > ul,
-.status__content > ol {
-  margin-bottom: 20px;
-}
-
-.status__content > blockquote {
-  margin-bottom: 20px;
-}
-
-.status__content--with-action {
-  cursor: pointer;
-}
-
-.status__content.status__content--collapsed {
-  max-height: 20px * 15; // 15 lines is roughly above 500 characters
-}
-
-.status__content__read-more-button {
-  @apply flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
-}
-
-.status-link {
-  @apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue;
-}
-
 .status {
   @apply min-h-[54px] cursor-default;
 

tailwind.config.js

@@ -35,6 +35,11 @@ module.exports = {
           'Segoe UI Symbol',
           'Noto Color Emoji',
         ],
+        'mono': [
+          'Roboto Mono',
+          'ui-monospace',
+          'mono',
+        ],
       },
       colors: parseColorMatrix({
         // Define color matrix (of available colors)
@@ -49,6 +54,7 @@ module.exports = {
         'gradient-start': true,
         'gradient-end': true,
         'sea-blue': true,
+        'greentext': true,
       }),
       animation: {
         'sonar-scale-4': 'sonar-scale-4 3s linear infinite',