Layout tweaks (#7150)
* Reduce weight of right sidebar active feed * ProfileFeedHeader tweaks --------- Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
@@ -30,8 +30,8 @@ import * as Dialog from '#/components/Dialog'
|
|||||||
import {Divider} from '#/components/Divider'
|
import {Divider} from '#/components/Divider'
|
||||||
import {useRichText} from '#/components/hooks/useRichText'
|
import {useRichText} from '#/components/hooks/useRichText'
|
||||||
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
|
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
|
||||||
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
|
|
||||||
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
||||||
|
import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
|
||||||
import {
|
import {
|
||||||
Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled,
|
Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled,
|
||||||
Heart2_Stroke2_Corner0_Rounded as Heart,
|
Heart2_Stroke2_Corner0_Rounded as Heart,
|
||||||
@@ -91,7 +91,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
|
|||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const {_, i18n} = useLingui()
|
const {_, i18n} = useLingui()
|
||||||
const {hasSession} = useSession()
|
const {hasSession} = useSession()
|
||||||
const {gtPhone, gtMobile} = useBreakpoints()
|
const {gtMobile} = useBreakpoints()
|
||||||
const infoControl = Dialog.useDialogControl()
|
const infoControl = Dialog.useDialogControl()
|
||||||
const playHaptic = useHaptics()
|
const playHaptic = useHaptics()
|
||||||
|
|
||||||
@@ -191,9 +191,8 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
|
|||||||
style={[
|
style={[
|
||||||
a.justify_start,
|
a.justify_start,
|
||||||
{
|
{
|
||||||
paddingVertical: isWeb ? 4 : 6,
|
paddingVertical: isWeb ? 2 : 4,
|
||||||
paddingHorizontal: 8,
|
paddingRight: 8,
|
||||||
paddingRight: 12,
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
@@ -207,10 +206,18 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
|
|||||||
a.absolute,
|
a.absolute,
|
||||||
a.inset_0,
|
a.inset_0,
|
||||||
a.rounded_sm,
|
a.rounded_sm,
|
||||||
a.transition_transform,
|
a.transition_all,
|
||||||
t.atoms.bg_contrast_25,
|
t.atoms.bg_contrast_25,
|
||||||
pressed && t.atoms.bg_contrast_50,
|
{
|
||||||
|
opacity: 0,
|
||||||
|
left: isWeb ? -2 : -4,
|
||||||
|
right: 0,
|
||||||
|
},
|
||||||
|
pressed && {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
hovered && {
|
hovered && {
|
||||||
|
opacity: 1,
|
||||||
transform: [{scaleX: 1.01}, {scaleY: 1.1}],
|
transform: [{scaleX: 1.01}, {scaleY: 1.1}],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@@ -219,7 +226,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
|
|||||||
<View
|
<View
|
||||||
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
|
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
|
||||||
{info.avatar && (
|
{info.avatar && (
|
||||||
<UserAvatar size={32} type="algo" avatar={info.avatar} />
|
<UserAvatar size={36} type="algo" avatar={info.avatar} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<View style={[a.flex_1]}>
|
<View style={[a.flex_1]}>
|
||||||
@@ -237,10 +244,9 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
|
|||||||
<Text
|
<Text
|
||||||
style={[
|
style={[
|
||||||
a.flex_shrink,
|
a.flex_shrink,
|
||||||
a.text_xs,
|
a.text_sm,
|
||||||
a.leading_snug,
|
a.leading_snug,
|
||||||
t.atoms.text_contrast_medium,
|
t.atoms.text_contrast_medium,
|
||||||
gtPhone && a.text_sm,
|
|
||||||
]}
|
]}
|
||||||
numberOfLines={1}>
|
numberOfLines={1}>
|
||||||
{sanitizeHandle(info.creatorHandle, '@')}
|
{sanitizeHandle(info.creatorHandle, '@')}
|
||||||
@@ -256,10 +262,9 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
|
|||||||
/>
|
/>
|
||||||
<Text
|
<Text
|
||||||
style={[
|
style={[
|
||||||
a.text_xs,
|
a.text_sm,
|
||||||
a.leading_snug,
|
a.leading_snug,
|
||||||
t.atoms.text_contrast_medium,
|
t.atoms.text_contrast_medium,
|
||||||
gtPhone && a.text_sm,
|
|
||||||
]}
|
]}
|
||||||
numberOfLines={1}>
|
numberOfLines={1}>
|
||||||
{formatCount(i18n, likeCount)}
|
{formatCount(i18n, likeCount)}
|
||||||
@@ -268,7 +273,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<ChevronDown
|
<Ellipsis
|
||||||
size="md"
|
size="md"
|
||||||
fill={t.atoms.text_contrast_low.color}
|
fill={t.atoms.text_contrast_low.color}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ export function DesktopFeeds() {
|
|||||||
a.text_md,
|
a.text_md,
|
||||||
a.leading_snug,
|
a.leading_snug,
|
||||||
current
|
current
|
||||||
? [a.font_heavy, t.atoms.text]
|
? [a.font_bold, t.atoms.text]
|
||||||
: [t.atoms.text_contrast_medium],
|
: [t.atoms.text_contrast_medium],
|
||||||
]}
|
]}
|
||||||
numberOfLines={1}>
|
numberOfLines={1}>
|
||||||
|
|||||||
Reference in New Issue
Block a user