diff --git a/app/soapbox/components/status-list.tsx b/app/soapbox/components/status-list.tsx index 937dac8de..439803e02 100644 --- a/app/soapbox/components/status-list.tsx +++ b/app/soapbox/components/status-list.tsx @@ -139,6 +139,7 @@ const StatusList: React.FC = ({ onMoveDown={handleMoveDown} contextType={timelineId} showGroup={showGroup} + variant={divideType === 'border' ? 'slim' : 'rounded'} /> ); }; @@ -172,6 +173,7 @@ const StatusList: React.FC = ({ onMoveDown={handleMoveDown} contextType={timelineId} showGroup={showGroup} + variant={divideType === 'border' ? 'slim' : 'default'} /> )); }; @@ -245,7 +247,7 @@ const StatusList: React.FC = ({ isLoading={isLoading} showLoading={isLoading && statusIds.size === 0} onLoadMore={handleLoadOlder} - placeholderComponent={PlaceholderStatus} + placeholderComponent={() => } placeholderCount={20} ref={node} className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', { diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 65291a420..752e73636 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -50,7 +50,7 @@ export interface IStatus { featured?: boolean hideActionBar?: boolean hoverable?: boolean - variant?: 'default' | 'rounded' + variant?: 'default' | 'rounded' | 'slim' showGroup?: boolean accountAction?: React.ReactElement } diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx index 512910410..4b8d9799d 100644 --- a/app/soapbox/components/ui/card/card.tsx +++ b/app/soapbox/components/ui/card/card.tsx @@ -20,7 +20,7 @@ export type CardSizes = keyof typeof sizes interface ICard { /** The type of card. */ - variant?: 'default' | 'rounded' + variant?: 'default' | 'rounded' | 'slim' /** Card size preset. */ size?: CardSizes /** Extra classnames for the
element. */ @@ -37,6 +37,7 @@ const Card = React.forwardRef(({ children, variant = 'def className={clsx({ 'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded', [sizes[size]]: variant === 'rounded', + 'py-4': variant === 'slim', }, className)} > {children} diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx index ac4fdd66e..4a589a328 100644 --- a/app/soapbox/features/account/components/header.tsx +++ b/app/soapbox/features/account/components/header.tsx @@ -105,7 +105,7 @@ const Header: React.FC = ({ account }) => { if (!account) { return ( -
+
@@ -608,7 +608,7 @@ const Header: React.FC = ({ account }) => { const menu = makeMenu(); return ( -
+
{(account.moved && typeof account.moved === 'object') && ( )} diff --git a/app/soapbox/features/event/event-discussion.tsx b/app/soapbox/features/event/event-discussion.tsx index 54a539a8a..3c96c73b8 100644 --- a/app/soapbox/features/event/event-discussion.tsx +++ b/app/soapbox/features/event/event-discussion.tsx @@ -184,7 +184,7 @@ const EventDiscussion: React.FC = (props) => { ref={scroller} hasMore={!!next} onLoadMore={handleLoadMore} - placeholderComponent={() => } + placeholderComponent={() => } initialTopMostItemIndex={0} emptyMessage={} > diff --git a/app/soapbox/features/group/components/group-header.tsx b/app/soapbox/features/group/components/group-header.tsx index 713c64c86..a49d87fe7 100644 --- a/app/soapbox/features/group/components/group-header.tsx +++ b/app/soapbox/features/group/components/group-header.tsx @@ -32,7 +32,7 @@ const GroupHeader: React.FC = ({ group }) => { if (!group) { return ( -
+
@@ -105,7 +105,7 @@ const GroupHeader: React.FC = ({ group }) => { }; return ( -
+
{renderHeader()} diff --git a/app/soapbox/features/group/group-timeline.tsx b/app/soapbox/features/group/group-timeline.tsx index 8ab33e910..f19da1777 100644 --- a/app/soapbox/features/group/group-timeline.tsx +++ b/app/soapbox/features/group/group-timeline.tsx @@ -56,7 +56,7 @@ const GroupTimeline: React.FC = (props) => { return ( {canComposeGroupStatus && ( -
+
diff --git a/app/soapbox/features/placeholder/components/placeholder-status.tsx b/app/soapbox/features/placeholder/components/placeholder-status.tsx index 37da3fa45..06d6ff1a2 100644 --- a/app/soapbox/features/placeholder/components/placeholder-status.tsx +++ b/app/soapbox/features/placeholder/components/placeholder-status.tsx @@ -8,15 +8,16 @@ import PlaceholderDisplayName from './placeholder-display-name'; import PlaceholderStatusContent from './placeholder-status-content'; interface IPlaceholderStatus { - thread?: boolean + variant?: 'rounded' | 'slim' } /** Fake status to display while data is loading. */ -const PlaceholderStatus: React.FC = ({ thread = false }) => ( +const PlaceholderStatus: React.FC = ({ variant = 'rounded' }) => (
diff --git a/app/soapbox/features/status/components/thread-status.tsx b/app/soapbox/features/status/components/thread-status.tsx index 73c42e7e3..871e8f431 100644 --- a/app/soapbox/features/status/components/thread-status.tsx +++ b/app/soapbox/features/status/components/thread-status.tsx @@ -46,7 +46,7 @@ const ThreadStatus: React.FC = (props): JSX.Element => { // @ts-ignore FIXME ) : ( - + )}
); diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx index a9743b48b..818d83720 100644 --- a/app/soapbox/features/status/index.tsx +++ b/app/soapbox/features/status/index.tsx @@ -536,7 +536,7 @@ const Thread: React.FC = (props) => { ref={scroller} hasMore={!!next} onLoadMore={handleLoadMore} - placeholderComponent={() => } + placeholderComponent={() => } initialTopMostItemIndex={ancestorsIds.size} > {children} diff --git a/app/soapbox/pages/group-page.tsx b/app/soapbox/pages/group-page.tsx index ee6f46cb6..03d8d2d84 100644 --- a/app/soapbox/pages/group-page.tsx +++ b/app/soapbox/pages/group-page.tsx @@ -99,7 +99,7 @@ const GroupPage: React.FC = ({ params, children }) => { return ( <> - + = ({ params, children }) => { return ( <> - +