Update design to more closely match the existing iOS design and Big Sur look and feel

Multiplatform/Shared/AppAssets.swift

@@ -13,68 +13,100 @@ import Account
 struct AppAssets {
 	
 	static var accountLocalMacImage: RSImage! = {
-		return RSImage(named: "accountLocalMac")
+		return RSImage(named: "AccountLocalMac")
 	}()
 
 	static var accountLocalPadImage: RSImage = {
-		return RSImage(named: "accountLocalPad")!
+		return RSImage(named: "AccountLocalPad")!
 	}()
 
 	static var accountLocalPhoneImage: RSImage = {
-		return RSImage(named: "accountLocalPhone")!
+		return RSImage(named: "AccountLocalPhone")!
 	}()
 
 	static var accountCloudKitImage: RSImage = {
-		return RSImage(named: "accountCloudKit")!
+		return RSImage(named: "AccountCloudKit")!
 	}()
 
 	static var accountFeedbinImage: RSImage = {
-		return RSImage(named: "accountFeedbin")!
+		return RSImage(named: "AccountFeedbin")!
 	}()
 
 	static var accountFeedlyImage: RSImage = {
-		return RSImage(named: "accountFeedly")!
+		return RSImage(named: "AccountFeedly")!
 	}()
 	
 	static var accountFeedWranglerImage: RSImage = {
-		return RSImage(named: "accountFeedWrangler")!
+		return RSImage(named: "AccountFeedWrangler")!
 	}()
 
 	static var accountFreshRSSImage: RSImage = {
-		return RSImage(named: "accountFreshRSS")!
+		return RSImage(named: "AccountFreshRSS")!
 	}()
 
 	static var accountNewsBlurImage: RSImage = {
-		return RSImage(named: "accountNewsBlur")!
+		return RSImage(named: "AccountNewsBlur")!
+	}()
+
+	static var addMenuImage: Image = {
+		return Image(systemName: "plus")
 	}()
 	
 	static var extensionPointMarsEdit: RSImage = {
-		return RSImage(named: "extensionPointMarsEdit")!
+		return RSImage(named: "ExtensionPointMarsEdit")!
 	}()
 	
 	static var extensionPointMicroblog: RSImage = {
-		return RSImage(named: "extensionPointMicroblog")!
+		return RSImage(named: "ExtensionPointMicroblog")!
 	}()
 
 	static var extensionPointReddit: RSImage = {
-		return RSImage(named: "extensionPointReddit")!
+		return RSImage(named: "ExtensionPointReddit")!
 	}()
 
 	static var extensionPointTwitter: RSImage = {
-		return RSImage(named: "extensionPointTwitter")!
+		return RSImage(named: "ExtensionPointTwitter")!
 	}()
 	
 	static var faviconTemplateImage: RSImage = {
-		return RSImage(named: "faviconTemplateImage")!
+		return RSImage(named: "FaviconTemplateImage")!
 	}()
 	
-	static var masterFolderImage: IconImage = {
+	static var settingsImage: Image = {
+		return Image(systemName: "gear")
+	}()
+	
+	static var masterFolderImage: IconImage {
 		#if os(macOS)
-		return IconImage(NSImage(systemSymbolName: "folder.fill", accessibilityDescription: nil)!)
+		let image = NSImage(systemSymbolName: "folder.fill", accessibilityDescription: nil)!
+		let coloredImage = image.tinted(with: NSColor(named: "AccentColor")!)
+		return IconImage(coloredImage)
 		#endif
 		#if os(iOS)
-		return IconImage(UIImage(systemName: "folder.fill")!)
+		let image = UIImage(systemName: "folder.fill")!
+		let coloredImage = image.tinted(color: UIColor(named: "AccentColor")!)!
+		return IconImage(coloredImage)
 		#endif
+	}
+	
+	static var markAllAsReadImage: Image = {
+		return Image("MarkAllAsRead")
+	}()
+	
+	static var markAllAsReadImagePDF: Image = {
+		return Image("MarkAllAsReadPDF")
+	}()
+	
+	static var nextUnreadArticleImage: Image = {
+		return Image(systemName: "chevron.down.circle")
+	}()
+	
+	static var openInBrowserImage: Image = {
+		return Image(systemName: "safari")
+	}()
+
+	static var refreshImage: Image = {
+		return Image(systemName: "arrow.clockwise")
 	}()
 
 	static var searchFeedImage: IconImage = {
@@ -86,6 +118,10 @@ struct AppAssets {
 		#endif
 	}()
 	
+	static var shareImage: Image = {
+		Image(systemName: "square.and.arrow.up")
+	}()
+	
 	static var smartFeedImage: RSImage = {
 		#if os(macOS)
 		return NSImage(systemSymbolName: "gear", accessibilityDescription: nil)!
@@ -97,40 +133,76 @@ struct AppAssets {
 	
 	static var starredFeedImage: IconImage = {
 		#if os(macOS)
-		return IconImage(NSImage(systemSymbolName: "star.fill", accessibilityDescription: nil)!)
+		let image = NSImage(systemSymbolName: "star.fill", accessibilityDescription: nil)!
+		let coloredImage = image.tinted(with: NSColor(named: "StarColor")!)
+		return IconImage(coloredImage)
 		#endif
 		#if os(iOS)
-		return IconImage(UIImage(systemName: "star.fill")!)
+		let image = UIImage(systemName: "star.fill")!
+		let coloredImage = image.tinted(color: UIColor(named: "StarColor")!)!
+		return IconImage(coloredImage)
 		#endif
 	}()
 	
 	static var timelineStarred: Image = {
-		return Image(systemName: "star.fill")
+		#if os(macOS)
-
+		let image = NSImage(systemSymbolName: "star.fill", accessibilityDescription: nil)!
+		let coloredImage = image.tinted(with: NSColor(named: "StarColor")!)
+		return Image(nsImage: coloredImage)
+		#endif
+		#if os(iOS)
+		let image = UIImage(systemName: "star.fill")!
+		let coloredImage = image.tinted(color: UIColor(named: "StarColor")!)!
+		return Image(uiImage: coloredImage)
+		#endif
 	}()
 
-	static var timelineUnread: Image = {
+	static var timelineUnread: Image {
-		return Image(systemName: "circle.fill")
+		#if os(macOS)
-
+		let image = NSImage(systemSymbolName: "circle.fill", accessibilityDescription: nil)!
-	}()
+		let coloredImage = image.tinted(with: NSColor(named: "AccentColor")!)
+		return Image(nsImage: coloredImage)
+		#endif
+		#if os(iOS)
+		let image = UIImage(systemName: "circle.fill")!
+		let coloredImage = image.tinted(color: UIColor(named: "AccentColor")!)!
+		return Image(uiImage: coloredImage)
+		#endif
+	}
 	
 	static var todayFeedImage: IconImage = {
 		#if os(macOS)
-		return IconImage(NSImage(systemSymbolName: "sun.max.fill", accessibilityDescription: nil)!)
+		let image = NSImage(systemSymbolName: "sun.max.fill", accessibilityDescription: nil)!
+		let coloredImage = image.tinted(with: .orange)
+		return IconImage(coloredImage)
 		#endif
 		#if os(iOS)
-		return IconImage(UIImage(systemName: "sun.max.fill")!)
+		let image = UIImage(systemName: "sun.max.fill")!
+		let coloredImage = image.tinted(color: .orange)!
+		return IconImage(coloredImage)
 		#endif
 	}()
 
-	static var unreadFeedImage: IconImage = {
+	static var toggleStarred: Image = {
+		return Image(systemName: "star.fill")
+	}()
+
+	static var toggleRead: Image = {
+		return Image(systemName: "largecircle.fill.circle")
+	}()
+
+	static var unreadFeedImage: IconImage {
 		#if os(macOS)
-		return IconImage(NSImage(systemSymbolName: "largecircle.fill.circle", accessibilityDescription: nil)!)
+		let image = NSImage(systemSymbolName: "largecircle.fill.circle", accessibilityDescription: nil)!
+		let coloredImage = image.tinted(with: NSColor(named: "AccentColor")!)
+		return IconImage(coloredImage)
 		#endif
 		#if os(iOS)
-		return IconImage(UIImage(systemName: "largecircle.fill.circle")!)
+		let image = UIImage(systemName: "largecircle.fill.circle")!
+		let coloredImage = image.tinted(color: UIColor(named: "AccentColor")!)!
+		return IconImage(coloredImage)
 		#endif
-	}()
+	}
 
 	static func image(for accountType: AccountType) -> RSImage? {
 		switch accountType {

Multiplatform/Shared/Assets.xcassets/AccentColor.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.945",
+          "blue" : "0.957",
-          "green" : "0.502",
+          "green" : "0.620",
-          "red" : "0.176"
+          "red" : "0.369"
         }
       },
       "idiom" : "universal"

Multiplatform/Shared/Assets.xcassets/MarkAllAsReadPDF.imageset/Contents.json

@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "filename" : "MarkAllAsReadPDF.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "template"
+  }
+}

Multiplatform/Shared/Assets.xcassets/StarColor.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.204",
+          "green" : "0.776",
+          "red" : "0.976"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Multiplatform/Shared/Assets.xcassets/markAllAsRead.symbolset/markAllAsRead.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="3300px" height="2200px" viewBox="0 0 3300 2200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
-    <title>Untitled</title>
+    <title>markAllAsRead</title>
     <desc>Created with Sketch.</desc>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="markAllAsRead">
@@ -136,6 +136,11 @@
                     <path d="M50.45587,25 C77.70197,25 100.30977,47.6074 100.30977,74.8047 C100.30977,74.870144 100.30964,74.935561 100.30938,75.0009507 L99.8322178,75.0006156 C97.6995557,51.580586 76.5280991,33.3008 50.4213361,33.3008 C24.3145732,33.3008 3.24806132,51.580586 1.17616722,75.0006156 L0.701,75 L0.7,74.8047 C0.7,47.879373 22.8096545,25.452607 49.6413605,25.0067642 Z" id="Combined-Shape"></path>
                     <path d="M50.45587,-1.77635684e-14 C77.70197,-1.77635684e-14 100.30977,22.6074 100.30977,49.8047 C100.30977,49.870144 100.30964,49.935561 100.30938,50.0009507 L99.8322178,50.0006156 C97.6995557,26.580586 76.5280991,8.3008 50.4213361,8.3008 C24.3145732,8.3008 3.24806132,26.580586 1.17616722,50.0006156 L0.701,50 L0.7,49.8047 C0.7,22.879373 22.8096545,0.45260699 49.6413605,0.0067642025 Z" id="Combined-Shape"></path>
                 </g>
+                <g id="Medium-M" transform="translate(0.300000, 0.000000)">
+                    <path d="M50.50467,149.611301 C77.75077,149.611301 100.30977,127.052691 100.30977,99.8066015 C100.30977,72.6093015 77.70197,50.0019015 50.45587,50.0019015 C23.25857,50.0019015 0.7,72.6093015 0.7,99.8066015 C0.7,127.052691 23.30747,149.611301 50.50467,149.611301 Z M50.50467,141.310501 C27.45777,141.310501 9.04957,122.853501 9.04957,99.8066015 C9.04957,76.8085015 27.40897,58.3027015 50.45587,58.3027015 C73.50277,58.3027015 91.95977,76.8085015 92.0088671,99.8066015 C92.05777,122.853501 73.55157,141.310501 50.50467,141.310501 Z" id="Shape"></path>
+                    <path d="M50.45587,25.0009507 C77.70197,25.0009507 100.30977,47.6083507 100.30977,74.8056507 C100.30977,74.8710948 100.30964,74.9365118 100.30938,75.0019015 L99.8322178,75.0015664 C97.6995557,51.5815367 76.5280991,33.3017507 50.4213361,33.3017507 C24.3145732,33.3017507 3.24806132,51.5815367 1.17616722,75.0015664 L0.701,75.0009507 L0.7,74.8056507 C0.7,47.8803237 22.8096545,25.4535577 49.6413605,25.0077149 Z" id="Combined-Shape"></path>
+                    <path d="M50.45587,-1.77635684e-14 C77.70197,-1.77635684e-14 100.30977,22.6074 100.30977,49.8047 C100.30977,49.870144 100.30964,49.935561 100.30938,50.0009507 L99.8322178,50.0006156 C97.6995557,26.580586 76.5280991,8.3008 50.4213361,8.3008 C24.3145732,8.3008 3.24806132,26.580586 1.17616722,50.0006156 L0.701,50 L0.7,49.8047 C0.7,22.879373 22.8096545,0.45260699 49.6413605,0.0067642025 Z" id="Combined-Shape"></path>
+                </g>
             </g>
         </g>
     </g>

Multiplatform/Shared/MainApp.swift

@@ -34,61 +34,60 @@ struct MainApp: App {
 				}
 				.toolbar {
 					
-					ToolbarItem {
+					ToolbarItem() {
 						Button(action: { showSheet = true }, label: {
-							Image(systemName: "plus").foregroundColor(.secondary)
+							AppAssets.addMenuImage
 						}).help("Add Feed")
 					}
 				
 					ToolbarItem {
 						Button(action: {}, label: {
-							Image(systemName: "folder.fill.badge.plus").foregroundColor(.pink)
+							AppAssets.refreshImage
-						}).help("New Folder")
-					}
-					
-					ToolbarItem {
-						Button(action: {}, label: {
-							Image(systemName: "arrow.clockwise").foregroundColor(.secondary)
 						}).help("Refresh").padding(.trailing, 40)
 					}
 
 					ToolbarItem {
 						Button(action: {}, label: {
-							Image(systemName: "circle.dashed").foregroundColor(.orange)
+							AppAssets.markAllAsReadImagePDF
+								.resizable()
+								.scaledToFit()
+								.frame(width: 20, height: 20, alignment: .center)
 						}).help("Mark All as Read")
 					}
 					
 					ToolbarItem {
-						Button(action: {}, label: {
+						MacSearchField()
-							Image(systemName: "arrow.triangle.turn.up.right.circle.fill").foregroundColor(.purple)
+							.frame(width: 200)
-						}).help("Go to Next Unread")
 					}
 
 					ToolbarItem {
 						Button(action: {}, label: {
-							Image(systemName: "star.fill").foregroundColor(.yellow)
+							AppAssets.nextUnreadArticleImage
+						}).help("Go to Next Unread").padding(.trailing, 40)
+					}
+
+					ToolbarItem {
+						Button(action: {}, label: {
+							AppAssets.toggleStarred
 						}).help("Mark as Starred")
 					}
 					ToolbarItem {
 						Button(action: {}, label: {
-							Image(systemName: "checkmark.circle.fill").foregroundColor(.green)
+							AppAssets.toggleRead
 						}).help("Mark as Unread")
 					}
 					ToolbarItem {
 						Button(action: {}, label: {
-							Image(systemName: "safari").foregroundColor(.blue)
+							AppAssets.openInBrowserImage
 						}).help("Open in Browser")
 					}
 					ToolbarItem {
 						Button(action: {}, label: {
-							Image(systemName: "square.and.arrow.up")
+							AppAssets.shareImage
 						}).help("Share")
 					}
 					
-					ToolbarItem {
+
-						MacSearchField()
-							.frame(width: 300)
-					}
 				}
 		}
 		.commands {

Multiplatform/Shared/Sidebar/SidebarToolbar.swift

@@ -22,19 +22,14 @@ fileprivate class SidebarToolbarViewModel: ObservableObject {
 	}
 	@Published var showActionSheet: Bool = false
 	@Published var showAddSheet: Bool = false
-}
 	
+}
 
 struct SidebarToolbar: View {
     
 	@EnvironmentObject private var appSettings: AppDefaults
 	@StateObject private var viewModel = SidebarToolbarViewModel()
 
-
-	var addActionSheetButtons = [
-		Button(action: {}, label: { Text("Add Feed") })
-	]
-	
 	var body: some View {
 		VStack {
 			Divider()
@@ -42,7 +37,7 @@ struct SidebarToolbar: View {
 				Button(action: {
 					viewModel.sheetToShow = .settings
 				}, label: {
-					Image(systemName: "gear")
+					AppAssets.settingsImage
 						.font(.title3)
 						.foregroundColor(.accentColor)
 				}).help("Settings")
@@ -58,7 +53,7 @@ struct SidebarToolbar: View {
 				Button(action: {
 					viewModel.showActionSheet = true
 				}, label: {
-					Image(systemName: "plus")
+					AppAssets.addMenuImage
 						.font(.title3)
 						.foregroundColor(.accentColor)
 				})

Multiplatform/Shared/Timeline/TimelineItemStatusView.swift

@@ -19,12 +19,10 @@ struct TimelineItemStatusView: View {
 				.resizable()
 				.frame(width: 8, height: 8, alignment: .center)
 				.padding(.all, 2)
-				.foregroundColor(.accentColor)
 		case .showStar:
 			AppAssets.timelineStarred
 				.resizable()
 				.frame(width: 10, height: 10, alignment: .center)
-				.foregroundColor(.yellow)
 		case .showNone:
 			AppAssets.timelineUnread
 				.resizable()

iOS/Resources/Assets.xcassets/secondaryAccentColor.colorset/Contents.json

@@ -1,23 +1,18 @@
 {
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  },
   "colors" : [
     {
-      "idiom" : "universal",
       "color" : {
         "color-space" : "srgb",
         "components" : {
-          "red" : "0x08",
           "alpha" : "1.000",
           "blue" : "0xEE",
-          "green" : "0x6A"
+          "green" : "0x6A",
+          "red" : "0x08"
         }
-      }
+      },
+      "idiom" : "universal"
     },
     {
-      "idiom" : "universal",
       "appearances" : [
         {
           "appearance" : "luminosity",
@@ -27,12 +22,17 @@
       "color" : {
         "color-space" : "srgb",
         "components" : {
-          "red" : "0x5E",
           "alpha" : "1.000",
           "blue" : "0xF4",
-          "green" : "0x9E"
+          "green" : "0x9E",
+          "red" : "0x5E"
         }
-      }
+      },
+      "idiom" : "universal"
     }
-  ]
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
 }

iOS/Resources/Assets.xcassets/starColor.colorset/Contents.json

@@ -1,20 +1,20 @@
 {
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  },
   "colors" : [
     {
-      "idiom" : "universal",
       "color" : {
         "color-space" : "srgb",
         "components" : {
-          "red" : "249",
           "alpha" : "1.000",
           "blue" : "52",
-          "green" : "198"
+          "green" : "198",
+          "red" : "249"
         }
-      }
+      },
+      "idiom" : "universal"
     }
-  ]
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
 }