feat: add docker callback in result

ITxPT · May 9, 2022 · 67971c0 · 67971c0
1 parent eb2c8da
commit 67971c0
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 32 deletions.
diff --git a/app/components/InfoMessage.tsx b/app/components/InfoMessage.tsx
@@ -0,0 +1,18 @@
+import { Alert, Box, Container, Stack } from '@mui/material';
+import theme from '../styles/theme';
+
+const InfoMessage = (props: any) => {
+  return (
+    <Box sx={props.sx}>
+      <Container>
+        <Alert severity="info">
+          <Stack direction="row" spacing={1} alignItems="center">
+            {props.children}
+          </Stack>
+        </Alert>
+      </Container>
+    </Box>
+  );
+};
+
+export default InfoMessage;
diff --git a/app/components/TestAlert.tsx b/app/components/TestAlert.tsx
diff --git a/app/components/ValidationResult.tsx b/app/components/ValidationResult.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 import ErrorAlert from './ErrorAlert';
+import InfoMessage from './InfoMessage';
 import TaskRow from './TaskRow';
 import { Session } from '../api/client';
 import useApiClient from '../hooks/useApiClient';
@@ -63,7 +64,6 @@ const ValidationResult = (props: ValidationResultProps) => {
     setAnchorEl(null);
   };
 
-
   React.useEffect(() => {
     if (!session) {
       return;
@@ -114,6 +114,9 @@ const ValidationResult = (props: ValidationResultProps) => {
         <Typography variant="h3">Validation result</Typography>
         { session && <Typography variant="body2" sx={{ [theme.breakpoints.down('md')]: { display: 'none' }}}>[{session.id}]</Typography> }
       </Stack>
+      <InfoMessage>
+        <span>Are you interested in diving deeper? Consider testing it locally with <Link href="https://hub.docker.com/r/lekojson/greenlight"><a target="_blank">Docker</a></Link></span>
+      </InfoMessage>
       <Box>
         { tasks && tasks.length ? (
           tasks.map(task => <TaskRow key={task.name} session={session} task={task} />)

diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
@@ -1,11 +1,13 @@
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { AssignmentRounded, HomeRounded } from '@mui/icons-material';
 import { ThemeProvider } from '@mui/material/styles';
 import { AppProps } from 'next/app';
+import Link from 'next/link';
 import BugReport from '../components/BugReport';
 import Footer from '../components/Footer';
 import NavBar from '../components/NavBar';
 import NavDial from '../components/NavDial';
-import TestAlert from '../components/TestAlert';
+import InfoMessage from '../components/InfoMessage';
 import theme from '../styles/theme';
 import '../styles/globals.css';
 
@@ -22,7 +24,18 @@ const menuItems = [{
 const App = ({ Component, pageProps }: AppProps) => {
   return (
     <ThemeProvider theme={theme}>
-      <TestAlert />
+      <InfoMessage sx={{
+        paddingLeft: '80px',
+        paddingTop: '20px',
+        paddingRight: '40px',
+        [theme.breakpoints.down('md')]: {
+          paddingLeft: '0',
+          paddingTop: '20px',
+        },
+      }}>
+        <span>Note that this is an early build, please provide feedback in <Link href="https://forms.gle/eRfRYeFs2D7JhmPRA"><a target="_blank">this form</a></Link> or one of the channels listed to the right</span>
+        <ArrowForwardIcon />
+      </InfoMessage>
       <BugReport />
       <NavBar items={menuItems} />
       <NavDial items={menuItems} />