fix: display consumer banner inside validators page only

forbole · Jan 19, 2024 · be9678e · be9678e
1 parent 58d57ae
commit be9678e
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 11 deletions.
diff --git 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) => {
         <div className={classes.children}>
           <div className={classes.appBarPlaceholder} />
           {!!bannerLinks.length && <Banner />}
-          <div className={classes.content}>
-            <Typography variant="h4"> {t('stakingDataIsSourcedFromCosmoshub')}</Typography>
-          </div>
+          {navTitle === 'Validators' ? (
+            <div className={classes.content}>
+              <Typography variant="h4"> {t('stakingDataIsSourcedFromCosmoshub')}</Typography>
+            </div>
+          ) : null}
           <div className={cx(className, 'main-content')}>{children}</div>
         </div>
       </div>

diff --git 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
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
@@ -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;