Skip to content

Clean up page header styles and remove header illustrations #98461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Beamanator merged 3 commits into from
Aug 13, 2026
Merged

Clean up page header styles and remove header illustrations #98461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
de7faa5
Use h2 styles for page headers and remove header illustrations
shawnborton Aug 12, 2026
952c3ac
Update company cards header test for removed header illustration
MelvinBot Aug 13, 2026
fd71e51
Address review: reuse styles.noWrap and use shouldUseHeadlineHeader f…
MelvinBot Aug 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions src/components/HeaderWithBackButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ function HeaderWithBackButton({
onThreeDotsButtonPress = () => {},
report,
policyAvatar,
policyAvatarSize = CONST.AVATAR_SIZE.DEFAULT,
titleStyles,
shouldShowReportAvatarWithDisplay = false,
shouldDisplayStatus,
shouldShowBackButton = true,
Expand All @@ -68,6 +70,7 @@ function HeaderWithBackButton({
subtitle = '',
title = '',
titleColor,
numberOfTitleLines = 1,
threeDotsAnchorAlignment = {
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
Expand Down Expand Up @@ -143,9 +146,9 @@ function HeaderWithBackButton({
<Header
title={title}
subtitle={stepCounterTranslation ?? subtitle}
textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, shouldUseHeadlineHeader && styles.textHeadlineH2]}
textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, shouldUseHeadlineHeader && styles.textHeadlineH2, titleStyles]}
subTitleLink={subTitleLink}
numberOfTitleLines={1}
numberOfTitleLines={numberOfTitleLines}
isScreenHeader
shouldSkipFocusAfterTransition={shouldSkipFocusAfterTransition}
/>
Expand All @@ -167,6 +170,8 @@ function HeaderWithBackButton({
subtitle,
title,
titleColor,
titleStyles,
numberOfTitleLines,
translate,
openParentReportInCurrentTab,
shouldDisplayStatus,
Expand Down Expand Up @@ -276,14 +281,16 @@ function HeaderWithBackButton({
{!!policyAvatar &&
(policyAvatar.type === CONST.ICON_TYPE_WORKSPACE ? (
<WorkspaceAvatar
containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]}
containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(policyAvatarSize)), styles.mr3]}
size={policyAvatarSize}
source={policyAvatar.source}
name={policyAvatar.name ?? ''}
avatarID={policyAvatar.id ?? CONST.DEFAULT_NUMBER_ID}
/>
) : (
<UserAvatar
containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]}
containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(policyAvatarSize)), styles.mr3]}
size={policyAvatarSize}
source={policyAvatar.source}
accountID={getAccountIDFromAvatarID(policyAvatar.id)}
/>
Expand Down
10 changes: 9 additions & 1 deletion src/components/HeaderWithBackButton/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type {PopoverMenuItem} from '@components/PopoverMenu';

import type {Action} from '@hooks/useSingleExecution';

import type CONST from '@src/CONST';
import type {StepCounterParams} from '@src/languages/params';
import type {TranslationPaths} from '@src/languages/types';
import type {Report} from '@src/types/onyx';
Expand All @@ -12,8 +13,9 @@ import type ChildrenProps from '@src/types/utils/ChildrenProps';
import type IconAsset from '@src/types/utils/IconAsset';

import type {ReactNode} from 'react';
import type {StyleProp, ViewStyle} from 'react-native';
import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import type {ValueOf} from 'type-fest';

type ThreeDotsMenuItem = {
/** An icon element displayed on the left side */
Expand Down Expand Up @@ -163,6 +165,12 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
/** Policy avatar to display in the header */
policyAvatar?: Icon;

/** Size of the policy avatar. Defaults to CONST.AVATAR_SIZE.DEFAULT */
policyAvatarSize?: ValueOf<typeof CONST.AVATAR_SIZE>;

/** Additional styles to apply to the title text */
titleStyles?: StyleProp<TextStyle>;

/** Additional styles to add to the component */
style?: StyleProp<ViewStyle>;

Expand Down
3 changes: 0 additions & 3 deletions src/pages/TeachersUnite/SaveTheWorldPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import SectionSubtitleHTML from '@components/SectionSubtitleHTML';

import useConfirmModal from '@hooks/useConfirmModal';
import useDocumentTitle from '@hooks/useDocumentTitle';
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
Expand Down Expand Up @@ -47,7 +46,6 @@ function SaveTheWorldPage() {
const theme = useTheme();
const {isActingAsDelegate} = useDelegateNoAccessState();
const {showDelegateNoAccessModal} = useDelegateNoAccessActions();
const illustrations = useMemoizedLazyIllustrations(['TeachersUnite']);
const [personalOffsetsEnabled = false] = useOnyx(ONYXKEYS.NVP_PERSONAL_OFFSETS);
const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID);
const [fundList] = useOnyx(ONYXKEYS.FUND_LIST);
Expand Down Expand Up @@ -151,7 +149,6 @@ function SaveTheWorldPage() {
shouldDisplaySearchRouter
shouldDisplayHelpButton
onBackButtonPress={Navigation.goBack}
icon={illustrations.TeachersUnite}
shouldUseHeadlineHeader
/>
<ScrollView contentContainerStyle={styles.pt3}>
Expand Down
4 changes: 1 addition & 3 deletions src/pages/domain/Admins/DomainAdminsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import DomainAdminsTable from '@components/Tables/DomainAdminsTable';

import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useDomainDocumentTitle from '@hooks/useDomainDocumentTitle';
import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useOnyx from '@hooks/useOnyx';
Expand Down Expand Up @@ -47,7 +47,6 @@ function DomainAdminsPage({route}: DomainAdminsPageProps) {
const styles = useThemeStyles();
const theme = useTheme();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const illustrations = useMemoizedLazyIllustrations(['UserShield']);
const icons = useMemoizedLazyExpensifyIcons(['Gear', 'Plus', 'DotIndicator']);

const [adminAccountIDs] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`, {
Expand Down Expand Up @@ -145,7 +144,6 @@ function DomainAdminsPage({route}: DomainAdminsPageProps) {
<HeaderWithBackButton
title={translate('domain.admins.title')}
onBackButtonPress={Navigation.goBack}
icon={illustrations.UserShield}
shouldShowBackButton={shouldUseNarrowLayout}
shouldUseHeadlineHeader
shouldDisplayHelpButton
Expand Down
7 changes: 0 additions & 7 deletions src/pages/domain/BaseDomainMembersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import useThemeStyles from '@hooks/useThemeStyles';

import Navigation from '@navigation/Navigation';

import type IconAsset from '@src/types/utils/IconAsset';

import React from 'react';
import {View} from 'react-native';

Expand All @@ -31,9 +29,6 @@ type BaseDomainMembersPageProps = {
/** Content to display in the header (e.g., Add/Settings buttons) */
headerContent?: React.ReactNode;

/** Icon displayed in the header of the tab */
headerIcon?: IconAsset;

/** Stores list of selected members */
selectedMembers?: string[];

Expand Down Expand Up @@ -64,7 +59,6 @@ function BaseDomainMembersPage({
members,
headerTitle,
headerContent,
headerIcon,
selectedMembers = [],
setSelectedMembers,
useSelectionModeHeader,
Expand All @@ -90,7 +84,6 @@ function BaseDomainMembersPage({
<HeaderWithBackButton
title={useSelectionModeHeader ? translate('common.selectMultiple') : headerTitle}
onBackButtonPress={onBackButtonPress ?? Navigation.goBack}
icon={!useSelectionModeHeader ? headerIcon : undefined}
shouldShowBackButton={shouldUseNarrowLayout}
shouldUseHeadlineHeader={!useSelectionModeHeader}
shouldDisplayHelpButton
Expand Down
1 change: 1 addition & 0 deletions src/pages/domain/DomainInitialPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ function DomainInitialPage({route}: DomainInitialPageProps) {
>
<HeaderWithBackButton
title={domainName}
shouldUseHeadlineHeader
onBackButtonPress={() => Navigation.goBack(ROUTES.DOMAINS_LIST.route)}
shouldDisplayHelpButton={shouldUseNarrowLayout}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/domain/DomainSamlPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ function DomainSamlPage({route}: DomainSamlPageProps) {
>
<HeaderWithBackButton
title={translate('domain.saml')}
shouldUseHeadlineHeader
onBackButtonPress={Navigation.goBack}
icon={illustrations.LockClosed}
shouldShowBackButton={shouldUseNarrowLayout}
shouldDisplayHelpButton
/>
Expand Down
4 changes: 1 addition & 3 deletions src/pages/domain/Groups/DomainGroupsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type {DomainGroupRowData} from '@components/Tables/DomainGroupsTable';
import DomainGroupsTable from '@components/Tables/DomainGroupsTable';

import useDomainDocumentTitle from '@hooks/useDomainDocumentTitle';
import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useOnyx from '@hooks/useOnyx';
Expand Down Expand Up @@ -46,7 +46,6 @@ function DomainGroupsPage({route}: DomainGroupsPageProps) {
const icons = useMemoizedLazyExpensifyIcons(['Plus']);
const styles = useThemeStyles();
const {translate} = useLocalize();
const illustrations = useMemoizedLazyIllustrations(['Members']);
const {shouldUseNarrowLayout} = useResponsiveLayout();
const {isOffline} = useNetwork();
const shouldDisplayButtonsInSeparateLine = useShouldDisplayButtonsInSeparateLine();
Expand Down Expand Up @@ -114,7 +113,6 @@ function DomainGroupsPage({route}: DomainGroupsPageProps) {
<HeaderWithBackButton
title={translate('domain.groups.title')}
onBackButtonPress={Navigation.popToSidebar}
icon={illustrations.Members}
shouldShowBackButton={shouldUseNarrowLayout}
shouldUseHeadlineHeader
>
Expand Down
4 changes: 1 addition & 3 deletions src/pages/domain/Members/DomainMembersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ function DomainMembersPage({route}: DomainMembersPageProps) {
const {domainAccountID} = route.params;
const {translate, formatPhoneNumber} = useLocalize();
const styles = useThemeStyles();
const illustrations = useMemoizedLazyIllustrations(['Profile', 'LaptopWithMembers', 'LockClosed', 'BuildingCross', 'Encryption']);
const illustrations = useMemoizedLazyIllustrations(['LaptopWithMembers', 'LockClosed', 'BuildingCross', 'Encryption']);
const icons = useMemoizedLazyExpensifyIcons(['Plus', 'Gear', 'DotIndicator', 'RemoveMembers', 'Download', 'Transfer']);
const {shouldUseNarrowLayout} = useResponsiveLayout();
const [selectedMembers, setSelectedMembers] = useState<string[]>([]);
Expand Down Expand Up @@ -303,7 +303,6 @@ function DomainMembersPage({route}: DomainMembersPageProps) {
<HeaderWithBackButton
title={translate('domain.domainMembers')}
onBackButtonPress={Navigation.goBack}
icon={illustrations.Profile}
shouldShowBackButton={shouldUseNarrowLayout}
shouldDisplayHelpButton
/>
Expand Down Expand Up @@ -346,7 +345,6 @@ function DomainMembersPage({route}: DomainMembersPageProps) {
domainAccountID={domainAccountID}
members={members}
headerTitle={translate('domain.members.title')}
headerIcon={illustrations.Profile}
headerContent={getHeaderButtons()}
selectedMembers={selectedMembers}
setSelectedMembers={setSelectedMembers}
Expand Down
4 changes: 1 addition & 3 deletions src/pages/settings/AboutPage/AboutPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Text from '@components/Text';

import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useDocumentTitle from '@hooks/useDocumentTitle';
import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
Expand Down Expand Up @@ -65,7 +65,6 @@ type MenuItem = WithSentryLabel & {

function AboutPage() {
const icons = useMemoizedLazyExpensifyIcons(['NewWindow', 'Link', 'Keyboard', 'Eye', 'MoneyBag', 'Bug']);
const illustrations = useMemoizedLazyIllustrations(['PalmTree']);
const {translate} = useLocalize();
const styles = useThemeStyles();
const popoverAnchor = useRef<View>(null);
Expand Down Expand Up @@ -175,7 +174,6 @@ function AboutPage() {
shouldDisplaySearchRouter
shouldDisplayHelpButton
onBackButtonPress={Navigation.goBack}
icon={illustrations.PalmTree}
shouldUseHeadlineHeader
/>
<ScrollView contentContainerStyle={styles.pt3}>
Expand Down
4 changes: 1 addition & 3 deletions src/pages/settings/Agents/AgentsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import useChatWithAgent from '@hooks/useChatWithAgent';
import useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions';
import useConfirmModal from '@hooks/useConfirmModal';
import useDocumentTitle from '@hooks/useDocumentTitle';
import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
import useNetwork from '@hooks/useNetwork';
Expand Down Expand Up @@ -52,7 +52,6 @@ function AgentsPage() {
const {isOffline} = useNetwork();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const shouldDisplayButtonsInSeparateLine = useShouldDisplayButtonsInSeparateLine();
const illustrations = useMemoizedLazyIllustrations(['AiBot']);
const icons = useMemoizedLazyExpensifyIcons(['Plus', 'Trashcan']);
const chatWithAgent = useChatWithAgent();
const switchToDelegator = useSwitchToDelegator();
Expand Down Expand Up @@ -247,7 +246,6 @@ function AgentsPage() {
offlineIndicatorStyle={styles.mtAuto}
>
<HeaderWithBackButton
icon={!selectionModeHeader ? illustrations.AiBot : undefined}
onBackButtonPress={() => {
if (isMobileSelectionModeEnabled) {
clearSelectedAgents();
Expand Down
3 changes: 1 addition & 2 deletions src/pages/settings/Copilot/CopilotPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const accountDelegationSelector = (accountValue: Account | undefined) => ({

function CopilotPage() {
const icons = useMemoizedLazyExpensifyIcons(['ArrowCircleClockwise', 'CircleSlash', 'Pencil', 'ThreeDots', 'UserPlus']);
const illustrations = useMemoizedLazyIllustrations(['Copilots', 'Members']);
const illustrations = useMemoizedLazyIllustrations(['Copilots']);
const styles = useThemeStyles();
const {localeCompare, translate, formatPhoneNumber} = useLocalize();
const {shouldUseNarrowLayout} = useResponsiveLayout();
Expand Down Expand Up @@ -413,7 +413,6 @@ function CopilotPage() {
title={translate('delegate.copilot')}
shouldShowBackButton={shouldUseNarrowLayout}
onBackButtonPress={Navigation.goBack}
icon={illustrations.Members}
shouldUseHeadlineHeader
shouldDisplaySearchRouter
shouldDisplayHelpButton
Expand Down
3 changes: 1 addition & 2 deletions src/pages/settings/HelpPage/HelpPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import {View} from 'react-native';

function HelpPage() {
const icons = useMemoizedLazyExpensifyIcons(['ConciergeAvatar', 'NewWindow', 'Monitor']);
const illustrations = useMemoizedLazyIllustrations(['Chalkboard', 'LifeRing', 'TopiaryDollarSign']);
const illustrations = useMemoizedLazyIllustrations(['Chalkboard', 'TopiaryDollarSign']);
const themeIllustrations = useThemeIllustrations();
const {translate} = useLocalize();
const {shouldUseNarrowLayout} = useResponsiveLayout();
Expand Down Expand Up @@ -194,7 +194,6 @@ function HelpPage() {
>
<HeaderWithBackButton
title={translate('common.help')}
icon={illustrations.LifeRing}
shouldUseHeadlineHeader
shouldShowBackButton={shouldUseNarrowLayout}
shouldDisplaySearchRouter
Expand Down
3 changes: 0 additions & 3 deletions src/pages/settings/Preferences/PreferencesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import Text from '@components/Text';

import {useCurrencyListActions} from '@hooks/useCurrencyList';
import useDocumentTitle from '@hooks/useDocumentTitle';
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import usePolicy from '@hooks/usePolicy';
Expand Down Expand Up @@ -36,7 +35,6 @@ import usePreferencesSectionIllustration from './usePreferencesSectionIllustrati

function PreferencesPage() {
const {getCurrencySymbol} = useCurrencyListActions();
const illustrations = useMemoizedLazyIllustrations(['Gears']);
const preferencesIllustration = usePreferencesSectionIllustration();
const [priorityMode] = useOnyx(ONYXKEYS.NVP_PRIORITY_MODE);

Expand Down Expand Up @@ -66,7 +64,6 @@ function PreferencesPage() {
>
<HeaderWithBackButton
title={translate('common.preferences')}
icon={illustrations.Gears}
shouldUseHeadlineHeader
shouldShowBackButton={shouldUseNarrowLayout}
shouldDisplaySearchRouter
Expand Down
6 changes: 1 addition & 5 deletions src/pages/settings/Profile/ProfilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import AvatarSkeleton from '@components/AvatarSkeleton';
import Button from '@components/ButtonComposed';
import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import {loadIllustration} from '@components/Icon/IllustrationLoader';
import type {IllustrationName} from '@components/Icon/IllustrationLoader';
import MenuItemGroup from '@components/MenuItemGroup';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
Expand All @@ -18,7 +16,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
import useDocumentTitle from '@hooks/useDocumentTitle';
import {useIsAppLoadPending} from '@hooks/useInFlightRequests';
import useIsAgentAccount from '@hooks/useIsAgentAccount';
import {useMemoizedLazyAsset, useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
Expand Down Expand Up @@ -82,7 +80,6 @@ function ProfilePage() {
const accountID = currentUserPersonalDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID;
const isAgentAccount = useIsAgentAccount();
const [agentPrompt] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`);
const {asset: Profile} = useMemoizedLazyAsset(() => loadIllustration('Profile' as IllustrationName));
const icons = useMemoizedLazyExpensifyIcons(['QrCode']);

const contactMethodBrickRoadIndicator = getLoginListBrickRoadIndicator(loginList, currentUserPersonalDetails?.email);
Expand Down Expand Up @@ -205,7 +202,6 @@ function ProfilePage() {
shouldShowBackButton={shouldUseNarrowLayout}
shouldDisplaySearchRouter
shouldDisplayHelpButton
icon={Profile}
shouldUseHeadlineHeader
/>
<ScrollView
Expand Down
Loading
Loading