Fix dark/light transition on scroll

wordpress-mobile · Dec 16, 2024 · 0183aa5 · 0183aa5
1 parent 14dcd0b
commit 0183aa5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 17 deletions.
diff --git a/WordPress/Classes/Extensions/Interpolation.swift b/WordPress/Classes/Extensions/Interpolation.swift
@@ -1,4 +1,4 @@
-import Foundation
+import UIKit
 
 extension CGFloat {
     /// Interpolates a CGFloat

diff --git a/WordPress/Classes/ViewRelated/Reader/Detail/Views/ReaderDetailFeaturedImageView.swift b/WordPress/Classes/ViewRelated/Reader/Detail/Views/ReaderDetailFeaturedImageView.swift
@@ -310,10 +310,8 @@ class ReaderDetailFeaturedImageView: UIView, NibLoadable {
             return
         }
 
-        let offsetY = scrollView.contentOffset.y
-
-        updateFeaturedImageHeight(with: offsetY)
-        updateNavigationBar(with: offsetY)
+        updateFeaturedImageHeight(with: scrollView.contentOffset.y)
+        updateNavigationBar(in: scrollView)
     }
 
     private func hideLoading() {
@@ -341,24 +339,20 @@ class ReaderDetailFeaturedImageView: UIView, NibLoadable {
         heightConstraint.constant = max(y, 0)
     }
 
-    private func updateNavigationBar(with offset: CGFloat) {
+    private func updateNavigationBar(in scrollView: UIScrollView) {
         /// Navigation bar is only updated in light color themes, so that the tint color can be reverted
         /// to the original color after scrolling past the featured image.
         ///
         /// In case of dark color themes, the navigation bar tint color will always be kept white.
         guard usesAdaptiveNavigationBar else {
             return
         }
-
-        let fullProgress = (offset / heightConstraint.constant)
-        let progress = fullProgress.clamp(min: 0, max: 1)
-
-        let tintColor = UIColor.interpolate(from: style.startTintColor,
-                                            to: style.endTintColor,
-                                            with: progress)
-
-        currentStatusBarStyle = fullProgress >= 2.5 ? .darkContent : .lightContent
-        navBarTintColor = tintColor
+        let isScrolledTop = scrollView.contentInset.top + scrollView.contentOffset.y > 5.0
+        let barStyle: UIStatusBarStyle = isScrolledTop ? .darkContent : .lightContent
+        if currentStatusBarStyle != barStyle {
+            currentStatusBarStyle = barStyle
+            navBarTintColor = barStyle == .darkContent ? style.endTintColor : style.startTintColor
+        }
     }
 
     private func applyTransparentNavigationBarAppearance() {

diff --git a/WordPress/Classes/ViewRelated/Reader/Detail/Views/ReaderDetailNewHeaderView.swift b/WordPress/Classes/ViewRelated/Reader/Detail/Views/ReaderDetailNewHeaderView.swift
@@ -268,7 +268,7 @@ struct ReaderDetailNewHeaderView: View {
         }
         // Added an extra 4.0 to top padding to account for a legacy layout issue with featured image.
         // Bottom padding is 0 as there's already padding between the header container and the webView in the storyboard.
-        .padding(EdgeInsets(top: 18.0, leading: 16.0, bottom: 0.0, trailing: 16.0))
+        .padding(EdgeInsets(top: 20.0, leading: 16.0, bottom: 0.0, trailing: 16.0))
         .background {
             GeometryReader { proxy in
                 Color.clear