responsive tweaks

2021-11-20 21:24:30 +00:00
parent 4953b40a42
commit d764b11122
4 changed files with 12 additions and 8 deletions
@@ -2,7 +2,7 @@ import { AppBar, Container, Toolbar } from '@mui/material'
 import logo from './images/nym-logo.svg'
 import { NymThemeProvider } from './theme'
 import { Form } from './components/form'
-import { Heading } from './components/heading'
+import { Header } from './components/heading'
 import { GlobalContextProvider } from './context'

 export const App = () => {
@@ -25,7 +25,7 @@ export const App = () => {
          </Container>
        </AppBar>
        <Container fixed>
-          <Heading />
+          <Header />
          <Form />
        </Container>
      </GlobalContextProvider>
@@ -14,7 +14,7 @@ export const Balance = ({ balance }: { balance: string }) => {
      <CardHeader
        title={
          <Typography variant="h5">
-            The total number of tokens available is currently{' '}
+            The total number of available tokens is currently{' '}
            <Typography
              component="span"
              variant="h5"
@@ -1,15 +1,18 @@
-import { Typography } from '@mui/material'
+import { Typography, useMediaQuery } from '@mui/material'
 import { Box } from '@mui/system'

-export const Heading = () => {
+export const Header = () => {
+  const matches = useMediaQuery('(min-width: 500px)')
  return (
    <Box sx={{ mb: 5, mt: 3 }}>
      <Typography variant="h4" sx={{ fontWeight: 'light' }}>
        Nym token faucet
      </Typography>
-      <Typography color="primary" variant="h3" sx={{ fontWeight: 'light' }}>
-        Tokens to your address
-      </Typography>
+      {matches && (
+        <Typography color="primary" variant="h3" sx={{ fontWeight: 'light' }}>
+          Tokens to your address
+        </Typography>
+      )}
    </Box>
  )
 }
@@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nym Testnet Faucet</title>
  </head>
  <body>