diff --git a/app/javascript/flavours/glitch/components/empty_state/empty_state.module.scss b/app/javascript/flavours/glitch/components/empty_state/empty_state.module.scss index bdab2f2732..9d1d5a115c 100644 --- a/app/javascript/flavours/glitch/components/empty_state/empty_state.module.scss +++ b/app/javascript/flavours/glitch/components/empty_state/empty_state.module.scss @@ -3,16 +3,20 @@ flex-direction: column; align-items: center; max-width: 600px; - padding: 20px; + padding: 24px; gap: 16px; text-align: center; color: var(--color-text-primary); } .content { + max-width: 300px; + svg, img { - width: 240px; + width: 200px; + aspect-ratio: 1; + object-fit: contain; max-width: 100%; margin-bottom: 16px; } @@ -20,11 +24,14 @@ h3 { font-size: 17px; font-weight: 500; + text-wrap: balance; + line-height: 1.2; } p { - font-size: 15px; margin-top: 8px; + font-size: 15px; color: var(--color-text-secondary); + text-wrap: pretty; } } diff --git a/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx b/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx index 301283b520..831971b84b 100644 --- a/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx +++ b/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx @@ -49,8 +49,14 @@ export const EmptyMessage: React.FC = ({ image={image} title={ + } + message={ + } > @@ -72,7 +78,7 @@ export const EmptyMessage: React.FC = ({ message = ( ); } @@ -93,47 +99,21 @@ export const EmptyMessage: React.FC = ({ /> ); } else { - // Standard other account empty state. - title = ( - - ); - if (hasCollections) { - if (acct) { - message = ( - - ); - } else { - message = ( - - ); - } + if (acct) { + title = ( + + ); } else { - if (acct) { - message = ( - - ); - } else { - message = ( - - ); - } + title = ( + + ); } } diff --git a/app/javascript/flavours/glitch/features/account_featured/components/subheading.module.scss b/app/javascript/flavours/glitch/features/account_featured/components/subheading.module.scss new file mode 100644 index 0000000000..aee5d65af2 --- /dev/null +++ b/app/javascript/flavours/glitch/features/account_featured/components/subheading.module.scss @@ -0,0 +1,37 @@ +.subheading { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + min-height: 52px; + padding: 12px 16px; + font-size: 13px; + font-weight: 500; + text-transform: uppercase; + color: var(--color-text-primary); + background: var(--color-bg-secondary); +} + +.link { + display: flex; + padding-block: 4px; + font-size: 13px; + font-weight: 500; + text-transform: none; + text-decoration: none; + color: inherit; + + &:hover { + text-decoration: underline; + } + + &:focus-visible { + outline: var(--outline-focus-default); + outline-offset: 2px; + } + + :global(.icon) { + width: 18px; + height: 18px; + } +} diff --git a/app/javascript/flavours/glitch/features/account_featured/components/subheading.tsx b/app/javascript/flavours/glitch/features/account_featured/components/subheading.tsx new file mode 100644 index 0000000000..f1e6110708 --- /dev/null +++ b/app/javascript/flavours/glitch/features/account_featured/components/subheading.tsx @@ -0,0 +1,42 @@ +import type { ComponentPropsWithoutRef } from 'react'; + +import classNames from 'classnames'; +import { Link } from 'react-router-dom'; + +import type { IconProp } from '@/flavours/glitch/components/icon'; +import { Icon } from '@/flavours/glitch/components/icon'; +import { polymorphicForwardRef } from '@/types/polymorphic'; + +import classes from './subheading.module.scss'; + +export const Subheading = polymorphicForwardRef<'h2'>( + ({ as: Component = 'h2', children, className, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +interface SubheadingLinkProps extends ComponentPropsWithoutRef { + icon: IconProp; +} + +export const SubheadingLink: React.FC = ({ + icon, + children, + className, + ...props +}) => { + return ( + + + {children} + + ); +}; diff --git a/app/javascript/flavours/glitch/features/account_featured/index.tsx b/app/javascript/flavours/glitch/features/account_featured/index.tsx index 60e9531318..18443b4012 100644 --- a/app/javascript/flavours/glitch/features/account_featured/index.tsx +++ b/app/javascript/flavours/glitch/features/account_featured/index.tsx @@ -6,9 +6,10 @@ import { useHistory } from 'react-router'; import { List as ImmutableList } from 'immutable'; +import { AccountListItem } from '@/flavours/glitch/components/account_list_item'; import { useAccount } from '@/flavours/glitch/hooks/useAccount'; +import AddIcon from '@/material-icons/400-24px/add.svg?react'; import { fetchEndorsedAccounts } from 'flavours/glitch/actions/accounts'; -import { Account } from 'flavours/glitch/components/account'; import { ColumnBackButton } from 'flavours/glitch/components/column_back_button'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; import { RemoteHint } from 'flavours/glitch/components/remote_hint'; @@ -28,10 +29,11 @@ import { } from 'flavours/glitch/reducers/slices/collections'; import { useAppDispatch, useAppSelector } from 'flavours/glitch/store'; -import { CollectionListItem } from '../collections/detail/collection_list_item'; +import { CollectionListItem } from '../collections/components/collection_list_item'; import { areCollectionsEnabled } from '../collections/utils'; import { EmptyMessage } from './components/empty_message'; +import { Subheading, SubheadingLink } from './components/subheading'; const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({ multiColumn, @@ -114,14 +116,44 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({ {accountId && ( )} + {!featuredAccountIds.isEmpty() && ( + <> + + + + + {featuredAccountIds.map((featuredAccountId, index) => ( +
+ +
+ ))} +
+ + )} {listedCollections.length > 0 && status === 'idle' && ( <> -

- -

+ +

+ +

+ + + +
{listedCollections.map((item, index) => ( = ({ )} - {!featuredAccountIds.isEmpty() && ( - <> -

- -

- - {featuredAccountIds.map((featuredAccountId, index) => ( -
- -
- ))} -
- - )} diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx index 3f95ce6420..c3d42d1407 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx @@ -8,8 +8,6 @@ import { NavLink } from 'react-router-dom'; import { useAccount } from '@/flavours/glitch/hooks/useAccount'; import { useAccountId } from '@/flavours/glitch/hooks/useAccountId'; -import { areCollectionsEnabled } from '../../collections/utils'; - import classes from './styles.module.scss'; const isActive: Required['isActive'] = (match, location) => @@ -41,14 +39,7 @@ export const AccountTabs: FC = () => { )} {show_featured && ( - {areCollectionsEnabled() ? ( - - ) : ( - - )} + )} diff --git a/app/javascript/flavours/glitch/features/collections/detail/collection_list_item.module.scss b/app/javascript/flavours/glitch/features/collections/components/collection_list_item.module.scss similarity index 96% rename from app/javascript/flavours/glitch/features/collections/detail/collection_list_item.module.scss rename to app/javascript/flavours/glitch/features/collections/components/collection_list_item.module.scss index 7fb3d21bbc..eaee216e6a 100644 --- a/app/javascript/flavours/glitch/features/collections/detail/collection_list_item.module.scss +++ b/app/javascript/flavours/glitch/features/collections/components/collection_list_item.module.scss @@ -1,8 +1,7 @@ .wrapper { display: flex; align-items: start; - margin-inline: 24px; - padding-block: 12px; + padding: 12px 16px; gap: 16px; &:not(.wrapperWithoutBorder) { diff --git a/app/javascript/flavours/glitch/features/collections/detail/collection_list_item.tsx b/app/javascript/flavours/glitch/features/collections/components/collection_list_item.tsx similarity index 97% rename from app/javascript/flavours/glitch/features/collections/detail/collection_list_item.tsx rename to app/javascript/flavours/glitch/features/collections/components/collection_list_item.tsx index 2e29a8a009..cb9a875900 100644 --- a/app/javascript/flavours/glitch/features/collections/detail/collection_list_item.tsx +++ b/app/javascript/flavours/glitch/features/collections/components/collection_list_item.tsx @@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { Link } from 'react-router-dom'; +import { CollectionMenu } from '@/flavours/glitch/features/collections/components/collection_menu'; import WarningIcon from '@/material-icons/400-24px/warning.svg?react'; import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections'; import { AvatarById } from 'flavours/glitch/components/avatar'; @@ -15,7 +16,6 @@ import { useAccount } from 'flavours/glitch/hooks/useAccount'; import { domain } from 'flavours/glitch/initial_state'; import classes from './collection_list_item.module.scss'; -import { CollectionMenu } from './collection_menu'; export const AvatarGrid: React.FC<{ accountIds: (string | undefined)[]; diff --git a/app/javascript/flavours/glitch/features/collections/detail/collection_menu.tsx b/app/javascript/flavours/glitch/features/collections/components/collection_menu.tsx similarity index 100% rename from app/javascript/flavours/glitch/features/collections/detail/collection_menu.tsx rename to app/javascript/flavours/glitch/features/collections/components/collection_menu.tsx diff --git a/app/javascript/flavours/glitch/features/collections/detail/share_modal.module.scss b/app/javascript/flavours/glitch/features/collections/components/share_modal.module.scss similarity index 100% rename from app/javascript/flavours/glitch/features/collections/detail/share_modal.module.scss rename to app/javascript/flavours/glitch/features/collections/components/share_modal.module.scss diff --git a/app/javascript/flavours/glitch/features/collections/detail/share_modal.tsx b/app/javascript/flavours/glitch/features/collections/components/share_modal.tsx similarity index 99% rename from app/javascript/flavours/glitch/features/collections/detail/share_modal.tsx rename to app/javascript/flavours/glitch/features/collections/components/share_modal.tsx index c0c07c9676..17caa1207a 100644 --- a/app/javascript/flavours/glitch/features/collections/detail/share_modal.tsx +++ b/app/javascript/flavours/glitch/features/collections/components/share_modal.tsx @@ -20,7 +20,8 @@ import { } from 'flavours/glitch/components/modal_shell'; import { useAppDispatch } from 'flavours/glitch/store'; -import { AuthorNote } from '.'; +import { AuthorNote } from '../detail'; + import classes from './share_modal.module.scss'; const messages = defineMessages({ diff --git a/app/javascript/flavours/glitch/features/collections/detail/index.tsx b/app/javascript/flavours/glitch/features/collections/detail/index.tsx index f915f9501d..1e6ec7bb4f 100644 --- a/app/javascript/flavours/glitch/features/collections/detail/index.tsx +++ b/app/javascript/flavours/glitch/features/collections/detail/index.tsx @@ -23,8 +23,9 @@ import { domain, me } from 'flavours/glitch/initial_state'; import { fetchCollection } from 'flavours/glitch/reducers/slices/collections'; import { useAppDispatch, useAppSelector } from 'flavours/glitch/store'; +import { CollectionMenu } from '../components/collection_menu'; + import { CollectionAccountsList } from './accounts_list'; -import { CollectionMenu } from './collection_menu'; import { useConfirmRevoke } from './revoke_collection_inclusion_modal'; import classes from './styles.module.scss'; @@ -66,7 +67,7 @@ export const AuthorNote: React.FC<{ id: string }> = ({ id }) => { ); }; -export const RevokeControls: React.FC<{ +const RevokeControls: React.FC<{ collection: ApiCollectionJSON; }> = ({ collection }) => { const authorAccount = useAccount(collection.account_id); diff --git a/app/javascript/flavours/glitch/features/collections/index.tsx b/app/javascript/flavours/glitch/features/collections/index.tsx index b98c2c5dad..b629dc42e9 100644 --- a/app/javascript/flavours/glitch/features/collections/index.tsx +++ b/app/javascript/flavours/glitch/features/collections/index.tsx @@ -21,7 +21,7 @@ import { } from 'flavours/glitch/reducers/slices/collections'; import { useAppSelector, useAppDispatch } from 'flavours/glitch/store'; -import { CollectionListItem } from './detail/collection_list_item'; +import { CollectionListItem } from './components/collection_list_item'; import { messages as editorMessages } from './editor'; const messages = defineMessages({ diff --git a/app/javascript/flavours/glitch/features/ui/components/column_subheading.jsx b/app/javascript/flavours/glitch/features/ui/components/column_subheading.jsx deleted file mode 100644 index e970a0bfdd..0000000000 --- a/app/javascript/flavours/glitch/features/ui/components/column_subheading.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import PropTypes from 'prop-types'; - -const ColumnSubheading = ({ text }) => { - return ( -
- {text} -
- ); -}; - -ColumnSubheading.propTypes = { - text: PropTypes.string.isRequired, -}; - -export default ColumnSubheading; diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx index 5e52711273..da9b6a6c72 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx @@ -85,7 +85,7 @@ export const MODAL_COMPONENTS = { 'DOMAIN_BLOCK': DomainBlockModal, 'REPORT': ReportModal, 'REPORT_COLLECTION': ReportCollectionModal, - 'SHARE_COLLECTION': () => import('@/flavours/glitch/features/collections/detail/share_modal').then(module => ({ default: module.CollectionShareModal })), + 'SHARE_COLLECTION': () => import('@/flavours/glitch/features/collections/components/share_modal').then(module => ({ default: module.CollectionShareModal })), 'REVOKE_COLLECTION_INCLUSION': () => import('@/flavours/glitch/features/collections/detail/revoke_collection_inclusion_modal').then(module => ({ default: module.RevokeCollectionInclusionModal })), 'SETTINGS': SettingsModal, 'DEPRECATED_SETTINGS': () => Promise.resolve({ default: DeprecatedSettingsModal }), diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss index d877fc2b76..57d0b7d5ab 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/components.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss @@ -4170,15 +4170,6 @@ a.account__display-name { margin: -6px 10px; } -.column-subheading { - background: var(--color-bg-secondary); - color: var(--color-text-secondary); - padding: 12px 24px; - font-size: 13px; - font-weight: 500; - text-transform: uppercase; -} - .getting-started__wrapper { flex: 0 0 auto; }