diff --git a/.changeset/slimy-garlics-eat.md b/.changeset/slimy-garlics-eat.md
new file mode 100644
index 0000000000..3ecc0ce495
--- /dev/null
+++ b/.changeset/slimy-garlics-eat.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+update the EntityNotFound component
diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx
new file mode 100644
index 0000000000..ddb27d584a
--- /dev/null
+++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+
+import { EntityNotFound } from './EntityNotFound';
+
+describe('', () => {
+ it('renders without exploding', async () => {
+ const { getByText } = await renderInTestApp();
+ expect(getByText(/entity was not found/i)).toBeInTheDocument();
+ expect(getByText(/getting started documentation/i)).toBeInTheDocument();
+ expect(getByText(/docs/i)).toBeInTheDocument();
+ });
+});
diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx
index c7560c6894..21ca09dae1 100644
--- a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx
+++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx
@@ -25,12 +25,21 @@ const useStyles = makeStyles(theme => ({
container: {
paddingTop: theme.spacing(24),
paddingLeft: theme.spacing(8),
+ [theme.breakpoints.down('xs')]: {
+ padding: theme.spacing(2),
+ },
},
title: {
paddingBottom: theme.spacing(2),
+ [theme.breakpoints.down('xs')]: {
+ fontSize: 32,
+ },
},
body: {
paddingBottom: theme.spacing(6),
+ [theme.breakpoints.down('xs')]: {
+ paddingBottom: theme.spacing(5),
+ },
},
}));
@@ -38,7 +47,7 @@ export const EntityNotFound = () => {
const classes = useStyles();
return (
-
+
diff --git a/plugins/catalog/src/components/EntityNotFound/Illo.jsx b/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx
similarity index 69%
rename from plugins/catalog/src/components/EntityNotFound/Illo.jsx
rename to plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx
index 36b8d84f5d..6c7bb9d788 100644
--- a/plugins/catalog/src/components/EntityNotFound/Illo.jsx
+++ b/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx
@@ -18,16 +18,29 @@ import React from 'react';
import { makeStyles } from '@material-ui/core';
import IlloSvgUrl from './illo.svg';
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
illo: {
maxWidth: '60%',
top: 100,
right: 20,
position: 'absolute',
+ [theme.breakpoints.down('xs')]: {
+ maxWidth: '96%',
+ position: 'relative',
+ top: 'unset',
+ right: 'unset',
+ margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,
+ },
},
-});
+}));
export const Illo = () => {
const classes = useStyles();
- return
;
+ return (
+
+ );
};
diff --git a/plugins/catalog/src/components/EntityNotFound/illo.svg b/plugins/catalog/src/components/EntityNotFound/Illo/illo.svg
similarity index 100%
rename from plugins/catalog/src/components/EntityNotFound/illo.svg
rename to plugins/catalog/src/components/EntityNotFound/Illo/illo.svg
diff --git a/plugins/catalog/src/components/EntityNotFound/Illo/index.ts b/plugins/catalog/src/components/EntityNotFound/Illo/index.ts
new file mode 100644
index 0000000000..264a75a5b1
--- /dev/null
+++ b/plugins/catalog/src/components/EntityNotFound/Illo/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Illo } from './Illo';