diff --git a/.changeset/ten-wasps-juggle.md b/.changeset/ten-wasps-juggle.md
new file mode 100644
index 0000000000..25b4f11d25
--- /dev/null
+++ b/.changeset/ten-wasps-juggle.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': minor
+---
+
+Resolved styling inconsistencies and title visibility issues in Top Visited and Recently Visited cards
diff --git a/plugins/home/src/components/VisitList/VisitList.test.tsx b/plugins/home/src/components/VisitList/VisitList.test.tsx
index 077c428706..12d0d8593e 100644
--- a/plugins/home/src/components/VisitList/VisitList.test.tsx
+++ b/plugins/home/src/components/VisitList/VisitList.test.tsx
@@ -20,16 +20,9 @@ import { render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
describe('', () => {
- it('renders with mandatory parameters', async () => {
- const { getByText } = await render(
- ,
- );
- expect(getByText('My title')).toBeInTheDocument();
- });
-
it('renders skeleton when loading is true', async () => {
const { container } = await render(
- ,
+ ,
);
expect(container.querySelectorAll('li')).toHaveLength(8);
expect(container.querySelectorAll('.MuiSkeleton-root')).toHaveLength(16);
@@ -38,7 +31,6 @@ describe('', () => {
it('renders specified amount of items', async () => {
const { container } = await render(
', () => {
it('renders some items hidden', async () => {
const { container } = await render(
', () => {
it('renders all items when not collapsed', async () => {
const { container } = await render(
', () => {
const { container, getByText } = await render(
', () => {
const { container, getByText } = await render(
', () => {
const { getByText } = await render(
', () => {
it('renders text warning about no items', async () => {
const { getByText } = await render(
- ,
+ ,
,
);
expect(getByText('There are no visits to show yet.')).toBeInTheDocument();
diff --git a/plugins/home/src/components/VisitList/VisitList.tsx b/plugins/home/src/components/VisitList/VisitList.tsx
index f1dc855d9d..179be8fe48 100644
--- a/plugins/home/src/components/VisitList/VisitList.tsx
+++ b/plugins/home/src/components/VisitList/VisitList.tsx
@@ -15,7 +15,7 @@
*/
import React from 'react';
-import { Collapse, List, Typography, makeStyles } from '@material-ui/core';
+import { Collapse, List } from '@material-ui/core';
import { Visit } from '../../api/VisitsApi';
import { VisitListItem } from './VisitListItem';
import { ItemDetailType } from './ItemDetail';
@@ -23,14 +23,7 @@ import { VisitListEmpty } from './VisitListEmpty';
import { VisitListFew } from './VisitListFew';
import { VisitListSkeleton } from './VisitListSkeleton';
-const useStyles = makeStyles(_theme => ({
- title: {
- marginBottom: '2rem',
- },
-}));
-
export const VisitList = ({
- title,
detailType,
visits = [],
numVisitsOpen = 3,
@@ -38,7 +31,6 @@ export const VisitList = ({
collapsed = true,
loading = false,
}: {
- title: string;
detailType: ItemDetailType;
visits?: Visit[];
numVisitsOpen?: number;
@@ -46,8 +38,6 @@ export const VisitList = ({
collapsed?: boolean;
loading?: boolean;
}) => {
- const classes = useStyles();
-
let listBody: React.ReactElement = <>>;
if (loading) {
listBody = (
@@ -91,9 +81,6 @@ export const VisitList = ({
return (
<>
-
- {title}
-
{listBody}
diff --git a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx
index 23d7f3fffd..1b75895a88 100644
--- a/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx
+++ b/plugins/home/src/homePageComponents/VisitedByType/VisitedByType.tsx
@@ -25,7 +25,6 @@ export const VisitedByType = () => {
return (
>({
name: 'HomePageTopVisited',
+ title: 'Top Visited',
components: () => import('./homePageComponents/VisitedByType/TopVisited'),
}),
);
@@ -211,6 +212,7 @@ export const HomePageTopVisited = homePlugin.provide(
export const HomePageRecentlyVisited = homePlugin.provide(
createCardExtension>({
name: 'HomePageRecentlyVisited',
+ title: 'Recently Visited',
components: () =>
import('./homePageComponents/VisitedByType/RecentlyVisited'),
}),