diff --git a/app/soapbox/components/display-name.tsx b/app/soapbox/components/display-name.tsx index e86ea75ee..0902b5ac2 100644 --- a/app/soapbox/components/display-name.tsx +++ b/app/soapbox/components/display-name.tsx @@ -5,8 +5,6 @@ import { useSoapboxConfig } from 'soapbox/hooks'; import { getAcct } from '../utils/accounts'; -import Icon from './icon'; -import RelativeTimestamp from './relative-timestamp'; import { HStack, Text } from './ui'; import VerificationBadge from './verification-badge'; @@ -15,20 +13,12 @@ import type { Account } from 'soapbox/types/entities'; interface IDisplayName { account: Account withSuffix?: boolean - withDate?: boolean children?: React.ReactNode } -const DisplayName: React.FC = ({ account, children, withSuffix = true, withDate = false }) => { +const DisplayName: React.FC = ({ account, children, withSuffix = true }) => { const { displayFqn = false } = useSoapboxConfig(); - const { created_at: createdAt, verified } = account; - - const joinedAt = createdAt ? ( -
- - -
- ) : null; + const { verified } = account; const displayName = ( @@ -40,7 +30,6 @@ const DisplayName: React.FC = ({ account, children, withSuffix = t /> {verified && } - {withDate && joinedAt} ); diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx index 6752bcdab..f980c0217 100644 --- a/app/soapbox/features/account-gallery/components/media-item.tsx +++ b/app/soapbox/features/account-gallery/components/media-item.tsx @@ -11,11 +11,10 @@ import type { Attachment } from 'soapbox/types/entities'; interface IMediaItem { attachment: Attachment, - displayWidth: number, onOpenMedia: (attachment: Attachment) => void, } -const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia }) => { +const MediaItem: React.FC = ({ attachment, onOpenMedia }) => { const settings = useSettings(); const autoPlayGif = settings.get('autoPlayGif'); const displayMedia = settings.get('displayMedia'); @@ -53,8 +52,6 @@ const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia } }; - const width = `${Math.floor((displayWidth - 4) / 3) - 4}px`; - const height = width; const status = attachment.get('status'); const title = status.get('spoiler_text') || attachment.get('description'); @@ -117,15 +114,15 @@ const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia if (!visible) { icon = ( - + ); } return ( -
- +
+ { const isLoading = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.isLoading); const hasMore = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.hasMore); - const [width, setWidth] = useState(323); const node = useRef(null); const handleScrollToBottom = () => { @@ -96,12 +95,6 @@ const AccountGallery = () => { } }; - useLayoutEffect(() => { - if (node.current) { - setWidth(node.current.offsetWidth); - } - }, [node.current]); - useEffect(() => { if (accountId && accountId !== -1) { dispatch(fetchAccount(accountId)); @@ -143,14 +136,13 @@ const AccountGallery = () => { return ( -
+
{attachments.map((attachment, index) => attachment === null ? ( 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} /> ) : ( ))} diff --git a/app/soapbox/features/account-timeline/components/moved-note.tsx b/app/soapbox/features/account-timeline/components/moved-note.tsx index cfd752fc1..7cc64f5ca 100644 --- a/app/soapbox/features/account-timeline/components/moved-note.tsx +++ b/app/soapbox/features/account-timeline/components/moved-note.tsx @@ -13,7 +13,7 @@ interface IMovedNote { } const MovedNote: React.FC = ({ from, to }) => ( -
+
= ({ group }) => { if (!nineAttachments.isEmpty()) { return ( -
+
{nineAttachments.map((attachment, _index) => ( ))} diff --git a/app/soapbox/features/ui/components/profile-media-panel.tsx b/app/soapbox/features/ui/components/profile-media-panel.tsx index b958ca09a..0dbfaf7f3 100644 --- a/app/soapbox/features/ui/components/profile-media-panel.tsx +++ b/app/soapbox/features/ui/components/profile-media-panel.tsx @@ -51,12 +51,11 @@ const ProfileMediaPanel: React.FC = ({ account }) => { if (!nineAttachments.isEmpty()) { return ( -
+
{nineAttachments.map((attachment, _index) => ( ))} diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss deleted file mode 100644 index d48654d08..000000000 --- a/app/styles/accounts.scss +++ /dev/null @@ -1,82 +0,0 @@ -.card { - & > a { - display: block; - text-decoration: none; - color: inherit; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); - border-radius: 4px; - overflow: hidden; - - @media screen and (max-width: $no-gap-breakpoint) { - box-shadow: none; - } - } -} - -.account { - padding: 10px; - position: relative; - - &:not(:last-of-type) { - border-bottom: 1px solid var(--brand-color--med); - } -} - -.account-gallery__container { - display: flex; - flex-wrap: wrap; - - .empty-column-indicator { - margin: -4px -2px; - } -} - -.account-gallery__item { - @apply rounded-lg p-1; - border: 0; - box-sizing: border-box; - display: block; - position: relative; - overflow: hidden; - - a { - background: var(--brand-color--faint); - } - - video, - img { - @apply rounded-lg; - } - - &__icons { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - .svg-icon { - @apply h-6 w-6; - } - } -} - -.account__moved-note { - padding: 14px 10px; - padding-bottom: 16px; - background: var(--brand-color--faint); - border-top: 1px solid var(--brand-color--med); - border-bottom: 1px solid var(--brand-color--med); -} - -.account__joined-at { - @apply text-gray-400; - padding-left: 3px; - font-size: 14px; - display: flex; - white-space: nowrap; - flex-shrink: 0; - - .svg-icon { - padding-right: 3px; - } -} diff --git a/app/styles/application.scss b/app/styles/application.scss index 5811a0461..4694fccb9 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -3,7 +3,6 @@ @import 'variables'; @import 'fonts'; @import 'basics'; -@import 'accounts'; @import 'loading'; @import 'ui'; @import 'emoji-picker';