diff --git a/assets/icons/personPlus_filled_stroke2_corner0_rounded.svg b/assets/icons/personPlus_filled_stroke2_corner0_rounded.svg new file mode 100644 --- /dev/null +++ b/assets/icons/personPlus_filled_stroke2_corner0_rounded.svg @@ -0,0 +1,1 @@ + diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx --- a/src/lib/icons.tsx +++ b/src/lib/icons.tsx @@ -2,98 +2,6 @@ import {StyleProp, TextStyle, ViewStyle} from 'react-native' import Svg, {Ellipse, Line, Path, Rect} from 'react-native-svg' -export function GridIcon({ - style, - solid, -}: { - style?: StyleProp - solid?: boolean -}) { - const DIM = 4 - const ARC = 2 - return ( - - - - - - - ) -} -export function GridIconSolid({style}: {style?: StyleProp}) { - return -} - -export function HomeIcon({ - style, - size, - strokeWidth = 4, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - ) -} - -export function HomeIconSolid({ - style, - size, - strokeWidth = 4, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - ) -} - // Copyright (c) 2020 Refactoring UI Inc. // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE export function MagnifyingGlassIcon({ @@ -147,90 +55,6 @@ ) } -export function MagnifyingGlassIcon2Solid({ - style, - size, - strokeWidth = 2, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - - - ) -} - -// https://github.com/Remix-Design/RemixIcon/blob/master/License -export function BellIcon({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - - ) -} - -// https://github.com/Remix-Design/RemixIcon/blob/master/License -export function BellIconSolid({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - - ) -} - export function CogIcon({ style, size, @@ -263,160 +87,6 @@ ) } -export function CogIconSolid({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth: number -}) { - return ( - - - - ) -} - -// Copyright (c) 2020 Refactoring UI Inc. -// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -export function MoonIcon({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - ) -} - -// Copyright (c) 2020 Refactoring UI Inc. -// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -export function SunIcon({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - ) -} - -// Copyright (c) 2020 Refactoring UI Inc. -// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -export function UserIcon({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - ) -} - -export function UserIconSolid({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - - - ) -} - // Copyright (c) 2020 Refactoring UI Inc. // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE export function UserGroupIcon({ @@ -439,208 +109,6 @@ strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" - /> - - ) -} - -export function RepostIcon({ - style, - size = 24, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth: number -}) { - return ( - - - - ) -} - -// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -export function HeartIcon({ - style, - size = 24, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth: number -}) { - return ( - - - - ) -} - -// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -export function HeartIconSolid({ - style, - size = 24, -}: { - style?: StyleProp - size?: string | number -}) { - return ( - - - - ) -} - -export function UpIcon({ - style, - size, - strokeWidth = 1.3, -}: { - style?: StyleProp - size?: string | number - strokeWidth: number -}) { - return ( - - - - ) -} - -export function UpIconSolid({ - style, - size, -}: { - style?: StyleProp - size?: string | number -}) { - return ( - - - - ) -} - -export function DownIcon({ - style, - size, -}: { - style?: StyleProp - size?: string | number -}) { - return ( - - - - ) -} - -export function DownIconSolid({ - style, - size, -}: { - style?: StyleProp - size?: string | number -}) { - return ( - - - - ) -} - -// Copyright (c) 2020 Refactoring UI Inc. -// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -export function CommentBottomArrow({ - style, - size, - strokeWidth = 1.3, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - let color = 'currentColor' - if ( - style && - typeof style === 'object' && - 'color' in style && - typeof style.color === 'string' - ) { - color = style.color - } - return ( - - ) @@ -715,33 +183,6 @@ ) } -export function ComposeIcon({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - ) -} - export function ComposeIcon2({ style, size, @@ -778,54 +219,6 @@ x2="21" y2="3" strokeWidth={strokeWidth * 1.5} - /> - - ) -} - -export function SquarePlusIcon({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - - - ) @@ -943,33 +336,6 @@ strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z" - /> - - ) -} - -export function ListIcon({ - style, - size, - strokeWidth = 1.5, -}: { - style?: StyleProp - size?: string | number - strokeWidth?: number -}) { - return ( - - ) diff --git a/src/components/icons/Person.tsx b/src/components/icons/Person.tsx --- a/src/components/icons/Person.tsx +++ b/src/components/icons/Person.tsx @@ -15,3 +15,7 @@ export const PersonPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({ path: 'M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM5.678 19c.71-2.909 3.092-5 6.322-5 .621 0 1.206.077 1.748.218a1 1 0 1 0 .504-1.936A8.931 8.931 0 0 0 12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H11a1 1 0 1 0 0-2H5.678ZM18 14a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z', }) + +export const PersonPlus_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H15a3 3 0 1 1 0-6c0-.824.332-1.571.87-2.113C14.739 12.32 13.435 12 12 12Zm6 2a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z', +}) diff --git a/src/components/icons/common.ts b/src/components/icons/common.ts --- a/src/components/icons/common.ts +++ b/src/components/icons/common.ts @@ -1,5 +1,5 @@ import {StyleSheet, TextProps} from 'react-native' -import type {SvgProps, PathProps} from 'react-native-svg' +import type {PathProps, SvgProps} from 'react-native-svg' import {tokens} from '#/alf' diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -8,23 +8,23 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' import {usePalette} from '#/lib/hooks/usePalette' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {cleanError} from '#/lib/strings/errors' +import {s} from '#/lib/styles' import {logger} from '#/logger' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useNotificationFeedQuery} from '#/state/queries/notifications/feed' import {useUnreadNotificationsApi} from '#/state/queries/notifications/unread' -import {s} from 'lib/styles' -import {EmptyState} from '../util/EmptyState' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {List, ListRef} from '../util/List' -import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' -import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {CenteredView} from '../util/Views' +import {EmptyState} from '#/view/com/util/EmptyState' +import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' +import {List, ListRef} from '#/view/com/util/List' +import {NotificationFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn' +import {CenteredView} from '#/view/com/util/Views' import {FeedItem} from './FeedItem' import hairlineWidth = StyleSheet.hairlineWidth -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'} diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -17,11 +17,6 @@ ModerationOpts, } from '@atproto/api' import {AtUri} from '@atproto/api' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, - Props, -} from '@fortawesome/react-native-fontawesome' import {msg, plural, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' @@ -29,7 +24,6 @@ import {FeedNotification} from '#/state/queries/notifications/feed' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {usePalette} from 'lib/hooks/usePalette' -import {HeartIconSolid} from 'lib/icons' import {makeProfileLink} from 'lib/routes/links' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' @@ -37,6 +31,14 @@ import {colors, s} from 'lib/styles' import {isWeb} from 'platform/detection' import {precacheProfile} from 'state/queries/profile' +import {atoms as a, useTheme} from '#/alf' +import { + ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon, + ChevronTop_Stroke2_Corner0_Rounded as ChevronUpIcon, +} from '#/components/icons/Chevron' +import {Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled} from '#/components/icons/Heart2' +import {PersonPlus_Filled_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person' +import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost' import {Link as NewLink} from '#/components/Link' import {ProfileHoverCard} from '#/components/ProfileHoverCard' import {FeedSourceCard} from '../feeds/FeedSourceCard' @@ -47,6 +49,7 @@ import {Text} from '../util/text/Text' import {TimeElapsed} from '../util/TimeElapsed' import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar' + import hairlineWidth = StyleSheet.hairlineWidth const MAX_AUTHORS = 5 @@ -71,6 +74,7 @@ const queryClient = useQueryClient() const pal = usePalette('default') const {_} = useLingui() + const t = useTheme() const [isAuthorsExpanded, setAuthorsExpanded] = useState(false) const itemHref = useMemo(() => { if (item.type === 'post-like' || item.type === 'repost') { @@ -150,30 +154,25 @@ } let action = '' - let icon: Props['icon'] | 'HeartIconSolid' - let iconStyle: Props['style'] = [] + let icon = ( + + ) if (item.type === 'post-like') { action = _(msg`liked your post`) - icon = 'HeartIconSolid' - iconStyle = [ - s.likeColor as FontAwesomeIconStyle, - {position: 'relative', top: -4}, - ] } else if (item.type === 'repost') { action = _(msg`reposted your post`) - icon = 'retweet' - iconStyle = [s.green3 as FontAwesomeIconStyle] + icon = } else if (item.type === 'follow') { action = _(msg`followed you`) - icon = 'user-plus' - iconStyle = [s.blue3 as FontAwesomeIconStyle] + icon = } else if (item.type === 'feedgen-like') { action = _(msg`liked your custom feed`) - icon = 'HeartIconSolid' - iconStyle = [ - s.likeColor as FontAwesomeIconStyle, - {position: 'relative', top: -4}, - ] } else { return null } @@ -200,18 +199,10 @@ item.type === 'repost' } onBeforePress={onBeforePress}> - + {/* TODO: Prevent conditional rendering and move toward composable notifications for clearer accessibility labeling */} - {icon === 'HeartIconSolid' ? ( - - ) : ( - - )} + {icon} - @@ -369,9 +359,8 @@ +{authors.length - MAX_AUTHORS} ) : undefined} - diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -8,12 +8,14 @@ } from 'react-native' import {usePalette} from 'lib/hooks/usePalette' -import {HeartIconSolid} from 'lib/icons' import {s} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' -import {useTheme as useTheme_NEW} from '#/alf' +import {atoms as a, useTheme as useTheme_NEW} from '#/alf' import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble' -import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2' +import { + Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled, + Heart2_Stroke2_Corner0_Rounded as HeartIconOutline, +} from '#/components/icons/Heart2' import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost' import hairlineWidth = StyleSheet.hairlineWidth @@ -139,14 +141,14 @@ const pal = usePalette('default') return ( - - + - +