Include base styles and update posts list styles.

Automattic · Nov 25, 2024 · c2bf59a · c2bf59a
1 parent 7d514b0
commit c2bf59a
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 107 deletions.
diff --git a/client/reader/recent/index.tsx b/client/reader/recent/index.tsx
@@ -7,6 +7,7 @@ import { useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'reac
 import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import { UnknownAction } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
+import ReaderAvatar from 'calypso/blocks/reader-avatar';
 import AsyncLoad from 'calypso/components/async-load';
 import EmptyContent from 'calypso/components/empty-content';
 import FormattedHeader from 'calypso/components/formatted-header';
@@ -17,7 +18,6 @@ import ReaderOnboarding from '../onboarding';
 import EngagementBar from './engagement-bar';
 import RecentPostField from './recent-post-field';
 import RecentPostSkeleton from './recent-post-skeleton';
-import RecentSeenField from './recent-seen-field';
 import type { PostItem, ReaderPost } from './types';
 import type { AppState } from 'calypso/types';
 
@@ -32,9 +32,13 @@ const Recent = () => {
 	const [ view, setView ] = useState< View >( {
 		type: 'list',
 		search: '',
-		fields: [ 'seen', 'post' ],
+		fields: [ 'icon', 'post' ],
 		perPage: 10,
 		page: 1,
+		layout: {
+			primaryField: 'post',
+			mediaField: 'icon',
+		},
 	} );
 
 	const selectedRecentSidebarFeedId = useSelector< AppState, number | null >(
@@ -75,10 +79,12 @@ const Recent = () => {
 	const fields = useMemo(
 		() => [
 			{
-				id: 'seen',
-				label: translate( 'Seen' ),
+				id: 'icon',
+				label: translate( 'Icon' ),
 				render: ( { item }: { item: ReaderPost } ) => {
-					return <RecentSeenField post={ getPostFromItem( item ) } />;
+					const post = getPostFromItem( item );
+					const iconUrl = post?.site_icon?.img || post?.author?.avatar_URL || '';
+					return iconUrl ? <ReaderAvatar siteIcon={ iconUrl } iconSize={ 24 } /> : null;
 				},
 				enableHiding: false,
 				enableSorting: false,

diff --git a/client/reader/recent/recent-seen-field.tsx b/client/reader/recent/recent-seen-field.tsx
diff --git a/client/reader/recent/style.scss b/client/reader/recent/style.scss
@@ -1,4 +1,6 @@
-@import '@wordpress/base-styles/breakpoints';
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "@wordpress/dataviews/build-style/style.css";
 
 .is-section-reader .recent-feed {
 	$recent-feed-spacing: 12px;
@@ -61,102 +63,84 @@
 		ul {
 			list-style: none;
 			margin: 16px 0 0;
-		}
-
-		li {
-			border-top: 1px solid var( --studio-gray-0 );
-
-			&:hover {
-				cursor: pointer;
-				background-color: #f7faff;
-			}
-
-			&.is-selected {
-				background-color: #f7faff;
-				border-top: 1px solid #3858e940;
-			}
-
-			// This is necessary because the media field wrapper in DataView is rendered even
-			// if no media is given.
-			// The presence of this element adds a gap on the left side of the element,
-			// throwing off the padding.
-			.dataviews-view-list__media-wrapper {
-				display: none;
-			}
 
-			.dataviews-view-list__item-wrapper {
-				justify-content: start;
-
-				[role="gridcell"] {
-					width: 100%;
+			li {
+				border-top: 1px solid var( --studio-gray-0 );
+				
+				&.is-selected + li {
+					border-top: 1px solid var( --studio-gray-0 );
 				}
-			}
-
-			.dataviews-view-list__field-wrapper {
-				width: 100%;
-			}
-
-			.dataviews-view-list__fields {
-				display: flex;
-				align-items: center;
-				gap: $recent-feed-spacing;
-				padding: 0 $recent-feed-spacing;
-			}
 
-			.dataviews-view-list__field:has(.recent-post-field) {
-				overflow: hidden;
-				flex-grow: 1;
-			}
-		}
-
-		.recent-seen-field {
-			padding: $recent-feed-spacing 0;
+				&:hover {
+					cursor: pointer;
+					background-color: #f7faff;
+				}
 
-			img {
-				border-radius: 50%;
-			}
+				&.is-selected {
+					border-top: 1px solid #3858e940;
 
-			svg:hover {
-				fill: unset;
-			}
-		}
+					.dataviews-view-list__item-wrapper {
+						background-color: #f7faff;
+					}
+				}
 
-		.recent-post-field {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			text-align: left;
-			padding: $recent-feed-spacing 0;
-			width: 100%;
-			min-height: fit-content;
-			gap: $recent-feed-spacing;
-
-			%text-shared {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-			}
+				.components-flex {
+					align-items: center;
+				}
 
-			&__title {
-				min-width: 0;
-			}
+				.dataviews-view-list__media-wrapper {
+					border-radius: 50%;
+					width: 24px;
+					height: 24px;
+					background-color: transparent;
 
-			&__title-text {
-				font-weight: 700;
-				font-size: rem(13px);
-				@extend %text-shared;
-			}
+					&::after {
+						box-shadow: none;
+					}
+				}
 
-			&__site-name {
-				font-weight: 400;
-				font-size: rem( 11px );
-				@extend %text-shared;
+				.recent-post-field {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					text-align: left;
+					width: 100%;
+					min-height: fit-content;
+					gap: $recent-feed-spacing;
+
+					%text-shared {
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+
+					&__title {
+						min-width: 0;
+					}
+
+					&__title-text {
+						font-weight: 700;
+						font-size: rem(13px);
+						@extend %text-shared;
+					}
+
+					&__site-name {
+						font-weight: 400;
+						font-size: rem( 11px );
+						line-height: 1;
+						@extend %text-shared;
+					}
+
+					&__featured-image {
+						max-width: 38px;
+						align-self: flex-end;
+						flex-shrink: 0;
+					}
+				}
 			}
 
-			&__featured-image {
-				max-width: 38px;
-				align-self: flex-end;
-				flex-shrink: 0;
+			.dataviews-view-list__item {
+				padding: $recent-feed-spacing;
 			}
 		}