ui: add info cta for xml and json file location

mattystank · Nov 6, 2023 · a764310 · a764310
1 parent b34dc6a
commit a764310
Showing 1 changed file with 29 additions and 1 deletion.
diff --git a/src/app/pages/resources/download/download.jsx b/src/app/pages/resources/download/download.jsx
@@ -14,8 +14,9 @@ import {
 } from '@material-ui/core';
 import CodeIcon from '@material-ui/icons/Code';
 import GetAppIcon from '@material-ui/icons/GetApp';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 
-import { ChplTextField } from 'components/util';
+import { ChplLink, ChplTextField } from 'components/util';
 import { getAngularService } from 'services/angular-react-helper';
 import { UserContext } from 'shared/contexts';
 import { palette, theme, utilStyles } from 'themes';
@@ -65,6 +66,18 @@ const useStyles = makeStyles({
     alignItems: 'stretch',
     flexDirection: 'column',
   },
+  infoBox: {
+    padding: '16px',
+    backgroundColor: palette.secondary,
+    border: `1px solid ${palette.primary}`,
+    borderRadius: '4px',
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: '16px',
+    marginBottom: '16px',
+    gridGap: '16px',
+    alignItems: 'center',
+  },
 });
 
 const allOptions = [
@@ -167,6 +180,21 @@ function ChplResourcesDownload() {
                         Entire collection of SVAP values that have been associated with a criterion for a certified product. Multiple rows for a single product will appear in the file for any products containing multiple SVAP values and/or SVAP values for multiple criteria. Updated nightly.
                       </li>
                     </ul>
+                    <Box className={classes.infoBox}>
+                      <InfoOutlinedIcon color="primary"/>
+                      <Typography>
+                         JSON and XML files have been moved to the
+                         {' '}
+                         <span>
+                          <ChplLink
+                            text="CHPL API"
+                            external={false} 
+                            inline 
+                            href="#/resources/api">
+                          </ChplLink>
+                        </span>
+                      </Typography>
+                    </Box>
                   </Box>
                   <Card className={classes.downloadCard}>
                     <CardHeader title="Select A File To Download" />