ui updates

testnet-faucet/src/App.tsx

@@ -4,6 +4,7 @@ import { NymThemeProvider } from './theme'
 import { Form } from './components/form'
 import { Header } from './components/header'
 import { GlobalContextProvider } from './context'
+import { Subheader } from './components/subheader'
 
 export const App = () => {
   return (
@@ -26,6 +27,7 @@ export const App = () => {
         </AppBar>
         <Container fixed>
           <Header />
+          <Subheader />
           <Form />
         </Container>
       </GlobalContextProvider>

testnet-faucet/src/components/balance.tsx

@@ -1,39 +1,34 @@
 import { useContext } from 'react'
-import { Card, CardHeader, Typography } from '@mui/material'
-import { GlobalContext } from '../context'
+import { CardHeader, Typography } from '@mui/material'
 import { CancelOutlined, CheckCircleOutline } from '@mui/icons-material'
+import { GlobalContext } from '../context'
 
 export const Balance = () => {
-  const { tokensAreAvailable, balance } = useContext(GlobalContext)
-  console.log(balance)
+  const { tokensAreAvailable } = useContext(GlobalContext)
+
   return (
-    <Card
-      sx={{
-        background: 'transparent',
-        border: (theme) => `1px solid ${theme.palette.common.white}`,
-        p: 2,
-      }}
-    >
-      <CardHeader
-        title={
-          <Typography
-            component="span"
-            variant="h6"
-            data-testid="nymt-balance-message"
-          >
-            {tokensAreAvailable
-              ? 'Tokens are available'
-              : 'Tokens are not currently available'}
-          </Typography>
-        }
-        action={
-          tokensAreAvailable ? (
-            <CheckCircleOutline fontSize="large" color="success" />
-          ) : (
-            <CancelOutlined fontSize="large" color="error" />
-          )
-        }
-      />
-    </Card>
+    <CardHeader
+      title={
+        <Typography
+          variant="h6"
+          data-testid="nymt-balance-message"
+          sx={{
+            color: tokensAreAvailable ? 'success.main' : 'error.main',
+            fontWeight: 'bold',
+          }}
+        >
+          {tokensAreAvailable
+            ? 'Tokens are available'
+            : 'Tokens are not currently available'}
+        </Typography>
+      }
+      avatar={
+        tokensAreAvailable ? (
+          <CheckCircleOutline fontSize="large" color="success" />
+        ) : (
+          <CancelOutlined fontSize="large" color="error" />
+        )
+      }
+    />
   )
 }

testnet-faucet/src/components/form/index.tsx

@@ -53,7 +53,7 @@ export const Form = ({ withInputField }: { withInputField?: boolean }) => {
   return (
     <Box>
       <TextField
-        label="Address"
+        label="Enter your wallet address"
         fullWidth
         {...register('address')}
         sx={{ mb: 2 }}

testnet-faucet/src/components/header.tsx

@@ -1,31 +1,26 @@
-import { Grid, Typography, useMediaQuery } from '@mui/material'
+import { Grid, Typography } from '@mui/material'
 import { Box } from '@mui/system'
 import { Balance } from './balance'
 
 export const Header = () => {
-  const matches = useMediaQuery('(min-width: 500px)')
   return (
     <Box sx={{ mb: 3, mt: 3 }}>
-      <Grid container spacing={1}>
+      <Grid
+        container
+        spacing={1}
+        alignItems="center"
+        justifyContent="space-between"
+      >
         <Grid item xs={12} md={8}>
           <Typography
-            variant="h4"
+            variant="h3"
             sx={{ fontWeight: 'light' }}
             data-testid="token-faucet"
           >
             Nym testnet Sandbox faucet
           </Typography>
-          {matches && (
-            <Typography
-              color="primary"
-              variant="h3"
-              sx={{ fontWeight: 'light' }}
-            >
-              NYMT tokens to your address
-            </Typography>
-          )}
         </Grid>
-        <Grid item xs={12} md={4}>
+        <Grid container item xs={12} md={4} justifyContent="flex-end">
           <Balance />
         </Grid>
       </Grid>

testnet-faucet/src/components/subheader.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Typography } from '@mui/material'
+
+export const Subheader = () => {
+  return (
+    <Typography
+      color="primary"
+      variant="h4"
+      sx={{ fontWeight: 'light', mb: 2 }}
+    >
+      Send 101 NYMT tokens to your address
+    </Typography>
+  )
+}