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;