diff --git a/app/soapbox/actions/compose.ts b/app/soapbox/actions/compose.ts index 1b0959a0f5..0a43e9844e 100644 --- a/app/soapbox/actions/compose.ts +++ b/app/soapbox/actions/compose.ts @@ -49,6 +49,7 @@ const COMPOSE_UPLOAD_FAIL = 'COMPOSE_UPLOAD_FAIL'; const COMPOSE_UPLOAD_PROGRESS = 'COMPOSE_UPLOAD_PROGRESS'; const COMPOSE_UPLOAD_UNDO = 'COMPOSE_UPLOAD_UNDO'; const COMPOSE_GROUP_POST = 'COMPOSE_GROUP_POST'; +const COMPOSE_SET_GROUP_TIMELINE_VISIBLE = 'COMPOSE_SET_GROUP_TIMELINE_VISIBLE'; const COMPOSE_SUGGESTIONS_CLEAR = 'COMPOSE_SUGGESTIONS_CLEAR'; const COMPOSE_SUGGESTIONS_READY = 'COMPOSE_SUGGESTIONS_READY'; @@ -298,7 +299,10 @@ const submitCompose = (composeId: string, routerHistory?: History, force = false to, }; - if (compose.privacy === 'group') params.group_id = compose.group_id; + if (compose.privacy === 'group') { + params.group_id = compose.group_id; + params.group_timeline_visible = compose.group_timeline_visible; // Truth Social + } dispatch(createStatus(params, idempotencyKey, statusId)).then(function(data) { if (!statusId && data.visibility === 'direct' && getState().conversations.mounted <= 0 && routerHistory) { @@ -489,6 +493,12 @@ const groupCompose = (composeId: string, groupId: string) => }); }; +const setGroupTimelineVisible = (composeId: string, groupTimelineVisible: boolean) => ({ + type: COMPOSE_SET_GROUP_TIMELINE_VISIBLE, + id: composeId, + groupTimelineVisible, +}); + const clearComposeSuggestions = (composeId: string) => { if (cancelFetchComposeSuggestionsAccounts) { cancelFetchComposeSuggestionsAccounts(); @@ -805,6 +815,7 @@ export { COMPOSE_REMOVE_FROM_MENTIONS, COMPOSE_SET_STATUS, COMPOSE_EDITOR_STATE_SET, + COMPOSE_SET_GROUP_TIMELINE_VISIBLE, setComposeToStatus, changeCompose, replyCompose, @@ -831,6 +842,7 @@ export { uploadComposeFail, undoUploadCompose, groupCompose, + setGroupTimelineVisible, clearComposeSuggestions, fetchComposeSuggestions, readyComposeSuggestionsEmojis, diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx index e3c19a857c..92eabca120 100644 --- a/app/soapbox/components/account.tsx +++ b/app/soapbox/components/account.tsx @@ -193,7 +193,7 @@ const Account = ({ {emoji && ( diff --git a/app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx b/app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx index f34240d8a2..8b0ca77553 100644 --- a/app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx +++ b/app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx @@ -69,7 +69,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => { }, [itemRef.current, index]); if (item === null) { - return
  • ; + return
  • ; } return ( diff --git a/app/soapbox/components/error-boundary.tsx b/app/soapbox/components/error-boundary.tsx index 4ab76e46d1..795596eb7e 100644 --- a/app/soapbox/components/error-boundary.tsx +++ b/app/soapbox/components/error-boundary.tsx @@ -113,7 +113,7 @@ class ErrorBoundary extends React.PureComponent { const errorText = this.getErrorText(); return ( -
    +
    diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx index 0d11382e47..9cfd1da819 100644 --- a/app/soapbox/components/event-preview.tsx +++ b/app/soapbox/components/event-preview.tsx @@ -52,7 +52,7 @@ const EventPreview: React.FC = ({ status, className, hideAction, return (
    -
    +
    {floatingAction && action}
    @@ -65,7 +65,7 @@ const EventPreview: React.FC = ({ status, className, hideAction, {!floatingAction && action} -
    +
    diff --git a/app/soapbox/components/gdpr-banner.tsx b/app/soapbox/components/gdpr-banner.tsx index f8bd28341b..73d90684ea 100644 --- a/app/soapbox/components/gdpr-banner.tsx +++ b/app/soapbox/components/gdpr-banner.tsx @@ -31,7 +31,7 @@ const GdprBanner: React.FC = () => { return ( -
    +
    diff --git a/app/soapbox/components/group-card.tsx b/app/soapbox/components/group-card.tsx index 7b9fa6458e..2aee2bc7f6 100644 --- a/app/soapbox/components/group-card.tsx +++ b/app/soapbox/components/group-card.tsx @@ -37,7 +37,7 @@ const GroupCard: React.FC = ({ group }) => { {/* Group Avatar */} -
    +
    diff --git a/app/soapbox/components/groups/group-avatar.tsx b/app/soapbox/components/groups/group-avatar.tsx index 91d6808d24..9b3213bb9e 100644 --- a/app/soapbox/components/groups/group-avatar.tsx +++ b/app/soapbox/components/groups/group-avatar.tsx @@ -23,8 +23,9 @@ const GroupAvatar = (props: IGroupAvatar) => { className={ clsx('relative rounded-full', { 'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing, + 'dark:shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.gray.800)]': isOwner && withRing, 'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing, - 'shadow-[0_0_0_2px_theme(colors.white)]': !isOwner && withRing, + 'shadow-[0_0_0_2px_theme(colors.white)] dark:shadow-[0_0_0_2px_theme(colors.gray.800)]': !isOwner && withRing, }) } src={group.avatar} diff --git a/app/soapbox/components/groups/popover/group-popover.tsx b/app/soapbox/components/groups/popover/group-popover.tsx index 776506f991..752deeb8af 100644 --- a/app/soapbox/components/groups/popover/group-popover.tsx +++ b/app/soapbox/components/groups/popover/group-popover.tsx @@ -53,7 +53,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => { {/* Group Avatar */} -
    +
    diff --git a/app/soapbox/components/icon-with-counter.tsx b/app/soapbox/components/icon-with-counter.tsx index b244f932bf..dbc17d9d21 100644 --- a/app/soapbox/components/icon-with-counter.tsx +++ b/app/soapbox/components/icon-with-counter.tsx @@ -16,7 +16,7 @@ const IconWithCounter: React.FC = ({ icon, count, countMax, .. {count > 0 && ( - + )} diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx index 2117768368..2dd6a3fdde 100644 --- a/app/soapbox/components/profile-hover-card.tsx +++ b/app/soapbox/components/profile-hover-card.tsx @@ -142,7 +142,7 @@ export const ProfileHoverCard: React.FC = ({ visible = true } {followedBy && ( -
    +
    } diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx index aad2d7f6be..241e3e8372 100644 --- a/app/soapbox/components/sidebar-menu.tsx +++ b/app/soapbox/components/sidebar-menu.tsx @@ -166,7 +166,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { src={require('@tabler/icons/x.svg')} ref={closeButtonRef} iconClassName='h-6 w-6' - className='absolute top-0 right-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300' + className='absolute right-0 top-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300' />
    diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx index 098da05796..8dce32f6fb 100644 --- a/app/soapbox/components/still-image.tsx +++ b/app/soapbox/components/still-image.tsx @@ -70,7 +70,7 @@ const StillImage: React.FC = ({ alt, className, src, style, letterb )} {(hoverToPlay && showExt) && ( -
    +
    )} diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts index 1b61fc7b4b..740b06ba4d 100644 --- a/app/soapbox/components/ui/button/useButtonStyles.ts +++ b/app/soapbox/components/ui/button/useButtonStyles.ts @@ -9,7 +9,7 @@ const themes = { 'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500', accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300', danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500', - transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80', + transparent: 'border-transparent bg-transparent text-primary-600 dark:text-accent-blue dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50', outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10', muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500', }; diff --git a/app/soapbox/components/ui/file-input/file-input.tsx b/app/soapbox/components/ui/file-input/file-input.tsx index 89c42f14bc..2a08a934e8 100644 --- a/app/soapbox/components/ui/file-input/file-input.tsx +++ b/app/soapbox/components/ui/file-input/file-input.tsx @@ -8,7 +8,7 @@ const FileInput = forwardRef((props, ref) => { {...props} ref={ref} type='file' - className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:py-1.5 file:px-3 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800' + className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:px-3 file:py-1.5 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800' /> ); }); diff --git a/app/soapbox/components/ui/icon/icon.tsx b/app/soapbox/components/ui/icon/icon.tsx index 5c294a1a83..f51c3ca38f 100644 --- a/app/soapbox/components/ui/icon/icon.tsx +++ b/app/soapbox/components/ui/icon/icon.tsx @@ -23,7 +23,7 @@ interface IIcon extends Pick, 'strokeWidth'> { const Icon: React.FC = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => (
    {count ? ( - + ) : null} diff --git a/app/soapbox/components/ui/menu/menu.tsx b/app/soapbox/components/ui/menu/menu.tsx index c61cc56d2f..ff18b99eb6 100644 --- a/app/soapbox/components/ui/menu/menu.tsx +++ b/app/soapbox/components/ui/menu/menu.tsx @@ -37,6 +37,6 @@ const MenuList: React.FC = (props) => { }; /** Divides menu items. */ -const MenuDivider = () =>
    ; +const MenuDivider = () =>
    ; export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink }; diff --git a/app/soapbox/components/ui/popover/popover.tsx b/app/soapbox/components/ui/popover/popover.tsx index 7700f8149c..7f909f8bc6 100644 --- a/app/soapbox/components/ui/popover/popover.tsx +++ b/app/soapbox/components/ui/popover/popover.tsx @@ -13,6 +13,8 @@ import { import clsx from 'clsx'; import React, { useRef, useState } from 'react'; +import Portal from '../portal/portal'; + interface IPopover { children: React.ReactElement> /** The content of the popover */ @@ -83,31 +85,33 @@ const Popover: React.FC = (props) => { })} {(isMounted) && ( -
    - {content} + +
    + {content} - -
    + +
    + )} ); diff --git a/app/soapbox/components/ui/toggle/toggle.tsx b/app/soapbox/components/ui/toggle/toggle.tsx index 466a207f81..34651e98d2 100644 --- a/app/soapbox/components/ui/toggle/toggle.tsx +++ b/app/soapbox/components/ui/toggle/toggle.tsx @@ -1,13 +1,52 @@ -import React from 'react'; -import ReactToggle, { ToggleProps } from 'react-toggle'; +import clsx from 'clsx'; +import React, { useRef } from 'react'; + +interface IToggle extends Pick, 'id' | 'name' | 'checked' | 'onChange' | 'required' | 'disabled'> { + size?: 'sm' | 'md' +} + +/** A glorified checkbox. */ +const Toggle: React.FC = ({ id, size = 'md', name, checked, onChange, required, disabled }) => { + const input = useRef(null); + + const handleClick: React.MouseEventHandler = () => { + input.current?.focus(); + input.current?.click(); + }; -/** A glorified checkbox. Wrapper around react-toggle. */ -const Toggle: React.FC = ({ icons = false, ...rest }) => { return ( - + ); }; diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx index ef1aa13822..74ed34ff03 100644 --- a/app/soapbox/features/account-gallery/components/media-item.tsx +++ b/app/soapbox/features/account-gallery/components/media-item.tsx @@ -52,8 +52,8 @@ const MediaItem: React.FC = ({ attachment, onOpenMedia }) => { } }; - const status = attachment.get('status'); - const title = status.get('spoiler_text') || attachment.get('description'); + const status = attachment.status; + const title = status.spoiler_text || attachment.description; let thumbnail: React.ReactNode = ''; let icon; @@ -61,8 +61,8 @@ const MediaItem: React.FC = ({ attachment, onOpenMedia }) => { if (attachment.type === 'unknown') { // Skip } else if (attachment.type === 'image') { - const focusX = Number(attachment.getIn(['meta', 'focus', 'x'])) || 0; - const focusY = Number(attachment.getIn(['meta', 'focus', 'y'])) || 0; + const focusX = Number(attachment.meta.getIn(['focus', 'x'])) || 0; + const focusY = Number(attachment.meta.getIn(['focus', 'y'])) || 0; const x = ((focusX / 2) + .5) * 100; const y = ((focusY / -2) + .5) * 100; @@ -122,9 +122,9 @@ const MediaItem: React.FC = ({ attachment, onOpenMedia }) => { return (
    - + = ({ account }) => {
    {renderHeader()} -
    +
    {info} diff --git a/app/soapbox/features/admin/tabs/awaiting-approval.tsx b/app/soapbox/features/admin/tabs/awaiting-approval.tsx index 36a86b61ad..b59a9a56c6 100644 --- a/app/soapbox/features/admin/tabs/awaiting-approval.tsx +++ b/app/soapbox/features/admin/tabs/awaiting-approval.tsx @@ -36,7 +36,7 @@ const AwaitingApproval: React.FC = () => { className='divide-y divide-solid divide-gray-200 dark:divide-gray-800' > {accountIds.map(id => ( -
    +
    ))} diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx index db28100653..0895093b7d 100644 --- a/app/soapbox/features/ads/components/ad.tsx +++ b/app/soapbox/features/ads/components/ad.tsx @@ -113,7 +113,7 @@ const Ad: React.FC = ({ ad }) => { {showInfo && ( -
    +
    diff --git a/app/soapbox/features/auth-layout/index.tsx b/app/soapbox/features/auth-layout/index.tsx index 2b32d25807..4b1cad917c 100644 --- a/app/soapbox/features/auth-layout/index.tsx +++ b/app/soapbox/features/auth-layout/index.tsx @@ -37,7 +37,7 @@ const AuthLayout = () => {
    -
    +
    diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx index ff99006277..1832f8b27d 100644 --- a/app/soapbox/features/chats/components/chat-list.tsx +++ b/app/soapbox/features/chats/components/chat-list.tsx @@ -80,7 +80,7 @@ const ChatList: React.FC = ({ onClickChat, useWindowScroll = false, s })} />
    { }; return ( - + { }; return ( - +
    {intl.formatMessage(messages.title, { br:
    })} diff --git a/app/soapbox/features/chats/components/chat-search/results.tsx b/app/soapbox/features/chats/components/chat-search/results.tsx index 2f35830533..72b5b0c633 100644 --- a/app/soapbox/features/chats/components/chat-search/results.tsx +++ b/app/soapbox/features/chats/components/chat-search/results.tsx @@ -69,7 +69,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => { })} />
    { } return ( - + { clickableAreaRef?: React.RefObject event?: string group?: string + extra?: React.ReactNode } -const ComposeForm = ({ id, shouldCondense, autoFocus, clickableAreaRef, event, group }: IComposeForm) => { +const ComposeForm = ({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, extra }: IComposeForm) => { const history = useHistory(); const intl = useIntl(); const dispatch = useAppDispatch(); @@ -344,6 +345,8 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab + {extra &&
    {extra}
    } +
    = ({ id }) => {
    {followedBy && ( -
    +
    } @@ -59,7 +59,7 @@ const AccountCard: React.FC = ({ id }) => { diff --git a/app/soapbox/features/edit-profile/components/profile-preview.tsx b/app/soapbox/features/edit-profile/components/profile-preview.tsx index 7bc3a894fc..e4aa73b180 100644 --- a/app/soapbox/features/edit-profile/components/profile-preview.tsx +++ b/app/soapbox/features/edit-profile/components/profile-preview.tsx @@ -26,7 +26,7 @@ const ProfilePreview: React.FC = ({ account }) => { {account.verified && ( -
    +
    )} diff --git a/app/soapbox/features/filters/edit-filter.tsx b/app/soapbox/features/filters/edit-filter.tsx index 4d035f8d32..9fd5363fa4 100644 --- a/app/soapbox/features/filters/edit-filter.tsx +++ b/app/soapbox/features/filters/edit-filter.tsx @@ -71,7 +71,6 @@ const FilterField: StreamfieldComponent = ({ value, onChange }) => @@ -212,28 +211,24 @@ const EditFilter: React.FC = ({ params }) => { setHomeTimeline(target.checked)} /> setPublicTimeline(target.checked)} /> setNotifications(target.checked)} /> setConversations(target.checked)} /> @@ -241,7 +236,6 @@ const EditFilter: React.FC = ({ params }) => { {features.filtersV2 && ( setAccounts(target.checked)} /> @@ -255,7 +249,6 @@ const EditFilter: React.FC = ({ params }) => { hint={intl.formatMessage(features.filtersV2 ? messages.hide_hint : messages.drop_hint)} > setHide(target.checked)} /> diff --git a/app/soapbox/features/group/components/__tests__/group-options-button.test.tsx b/app/soapbox/features/group/components/__tests__/group-options-button.test.tsx new file mode 100644 index 0000000000..4d7779799a --- /dev/null +++ b/app/soapbox/features/group/components/__tests__/group-options-button.test.tsx @@ -0,0 +1,85 @@ +import React from 'react'; + +import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory'; +import { render, screen } from 'soapbox/jest/test-helpers'; +import { GroupRoles } from 'soapbox/schemas/group-member'; +import { Group } from 'soapbox/types/entities'; + +import GroupOptionsButton from '../group-options-button'; + +let group: Group; + +describe('', () => { + describe('when the user blocked', () => { + beforeEach(() => { + group = buildGroup({ + relationship: buildGroupRelationship({ + requested: false, + member: true, + blocked_by: true, + role: 'user', + }), + }); + }); + + it('should render null', () => { + render(); + + expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0); + }); + }); + + describe('when the user is an admin', () => { + beforeEach(() => { + group = buildGroup({ + relationship: buildGroupRelationship({ + requested: false, + member: true, + role: GroupRoles.ADMIN, + }), + }); + }); + + it('should render null', () => { + render(); + + expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0); + }); + }); + + describe('when the user is an owner', () => { + beforeEach(() => { + group = buildGroup({ + relationship: buildGroupRelationship({ + requested: false, + member: true, + role: GroupRoles.OWNER, + }), + }); + }); + + it('should render null', () => { + render(); + + expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0); + }); + }); + + describe('when the user is a member', () => { + beforeEach(() => { + group = buildGroup({ + relationship: buildGroupRelationship({ + requested: false, + member: true, + role: GroupRoles.USER, + }), + }); + }); + + it('should render the dropdown menu', () => { + render(); + + expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(1); + }); + }); +}); \ No newline at end of file diff --git a/app/soapbox/features/group/components/__tests__/group-relationship.test.tsx b/app/soapbox/features/group/components/__tests__/group-relationship.test.tsx new file mode 100644 index 0000000000..4c6c10a489 --- /dev/null +++ b/app/soapbox/features/group/components/__tests__/group-relationship.test.tsx @@ -0,0 +1,66 @@ +import React from 'react'; + +import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory'; +import { render, screen } from 'soapbox/jest/test-helpers'; +import { GroupRoles } from 'soapbox/schemas/group-member'; +import { Group } from 'soapbox/types/entities'; + +import GroupRelationship from '../group-relationship'; + +let group: Group; + +describe('', () => { + describe('when the user is an admin', () => { + beforeEach(() => { + group = buildGroup({ + relationship: buildGroupRelationship({ + requested: false, + member: true, + role: GroupRoles.ADMIN, + }), + }); + }); + + it('should render the relationship', () => { + render(); + + expect(screen.getByTestId('group-relationship')).toHaveTextContent('Admin'); + }); + }); + + describe('when the user is an owner', () => { + beforeEach(() => { + group = buildGroup({ + relationship: buildGroupRelationship({ + requested: false, + member: true, + role: GroupRoles.OWNER, + }), + }); + }); + + it('should render the relationship', () => { + render(); + + expect(screen.getByTestId('group-relationship')).toHaveTextContent('Owner'); + }); + }); + + describe('when the user is a member', () => { + beforeEach(() => { + group = buildGroup({ + relationship: buildGroupRelationship({ + requested: false, + member: true, + role: GroupRoles.USER, + }), + }); + }); + + it('should render null', () => { + render(); + + expect(screen.queryAllByTestId('group-relationship')).toHaveLength(0); + }); + }); +}); \ No newline at end of file diff --git a/app/soapbox/features/group/components/group-header.tsx b/app/soapbox/features/group/components/group-header.tsx index cbeddfaea0..713c64c86f 100644 --- a/app/soapbox/features/group/components/group-header.tsx +++ b/app/soapbox/features/group/components/group-header.tsx @@ -109,7 +109,7 @@ const GroupHeader: React.FC = ({ group }) => {
    {renderHeader()} -
    +
    { - const dispatch = useAppDispatch(); const account = useOwnAccount(); + const dispatch = useAppDispatch(); + const intl = useIntl(); const isMember = group.relationship?.role === GroupRoles.USER; const isBlocked = group.relationship?.blocked_by; const menu: Menu = useMemo(() => ([ { - text: 'Report', + text: intl.formatMessage(messages.report), icon: require('@tabler/icons/flag.svg'), action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })), }, @@ -38,6 +44,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => { theme='secondary' iconClassName='h-5 w-5' className='self-stretch px-2.5' + data-testid='dropdown-menu-button' /> ); diff --git a/app/soapbox/features/group/components/group-relationship.tsx b/app/soapbox/features/group/components/group-relationship.tsx index c71adbbe8b..8fd47ac2d0 100644 --- a/app/soapbox/features/group/components/group-relationship.tsx +++ b/app/soapbox/features/group/components/group-relationship.tsx @@ -13,12 +13,17 @@ const GroupRelationship = ({ group }: IGroupRelationship) => { const isOwner = group.relationship?.role === GroupRoles.OWNER; const isAdmin = group.relationship?.role === GroupRoles.ADMIN; - if (!isOwner || !isAdmin) { + if (!isOwner && !isAdmin) { return null; } return ( - + { {isOwner - ? - : } + ? + : } ); diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx index 354901fe4f..d385fb580c 100644 --- a/app/soapbox/features/group/edit-group.tsx +++ b/app/soapbox/features/group/edit-group.tsx @@ -66,7 +66,7 @@ const HeaderPicker = React.forwardRef(({ src, onC const AvatarPicker = React.forwardRef(({ src, onChange, accept, disabled }, ref) => { return ( -
    @@ -69,7 +89,7 @@ const GroupTimeline: React.FC = (props) => { diff --git a/app/soapbox/features/groups/components/discover/group-grid-item.tsx b/app/soapbox/features/groups/components/discover/group-grid-item.tsx index c80a7159a0..17d53225ed 100644 --- a/app/soapbox/features/groups/components/discover/group-grid-item.tsx +++ b/app/soapbox/features/groups/components/discover/group-grid-item.tsx @@ -27,7 +27,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef @@ -62,7 +62,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef
    diff --git a/app/soapbox/features/groups/pending-requests.tsx b/app/soapbox/features/groups/pending-requests.tsx index de52ae4c60..cc9ceed1d4 100644 --- a/app/soapbox/features/groups/pending-requests.tsx +++ b/app/soapbox/features/groups/pending-requests.tsx @@ -18,7 +18,6 @@ export default () => { const { groups, isLoading } = usePendingGroups(); - const renderBlankslate = () => ( void }) => { } return ( -
    +
    { {generateText(eventNameLength)} -
    +
    {generateText(nameLength)} {generateText(nameLength)} {generateText(nameLength)} diff --git a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx index f07012f8f2..b43ae1aaf5 100644 --- a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx +++ b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx @@ -14,7 +14,7 @@ const PlaceholderGroupCard = () => {
    {/* Group Avatar */} -
    +
    diff --git a/app/soapbox/features/placeholder/components/placeholder-group-discover.tsx b/app/soapbox/features/placeholder/components/placeholder-group-discover.tsx index 767dd5e0b1..468cb54817 100644 --- a/app/soapbox/features/placeholder/components/placeholder-group-discover.tsx +++ b/app/soapbox/features/placeholder/components/placeholder-group-discover.tsx @@ -9,11 +9,11 @@ const PlaceholderGroupDiscover = () => { return ( - + {/* Group Cover Image */}
    - + {/* Group Avatar */}
    diff --git a/app/soapbox/features/public-layout/components/footer.tsx b/app/soapbox/features/public-layout/components/footer.tsx index 0f6435f0ab..4038b5d186 100644 --- a/app/soapbox/features/public-layout/components/footer.tsx +++ b/app/soapbox/features/public-layout/components/footer.tsx @@ -21,7 +21,7 @@ const Footer = () => { }); return ( -