moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix alignment on ThreadConnector

This commit is contained in:
Chewbacca 2023-05-03 11:13:47 -04:00
parent b608095e84
commit 27cc002572
4 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/features/feed-filtering/feed-carousel.tsx
View File

@ -207,7 +207,7 @@ const FeedCarousel = () => {
style={{ width: widthPerAvatar || 'auto' }} style={{ width: widthPerAvatar || 'auto' }}
key={idx} key={idx}
> >
<PlaceholderAvatar size={56} withText /> <PlaceholderAvatar size={56} withText className='py-3' />
</div> </div>
)) ))
) : ( ) : (

9
app/soapbox/features/placeholder/components/placeholder-avatar.tsx
View File

@ -1,3 +1,4 @@
import clsx from 'clsx';
import React from 'react'; import React from 'react';
import { Stack } from 'soapbox/components/ui'; import { Stack } from 'soapbox/components/ui';
@ -5,10 +6,11 @@ import { Stack } from 'soapbox/components/ui';
interface IPlaceholderAvatar { interface IPlaceholderAvatar {
size: number size: number
withText?: boolean withText?: boolean
className?: string
} }
/** Fake avatar to display while data is loading. */ /** Fake avatar to display while data is loading. */
const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false }) => { const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false, className }) => {
const style = React.useMemo(() => { const style = React.useMemo(() => {
if (!size) { if (!size) {
return {}; return {};
@ -21,7 +23,10 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = fals
}, [size]); }, [size]);
return ( return (
<Stack space={2} className='animate-pulse py-3 text-center'> <Stack
space={2}
className={clsx('animate-pulse text-center', className)}
>
<div <div
className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800' className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800'
style={style} style={style}

4
app/soapbox/features/placeholder/components/placeholder-status.tsx
View File

@ -8,11 +8,11 @@ import PlaceholderDisplayName from './placeholder-display-name';
import PlaceholderStatusContent from './placeholder-status-content'; import PlaceholderStatusContent from './placeholder-status-content';
interface IPlaceholderStatus { interface IPlaceholderStatus {
variant?: 'rounded' | 'slim' variant?: 'rounded' | 'slim' | 'default'
} }
/** Fake status to display while data is loading. */ /** Fake status to display while data is loading. */
const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant = 'rounded' }) => ( const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant }) => (
<div <div
className={clsx({ className={clsx({
'status-placeholder bg-white dark:bg-primary-900': true, 'status-placeholder bg-white dark:bg-primary-900': true,

2
app/soapbox/features/status/components/thread-status.tsx
View File

@ -46,7 +46,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
// @ts-ignore FIXME // @ts-ignore FIXME
<StatusContainer {...props} showGroup={false} /> <StatusContainer {...props} showGroup={false} />
) : ( ) : (
<PlaceholderStatus variant='slim' /> <PlaceholderStatus variant='default' />
)} )}
</div> </div>
); );