Update Reader iconography (#24132)

* Update icons in Reader main menu

* Update icon in comments

* Slightly inrease title font for posts in Reader

* Update release notes

* Tweak indicators

Author: kean

Modules/Sources/WordPressUI/Views/ScaledImage.swift

@@ -0,0 +1,21 @@
+import SwiftUI
+
+/// A simple view for scaling the given icon to the target size.
+public struct ScaledImage: View {
+    private let imageName: String
+    @ScaledMetric(relativeTo: .body) var height = 17
+
+    /// - warning: The image should have `Preserve Vector Data` option enabled
+    /// for the best results.
+    public init(_ name: String, height: CGFloat, relativeTo textSyle: Font.TextStyle = .body) {
+        self.imageName = name
+        self._height = ScaledMetric(wrappedValue: height, relativeTo: textSyle)
+    }
+
+    public var body: some View {
+        Image(imageName)
+            .resizable()
+            .aspectRatio(contentMode: .fit)
+            .frame(height: height)
+    }
+}

RELEASE-NOTES.txt

@@ -5,6 +5,7 @@
 * [*] Add depth indicators for comment threads to make them easier to follow [#24117]
 * [*] Enable dismissing the virtual keyboard in the experimental editor [#23988]
 * [*] Remove Submit Feedback form from the Me menu [#24020]
+* [*] Update iconography in Reader to match WordPress design system [#24132]
 * [*] Fix unselectable group blocks in the experimental editor [https://github.com/wordpress-mobile/GutenbergKit/pull/68]
 * [*] Prevent a intermittent crash when opening the experimental editor's "more" menu [#24065]
 * [*] Fix an issue with follow/unfollow buttons not working for tags [#24130]

WordPress/Classes/ViewRelated/Comments/Views/Detail/CommentContentTableViewCell.swift

@@ -324,15 +324,15 @@ private extension CommentContentTableViewCell {
         accessoryButton?.setImage(accessoryButtonImage, for: .normal)
         accessoryButton?.addTarget(self, action: #selector(accessoryButtonTapped), for: .touchUpInside)
 
-        replyButton.configuration = makeReactionButtonConfiguration(systemImage: "arrowshape.turn.up.left")
+        replyButton.configuration = makeReactionButtonConfiguration(image: UIImage(named: "icon-reader-comment-reply"))
         replyButton.configuration?.contentInsets.leading = 0
         replyButton.tintColor = .secondaryLabel
         replyButton.setTitle(.reply, for: .normal)
         replyButton.addTarget(self, action: #selector(replyButtonTapped), for: .touchUpInside)
         replyButton.maximumContentSizeCategory = .accessibilityMedium
         replyButton.accessibilityIdentifier = .replyButtonAccessibilityId
 
-        likeButton.configuration = makeReactionButtonConfiguration(systemImage: "star")
+        likeButton.configuration = makeReactionButtonConfiguration(image: WPStyleGuide.ReaderDetail.likeToolbarIcon)
         likeButton.tintColor = .secondaryLabel
 
         likeButton.addTarget(self, action: #selector(likeButtonTapped), for: .touchUpInside)
@@ -342,18 +342,18 @@ private extension CommentContentTableViewCell {
         applyStyles()
     }
 
-    private func makeReactionButtonConfiguration(systemImage: String) -> UIButton.Configuration {
+    private func makeReactionButtonConfiguration(image: UIImage? = nil) -> UIButton.Configuration {
         var configuration = UIButton.Configuration.plain()
         let font = UIFont.preferredFont(forTextStyle: .footnote)
-        configuration.image = UIImage(systemName: systemImage)
+        configuration.image = image
         configuration.imagePlacement = .leading
         configuration.imagePadding = 6
         configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer {
             var attributes = $0
-            attributes.font = font
+            attributes.font = font.withWeight(.medium)
             return attributes
         }
-        configuration.contentInsets = .init(top: 10, leading: 8, bottom: 12, trailing: 8)
+        configuration.contentInsets = .init(top: 8, leading: 8, bottom: 8, trailing: 8)
         configuration.preferredSymbolConfigurationForImage = UIImage.SymbolConfiguration(font: font)
         return configuration
     }
@@ -388,7 +388,7 @@ private extension CommentContentTableViewCell {
     func updateLikeButton(isLiked: Bool, likeCount: Int) {
         likeButton.tintColor = isLiked ? UIAppColor.primary : .secondaryLabel
         if var configuration = likeButton.configuration {
-            configuration.image = UIImage(systemName: isLiked ? "star.fill" : "star")
+            configuration.image = isLiked ? WPStyleGuide.ReaderDetail.likeSelectedToolbarIcon : WPStyleGuide.ReaderDetail.likeToolbarIcon
             configuration.title = likeCount > 0 ? "\(likeCount)" : String.noLikes
             likeButton.accessibilityLabel = {
                 switch likeCount {

WordPress/Classes/ViewRelated/Comments/Views/Detail/CommentContentTableViewCell.xib

@@ -28,7 +28,7 @@
                         </constraints>
                     </view>
                     <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="hcN-S7-sLG" userLabel="Container Stack View">
-                        <rect key="frame" x="16" y="0.0" width="288" height="336"/>
+                        <rect key="frame" x="16" y="4" width="288" height="336"/>
                         <subviews>
                             <view contentMode="scaleToFill" verticalHuggingPriority="251" verticalCompressionResistancePriority="751" translatesAutoresizingMaskIntoConstraints="NO" id="f2E-yC-BJS" userLabel="Header View">
                                 <rect key="frame" x="0.0" y="0.0" width="288" height="53"/>
@@ -155,10 +155,10 @@
                 </subviews>
                 <constraints>
                     <constraint firstAttribute="trailing" secondItem="hcN-S7-sLG" secondAttribute="trailing" constant="16" id="2zy-oR-X5O"/>
-                    <constraint firstAttribute="bottom" secondItem="hcN-S7-sLG" secondAttribute="bottom" priority="999" constant="4" id="FxL-ee-fbZ"/>
+                    <constraint firstAttribute="bottom" secondItem="hcN-S7-sLG" secondAttribute="bottom" priority="999" id="FxL-ee-fbZ"/>
                     <constraint firstItem="mNJ-fg-sKO" firstAttribute="top" secondItem="H2p-sc-9uM" secondAttribute="top" id="II8-F0-CBs"/>
                     <constraint firstItem="mNJ-fg-sKO" firstAttribute="leading" secondItem="H2p-sc-9uM" secondAttribute="leading" id="eId-Od-5wj"/>
-                    <constraint firstItem="hcN-S7-sLG" firstAttribute="top" secondItem="H2p-sc-9uM" secondAttribute="top" id="esQ-oB-yxJ"/>
+                    <constraint firstItem="hcN-S7-sLG" firstAttribute="top" secondItem="H2p-sc-9uM" secondAttribute="top" constant="4" id="esQ-oB-yxJ"/>
                     <constraint firstAttribute="bottom" secondItem="mNJ-fg-sKO" secondAttribute="bottom" id="izD-cW-YFx"/>
                     <constraint firstItem="hcN-S7-sLG" firstAttribute="leading" secondItem="H2p-sc-9uM" secondAttribute="leading" constant="16" id="uFL-PF-ffo"/>
                 </constraints>

WordPress/Classes/ViewRelated/Reader/Cards/ReaderPostCell.swift

@@ -133,7 +133,7 @@ private final class ReaderPostCellView: UIView {
         setupTimeLabel(timeLabel)
         timeLabel.setContentCompressionResistancePriority(.init(800), for: .horizontal)
 
-        titleLabel.font = .preferredFont(forTextStyle: .headline)
+        titleLabel.font = UIFontMetrics.default.scaledFont(for: UIFont.systemFont(ofSize: 18, weight: .semibold))
         titleLabel.adjustsFontForContentSizeCategory = true
         titleLabel.maximumContentSizeCategory = .accessibilityExtraLarge
 

WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarListsSection.swift

@@ -24,7 +24,7 @@ struct ReaderSidebarListCell: View {
             Text(list.title)
                 .lineLimit(1)
         } icon: {
-            Image(systemName: "list.star")
+            ReaderSidebarImage(name: "reader-menu-list")
                 .foregroundStyle(.secondary)
         }
         .tag(ReaderSidebarItem.list(TaggedManagedObjectID(list)))

WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarOrganizationSection.swift

@@ -13,8 +13,14 @@ struct ReaderSidebarOrganizationSection: View {
                 Text(list.title)
                     .lineLimit(1)
             } icon: {
-                // TODO: update icon
-                Image(systemName: "list.star")
+                let imageName = {
+                    switch list.slug {
+                    case "a8c": "reader-menu-a8c"
+                    case "p2": "reader-menu-pin"
+                    default: "reader-menu-list"
+                    }
+                }()
+                ScaledImage(imageName, height: 24, relativeTo: .body)
                     .foregroundStyle(.secondary)
             }
             .tag(ReaderSidebarItem.organization(TaggedManagedObjectID(list)))

WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarTagsSection.swift

@@ -20,7 +20,7 @@ struct ReaderSidebarTagsSection: View {
                 Text(tag.title)
                     .lineLimit(1)
             } icon: {
-                Image(systemName: "tag")
+                ReaderSidebarImage(name: "reader-menu-tag")
                     .foregroundStyle(.secondary)
             }
             .tag(ReaderSidebarItem.tag(TaggedManagedObjectID(tag)))
@@ -42,14 +42,22 @@ struct ReaderSidebarTagsSection: View {
         Button {
             viewModel.navigate(.addTag)
         } label: {
-            Label(Strings.addTag, systemImage: "plus.circle")
+            Label {
+                Text(Strings.addTag)
+            } icon: {
+                ReaderSidebarImage(name: "reader-menu-plus")
+            }
         }
         .listItemTint(AppColor.primary)
 
         Button {
             viewModel.navigate(.discoverTags)
         } label: {
-            Label(Strings.discoverTags, systemImage: "sparkle.magnifyingglass")
+            Label {
+                Text(Strings.discoverTags)
+            } icon: {
+                ReaderSidebarImage(name: "reader-menu-explorer")
+            }
         }
         .listItemTint(AppColor.primary)
     }

WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarViewController.swift

@@ -120,7 +120,7 @@ private struct ReaderSidebarView: View {
         Section {
             let screens = ReaderStaticScreen.allCases
             ForEach(ReaderStaticScreen.allCases) {
-                makePrimaryNavigationItem($0.localizedTitle, systemImage: $0.systemImage)
+                makePrimaryNavigationItem($0.localizedTitle, imageName: $0.imageName)
                     .tag(ReaderSidebarItem.main($0))
                     .listRowSeparator((viewModel.isCompact && $0 != screens.last) ? .visible : .hidden, edges: .bottom)
                     .accessibilityIdentifier($0.accessibilityIdentifier)
@@ -140,7 +140,11 @@ private struct ReaderSidebarView: View {
             }
         }
         makeSection(Strings.subscriptions, isExpanded: $isSectionSubscriptionsExpanded) {
-            Label(Strings.subscriptions, systemImage: "checkmark.rectangle.stack")
+            Label {
+                Text(Strings.subscriptions)
+            } icon: {
+                ReaderSidebarImage(name: "reader-menu-subscriptions")
+            }
                 .tag(ReaderSidebarItem.allSubscriptions)
                 .listItemTint(AppColor.primary)
                 .withDisabledSelection(isEditing)
@@ -156,13 +160,13 @@ private struct ReaderSidebarView: View {
         }
     }
 
-    private func makePrimaryNavigationItem(_ title: String, systemImage: String) -> some View {
+    private func makePrimaryNavigationItem(_ title: String, imageName: String) -> some View {
         HStack {
             Label {
                 Text(title)
                     .font(.headline).fontWeight(.medium)
             } icon: {
-                Image(systemName: systemImage)
+                ScaledImage(imageName, height: 24, relativeTo: .headline)
             }
             .lineLimit(1)
             if viewModel.isCompact {
@@ -234,6 +238,14 @@ private struct ReaderSidebarSection<Content: View>: View {
     }
 }
 
+struct ReaderSidebarImage: View {
+    let name: String
+
+    var body: some View {
+        ScaledImage(name, height: 24, relativeTo: .body)
+    }
+}
+
 private extension View {
     @ViewBuilder func withDisabledSelection(_ isDisabled: Bool) -> some View {
         if #available(iOS 17, *) {

WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarViewModel.swift

@@ -97,13 +97,13 @@ enum ReaderStaticScreen: String, CaseIterable, Identifiable, Hashable {
         }
     }
 
-    var systemImage: String {
+    var imageName: String {
         switch self {
-        case .recent: "checkmark.circle"
-        case .discover: "safari"
-        case .saved: "bookmark"
-        case .likes: "star"
-        case .search: "magnifyingglass"
+        case .recent: "reader-menu-home"
+        case .discover: "reader-menu-explorer"
+        case .saved: "reader-menu-bookmark"
+        case .likes: "reader-menu-star"
+        case .search: "reader-menu-search"
         }
     }