diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx index aedf3e132..d444b75cd 100644 --- a/app/soapbox/components/ui/card/card.tsx +++ b/app/soapbox/components/ui/card/card.tsx @@ -16,11 +16,13 @@ const messages = defineMessages({ back: { id: 'card.back.label', defaultMessage: 'Back' }, }); +export type CardSizes = keyof typeof sizes + interface ICard { /** The type of card. */ variant?: 'default' | 'rounded' /** Card size preset. */ - size?: keyof typeof sizes + size?: CardSizes /** Extra classnames for the
element. */ className?: string /** Elements inside the card. */ diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx index d6cadec77..11ea4c380 100644 --- a/app/soapbox/components/ui/column/column.tsx +++ b/app/soapbox/components/ui/column/column.tsx @@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom'; import Helmet from 'soapbox/components/helmet'; import { useSoapboxConfig } from 'soapbox/hooks'; -import { Card, CardBody, CardHeader, CardTitle } from '../card/card'; +import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from '../card/card'; type IColumnHeader = Pick; @@ -54,12 +54,15 @@ export interface IColumn { ref?: React.Ref /** Children to display in the column. */ children?: React.ReactNode + /** Action for the ColumnHeader, displayed at the end. */ action?: React.ReactNode + /** Column size, inherited from Card. */ + size?: CardSizes } /** A backdrop for the main section of the UI. */ const Column: React.FC = React.forwardRef((props, ref: React.ForwardedRef): JSX.Element => { - const { backHref, children, label, transparent = false, withHeader = true, className, action } = props; + const { backHref, children, label, transparent = false, withHeader = true, className, action, size } = props; const soapboxConfig = useSoapboxConfig(); return ( @@ -76,7 +79,7 @@ const Column: React.FC = React.forwardRef((props, ref: React.ForwardedR )} - + {withHeader && ( = (props) => { react: handleHotkeyReact, }; - const username = String(status.getIn(['account', 'acct'])); - const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title; - const focusedStatus = (
@@ -488,7 +485,7 @@ const Thread: React.FC = (props) => { {!isUnderReview ? ( <> -
+
= (props) => {
{hasDescendants && ( -
+
)}
); @@ -523,8 +520,10 @@ const Thread: React.FC = (props) => { return ; } + const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title; + return ( - +
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index 145b26e49..e925baa47 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -1456,7 +1456,7 @@ "status.show_less_all": "Show less for all", "status.show_more_all": "Show more for all", "status.show_original": "Show original", - "status.title": "@{username}'s post", + "status.title": "Post Details", "status.title_direct": "Direct message", "status.translate": "Translate", "status.translated_from_with": "Translated from {lang} using {provider}", diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index 7b5086776..d70bf924c 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -1,5 +1,5 @@ .thread { - @apply bg-white dark:bg-primary-900 p-4 shadow-xl dark:shadow-none sm:p-6 sm:rounded-xl; + @apply bg-white dark:bg-primary-900 shadow-xl dark:shadow-none sm:rounded-xl; &__status { @apply relative pb-4;