Просмотр исходного кода

Unify sidebar selected state styling across all navigation items.

Give every active sidebar row the same card background and purple border as Open Reddit so selection is clearly visible.

Co-authored-by: Cursor <cursoragent@cursor.com>
AhtashamShahzad1 1 месяц назад
Родитель
Сommit
829f78bcce

+ 3 - 9
Reddit App/Utilities/InteractiveHoverStyle.swift

@@ -198,8 +198,7 @@ private struct HoverCardModifier: ViewModifier {
 
 
 private struct SidebarRowHoverModifier: ViewModifier {
 private struct SidebarRowHoverModifier: ViewModifier {
     let isSelected: Bool
     let isSelected: Bool
-    let showsCardBackground: Bool
-    let selectedBorderColor: Color
+    var selectedBorderColor: Color = AppTheme.accentPurple.opacity(0.4)
     @State private var isHovered = false
     @State private var isHovered = false
 
 
     func body(content: Content) -> some View {
     func body(content: Content) -> some View {
@@ -211,16 +210,13 @@ private struct SidebarRowHoverModifier: ViewModifier {
 
 
     @ViewBuilder
     @ViewBuilder
     private var sidebarRowBackground: some View {
     private var sidebarRowBackground: some View {
-        if showsCardBackground && isSelected {
+        if isSelected {
             RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
             RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
                 .fill(AppTheme.quickAccessBackground)
                 .fill(AppTheme.quickAccessBackground)
                 .overlay(
                 .overlay(
                     RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
                     RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
                         .stroke(selectedBorderColor, lineWidth: 1)
                         .stroke(selectedBorderColor, lineWidth: 1)
                 )
                 )
-        } else if isSelected {
-            RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
-                .fill(AppTheme.selectedRowFill)
         } else if isHovered {
         } else if isHovered {
             RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
             RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
                 .fill(AppTheme.hoverFill)
                 .fill(AppTheme.hoverFill)
@@ -245,13 +241,11 @@ extension View {
 
 
     func sidebarRowHover(
     func sidebarRowHover(
         isSelected: Bool,
         isSelected: Bool,
-        showsCardBackground: Bool = false,
-        selectedBorderColor: Color = .clear
+        selectedBorderColor: Color = AppTheme.accentPurple.opacity(0.4)
     ) -> some View {
     ) -> some View {
         modifier(
         modifier(
             SidebarRowHoverModifier(
             SidebarRowHoverModifier(
                 isSelected: isSelected,
                 isSelected: isSelected,
-                showsCardBackground: showsCardBackground,
                 selectedBorderColor: selectedBorderColor
                 selectedBorderColor: selectedBorderColor
             )
             )
         )
         )

+ 2 - 10
Reddit App/Views/Components/SidebarNavItemView.swift

@@ -29,9 +29,7 @@ struct SidebarQuickAccessItemView: View {
                 title: "Open Reddit",
                 title: "Open Reddit",
                 subtitle: "Browse Reddit in-app",
                 subtitle: "Browse Reddit in-app",
                 isSelected: isSelected,
                 isSelected: isSelected,
-                showsCardBackground: true,
-                showsChevron: true,
-                selectedBorderColor: AppTheme.accentPurple.opacity(0.4)
+                showsChevron: true
             ) {
             ) {
                 ModernRedditIconView()
                 ModernRedditIconView()
             }
             }
@@ -44,9 +42,7 @@ private struct SidebarItemRow<Icon: View>: View {
     let title: String
     let title: String
     let subtitle: String
     let subtitle: String
     var isSelected: Bool = false
     var isSelected: Bool = false
-    var showsCardBackground: Bool = false
     var showsChevron: Bool = false
     var showsChevron: Bool = false
-    var selectedBorderColor: Color = .clear
     @ViewBuilder let icon: () -> Icon
     @ViewBuilder let icon: () -> Icon
 
 
     var body: some View {
     var body: some View {
@@ -77,11 +73,7 @@ private struct SidebarItemRow<Icon: View>: View {
         .padding(.horizontal, AppTheme.sidebarRowPaddingH)
         .padding(.horizontal, AppTheme.sidebarRowPaddingH)
         .padding(.vertical, AppTheme.sidebarRowPaddingV)
         .padding(.vertical, AppTheme.sidebarRowPaddingV)
         .contentShape(RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall))
         .contentShape(RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall))
-        .sidebarRowHover(
-            isSelected: isSelected,
-            showsCardBackground: showsCardBackground,
-            selectedBorderColor: selectedBorderColor
-        )
+        .sidebarRowHover(isSelected: isSelected)
     }
     }
 }
 }