Merge branch 'status-font-size' into 'develop'

Increase font size of focused status in threads

See merge request soapbox-pub/soapbox!2232

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Chats: improved display of media attachments.
 - ServiceWorker: switch to a network-first strategy. The "An update is available!" prompt goes away.
+- Posts: increased font size of focused status in threads.
 
 ### Fixed
 - Chats: media attachments rendering at the wrong size and/or causing the chat to scroll on load.

app/soapbox/components/status-content.tsx

@@ -13,6 +13,7 @@ import { isRtl } from '../rtl';
 import Markup from './markup';
 import Poll from './polls/poll';
 
+import type { Sizes } from 'soapbox/components/ui/text/text';
 import type { Status, Mention } from 'soapbox/types/entities';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
@@ -35,10 +36,17 @@ interface IStatusContent {
   onClick?: () => void,
   collapsable?: boolean,
   translatable?: boolean,
+  textSize?: Sizes,
 }
 
 /** Renders the text content of a status */
-const StatusContent: React.FC<IStatusContent> = ({ status, onClick, collapsable = false, translatable }) => {
+const StatusContent: React.FC<IStatusContent> = ({
+  status,
+  onClick,
+  collapsable = false,
+  translatable,
+  textSize = 'md',
+}) => {
   const history = useHistory();
 
   const [collapsed, setCollapsed] = useState(false);
@@ -162,6 +170,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, onClick, collapsable
         direction={direction}
         dangerouslySetInnerHTML={content}
         lang={status.language || undefined}
+        size={textSize}
       />,
     ];
 
@@ -187,6 +196,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, onClick, collapsable
         direction={direction}
         dangerouslySetInnerHTML={content}
         lang={status.language || undefined}
+        size={textSize}
       />,
     ];
 

app/soapbox/features/status/components/detailed-status.tsx

@@ -110,7 +110,11 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
           )}
 
           <Stack space={4}>
-            <StatusContent status={actualStatus} translatable />
+            <StatusContent
+              status={actualStatus}
+              textSize='lg'
+              translatable
+            />
 
             <TranslateButton status={actualStatus} />