acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Subheader

Browse Source
This commit is contained in:
Eric Bailey
2024-02-07 17:21:28 -06:00
parent af5b545e25
commit 8e1575f5ba
6 changed files with 89 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/heart2_filled_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12.489 21.372c8.528-4.78 10.626-10.47 9.022-14.47-.779-1.941-2.414-3.333-4.342-3.763-1.697-.378-3.552.003-5.169 1.287-1.617-1.284-3.472-1.665-5.17-1.287-1.927.43-3.562 1.822-4.34 3.764-1.605 4 .493 9.69 9.021 14.47a1 1 0 0 0 .978 0Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

assets/icons/heart2_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M16.734 5.091c-1.238-.276-2.708.047-4.022 1.38a1 1 0 0 1-1.424 0C9.974 5.137 8.504 4.814 7.266 5.09c-1.263.282-2.379 1.206-2.92 2.556C3.33 10.18 4.252 14.84 12 19.348c7.747-4.508 8.67-9.168 7.654-11.7-.541-1.351-1.657-2.275-2.92-2.557Zm4.777 1.812c1.604 4-.494 9.69-9.022 14.47a1 1 0 0 1-.978 0C2.983 16.592.885 10.902 2.49 6.902c.779-1.942 2.414-3.334 4.342-3.764 1.697-.378 3.552.003 5.169 1.286 1.617-1.283 3.472-1.664 5.17-1.286 1.927.43 3.562 1.822 4.34 3.764Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 608 B

src/alf/atoms.ts
+3
View File
@@ -195,6 +195,9 @@ export const atoms = {
font_bold: {
fontWeight: tokens.fontWeight.semibold,
},
italic: {
fontStyle: 'italic',
},
/*
* Border
src/components/Button.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export type VariantProps = {
}
export type ButtonProps = React.PropsWithChildren<
Pick<PressableProps, 'disabled' | 'onPress'> &
Pick<PressableProps, 'disabled' | 'onPress' | 'testID'> &
AccessibilityProps &
VariantProps & {
label: string
src/components/icons/Heart2.tsx
+9
View File
@@ -0,0 +1,9 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Heart2_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M16.734 5.091c-1.238-.276-2.708.047-4.022 1.38a1 1 0 0 1-1.424 0C9.974 5.137 8.504 4.814 7.266 5.09c-1.263.282-2.379 1.206-2.92 2.556C3.33 10.18 4.252 14.84 12 19.348c7.747-4.508 8.67-9.168 7.654-11.7-.541-1.351-1.657-2.275-2.92-2.557Zm4.777 1.812c1.604 4-.494 9.69-9.022 14.47a1 1 0 0 1-.978 0C2.983 16.592.885 10.902 2.49 6.902c.779-1.942 2.414-3.334 4.342-3.764 1.697-.378 3.552.003 5.169 1.286 1.617-1.283 3.472-1.664 5.17-1.286 1.927.43 3.562 1.822 4.34 3.764Z',
})
export const Heart2_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M12.489 21.372c8.528-4.78 10.626-10.47 9.022-14.47-.779-1.941-2.414-3.333-4.342-3.763-1.697-.378-3.552.003-5.169 1.287-1.617-1.284-3.472-1.665-5.17-1.287-1.927.43-3.562 1.822-4.34 3.764-1.605 4 .493 9.69 9.021 14.47a1 1 0 0 0 .978 0Z',
})
src/screens/ProfileModerationService/index.tsx
+74 -105
View File
@@ -13,7 +13,6 @@ import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader'
import {TextLink} from 'view/com/util/Link'
import {Button as OldButton} from 'view/com/util/forms/Button'
import {Text as RNText} from 'view/com/util/text/Text'
import {RichText} from 'view/com/util/text/RichText'
import {ModServicePrefs} from '#/view/com/moderation/ModServicePrefs'
import * as Toast from 'view/com/util/Toast'
import {useSetTitle} from 'lib/hooks/useSetTitle'
@@ -43,6 +42,9 @@ import {Text} from '#/components/Typography'
import {Loader} from '#/components/Loader'
import {Button, ButtonText} from '#/components/Button'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {Heart2_Stroke2_Corner0_Rounded as Heart, Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled} from '#/components/icons/Heart2'
import {RichText} from '#/components/RichText'
import {InlineLink} from '#/components/Link'
import {ErrorState} from '#/screens/ProfileModerationService/ErrorState'
import {Header} from '#/screens/ProfileModerationService/Header'
@@ -130,6 +132,7 @@ export function ProfileModserviceScreenInner({
preferences: UsePreferencesQueryResponse
modInfo: AppBskyModerationDefs.ModServiceViewDetailed
}) {
const t = useTheme()
const {_} = useLingui()
const pal = usePalette('default')
const {hasSession} = useSession()
@@ -149,17 +152,6 @@ export function ProfileModserviceScreenInner({
// !unpinnedFeed &&
// (!!pinnedFeed || preferences.feeds.pinned.includes(feedInfo.uri))
const descriptionRT = useMemo(
() =>
modInfo.description
? new RichTextAPI({
text: modInfo.description,
facets: modInfo.descriptionFacets,
})
: undefined,
[modInfo],
)
useSetTitle(modInfo.creator.displayName || modInfo.creator.handle)
// event handlers
@@ -187,102 +179,79 @@ export function ProfileModserviceScreenInner({
}
}, [likeUri, isLiked, modInfo, likeMod, unlikeMod, track, _])
// render
// =
return (
<View style={s.hContentRegion}>
<ScrollView
scrollEventThrottle={1}
contentContainerStyle={{
minHeight: Dimensions.get('window').height * 1.5,
}}>
<Header info={modInfo} />
<View
style={[
{
borderTopWidth: 1,
paddingVertical: 20,
paddingHorizontal: 14,
gap: 12,
},
pal.border,
]}>
{descriptionRT ? (
<RichText
testID="modinfoDescription"
type="lg"
style={pal.text}
richText={descriptionRT}
/>
) : (
<RNText type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
<Trans>No description</Trans>
</RNText>
)}
<RNText type="lg" style={pal.textLight}>
<Trans>
Operated by{' '}
<TextLink
href={makeProfileLink(modInfo.creator)}
text={sanitizeHandle(modInfo.creator.handle, '@')}
style={pal.link}
/>
. Handles reports of anti-social behavior, illegal content,
unwanted sexual content, and misinformation.
</Trans>
</RNText>
<ScrollView
scrollEventThrottle={1}
contentContainerStyle={{
minHeight: Dimensions.get('window').height * 1.5,
borderWidth: 0,
}}>
<Header info={modInfo} />
<View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
<OldButton
type="default"
testID="toggleLikeBtn"
accessibilityLabel={_(msg`Like this feed`)}
accessibilityHint=""
disabled={!hasSession || isLikePending || isUnlikePending}
onPress={onToggleLiked}
style={{paddingHorizontal: 10}}>
{isLiked ? (
<HeartIconSolid size={19} style={s.likeColor} />
) : (
<HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
)}
</OldButton>
{typeof modInfo.likeCount === 'number' && (
<TextLink
href={'#todo'}
text={_(
msg`Liked by ${modInfo.likeCount} ${pluralize(
modInfo.likeCount,
'user',
)}`,
)}
style={[pal.textLight, s.semiBold]}
/>
<View style={[a.gap_md]}>
{modInfo.description ? (
<RichText
testID="modinfoDescription"
resolveFacets
value={modInfo.description}
style={[a.text_md, a.leading_normal]}
/>
) : (
<Text
style={[
a.text_md,
a.leading_normal,
t.atoms.text_contrast_700,
{fontStyle: 'italic'},
]}>
<Trans>No description</Trans>
</Text>
)}
<Text style={[a.text_md, a.leading_normal, a.italic, t.atoms.text_contrast_700]}>
<Trans>
Operated by{' '}
<TextLink
href={makeProfileLink(modInfo.creator)}
text={sanitizeHandle(modInfo.creator.handle, '@')}
style={pal.link}
/>
. Handles reports of anti-social behavior, illegal content, unwanted
sexual content, and misinformation.
</Trans>
</Text>
<View style={[a.flex_row, a.gap_md, a.align_center]}>
<Button
testID="toggleLikeBtn"
size='small'
color='secondary'
variant='solid'
shape='round'
label={_(msg`Like this feed`)}
disabled={!hasSession || isLikePending || isUnlikePending}
onPress={onToggleLiked}>
{isLiked ? (
<HeartFilled fill={t.palette.negative_400} />
) : (
<Heart fill={t.atoms.text_contrast_700.color} />
)}
</View>
</Button>
{typeof modInfo.likeCount === 'number' && (
<InlineLink
to={'#todo'}
style={[pal.textLight, s.semiBold]}
>
<Trans>Liked by {modInfo.likeCount} {pluralize(modInfo.likeCount, 'user')}</Trans>
</InlineLink>
)}
</View>
<ModServicePrefs />
<View style={{height: 20}} />
</ScrollView>
</View>
</View>
<ModServicePrefs />
<View style={{height: 20}} />
</ScrollView>
)
}
const styles = StyleSheet.create({
btn: {
flexDirection: 'row',
alignItems: 'center',
gap: 6,
paddingVertical: 7,
paddingHorizontal: 14,
borderRadius: 50,
marginLeft: 6,
},
notFoundContainer: {
margin: 10,
paddingHorizontal: 18,
paddingVertical: 14,
borderRadius: 6,
},
})