fix: title spacing on fees and rewards pages

This commit is contained in:
Matthew Russell 2024-02-09 15:47:08 -08:00
parent 0d850bd8b9
commit 6d70b28f30
No known key found for this signature in database
2 changed files with 8 additions and 22 deletions

View File

@ -1,25 +1,17 @@
import { useEffect } from 'react';
import { titlefy } from '@vegaprotocol/utils';
import { ErrorBoundary } from '../../components/error-boundary'; import { ErrorBoundary } from '../../components/error-boundary';
import { FeesContainer } from '../../components/fees-container'; import { FeesContainer } from '../../components/fees-container';
import { useT } from '../../lib/use-t'; import { useT } from '../../lib/use-t';
import { usePageTitleStore } from '../../stores'; import { usePageTitle } from '../../lib/hooks/use-page-title';
export const Fees = () => { export const Fees = () => {
const t = useT(); const t = useT();
const title = t('Fees'); const title = t('Fees');
const { updateTitle } = usePageTitleStore((store) => ({ usePageTitle(title);
updateTitle: store.updateTitle,
}));
useEffect(() => {
updateTitle(titlefy([title]));
}, [updateTitle, title]);
return ( return (
<ErrorBoundary feature="fees"> <ErrorBoundary feature="fees">
<div className="container p-4 mx-auto"> <div className="container p-4 mx-auto">
<h1 className="px-4 pb-4 text-2xl">{title}</h1> <h1 className="md:px-4 md:pb-4 text-2xl">{title}</h1>
<FeesContainer /> <FeesContainer />
</div> </div>
</ErrorBoundary> </ErrorBoundary>

View File

@ -1,24 +1,18 @@
import { useEffect } from 'react'; import { TinyScroll } from '@vegaprotocol/ui-toolkit';
import { titlefy } from '@vegaprotocol/utils';
import { useT } from '../../lib/use-t'; import { useT } from '../../lib/use-t';
import { RewardsContainer } from '../../components/rewards-container'; import { RewardsContainer } from '../../components/rewards-container';
import { usePageTitleStore } from '../../stores';
import { ErrorBoundary } from '../../components/error-boundary'; import { ErrorBoundary } from '../../components/error-boundary';
import { TinyScroll } from '@vegaprotocol/ui-toolkit'; import { usePageTitle } from '../../lib/hooks/use-page-title';
export const Rewards = () => { export const Rewards = () => {
const t = useT(); const t = useT();
const title = t('Rewards'); const title = t('Rewards');
const { updateTitle } = usePageTitleStore((store) => ({ usePageTitle(title);
updateTitle: store.updateTitle,
}));
useEffect(() => {
updateTitle(titlefy([title]));
}, [updateTitle, title]);
return ( return (
<ErrorBoundary feature="rewards"> <ErrorBoundary feature="rewards">
<TinyScroll className="p-4 max-h-full overflow-auto"> <TinyScroll className="p-4 max-h-full overflow-auto">
<h1 className="px-4 pb-4 text-2xl">{title}</h1> <h1 className="md:px-4 pb-4 text-2xl">{title}</h1>
<RewardsContainer /> <RewardsContainer />
</TinyScroll> </TinyScroll>
</ErrorBoundary> </ErrorBoundary>