diff --git a/apps/web-neutron/src/components/layout/index.tsx b/apps/web-neutron/src/components/layout/index.tsx index b9aa000820..3a7e0aa70b 100644 --- a/apps/web-neutron/src/components/layout/index.tsx +++ b/apps/web-neutron/src/components/layout/index.tsx @@ -38,9 +38,11 @@ const Layout = (props: LayoutProps) => {
{!!bannerLinks.length && } -
- {t('stakingDataIsSourcedFromCosmoshub')} -
+ {navTitle === 'Validators' ? ( +
+ {t('stakingDataIsSourcedFromCosmoshub')} +
+ ) : null}
{children}
diff --git a/apps/web-neutron/src/components/layout/styles.ts b/apps/web-neutron/src/components/layout/styles.ts index 71a8a4af0f..77337d7caa 100644 --- a/apps/web-neutron/src/components/layout/styles.ts +++ b/apps/web-neutron/src/components/layout/styles.ts @@ -38,12 +38,13 @@ const useStyles = makeStyles()((theme) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-around', + textAlign: 'center', color: theme.palette.custom.fonts.fontOne, backgroundColor: theme.palette.custom.wallet.backgroundTwo, padding: theme.spacing(1.5), marginTop: theme.spacing(2), marginLeft: theme.spacing(1), - marginRight: theme.spacing(1) + marginRight: theme.spacing(1), }, })); diff --git a/apps/web-neutron/src/components/layout/types.ts b/apps/web-neutron/src/components/layout/types.ts deleted file mode 100644 index 0e29691800..0000000000 --- a/apps/web-neutron/src/components/layout/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ReactNode } from 'react'; - -export interface LayoutProps { - children: ReactNode; - navTitle?: string; - className?: string; -} diff --git a/apps/web-neutron/src/components/nav/components/title_bar/styles.ts b/apps/web-neutron/src/components/nav/components/title_bar/styles.ts new file mode 100644 index 0000000000..5b6e7f2c3a --- /dev/null +++ b/apps/web-neutron/src/components/nav/components/title_bar/styles.ts @@ -0,0 +1,76 @@ +import { makeStyles } from 'tss-react/mui'; + +const useStyles = makeStyles()((theme) => ({ + root: { + padding: theme.spacing(1, 2), + display: 'flex', + justifyContent: 'center', + flexDirection: 'column', + alignItems: 'flex-start', + [theme.breakpoints.up('lg')]: { + padding: theme.spacing(1, 3), + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + flexDirection: 'row', + width: '100%', + '& .MuiTypography-h1': { + lineHeight: 1, + alignSelf: 'flex-end', + }, + }, + '&& h1': { + lineHeight: '56px', + }, + }, + logo: { + height: '36px', + }, + content: { + width: '100%', + background: theme.palette.custom.general.surfaceOne, + marginTop: theme.spacing(2), + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(1), + display: 'flex', + flexDirection: 'column', + flexWrap: 'wrap', + alignItems: 'flex-start', + [theme.breakpoints.up('md')]: { + flexDirection: 'row', + }, + [theme.breakpoints.up('lg')]: { + alignItems: 'center', + justifyContent: 'space-between', + marginTop: 0, + width: '70%', + padding: theme.spacing(1, 3), + flexWrap: 'nowrap', + }, + }, + item: { + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'flex-start', + flexDirection: 'column', + padding: theme.spacing(1), + width: '100%', + '& .label': { + marginRight: theme.spacing(1), + }, + [theme.breakpoints.up('sm')]: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + [theme.breakpoints.up('md')]: { + width: '50%', + }, + [theme.breakpoints.up('lg')]: { + padding: 0, + width: 'auto', + }, + }, +})); + +export default useStyles;