[MOB-1846] Onboarding UI fixes

Client.xcodeproj/project.pbxproj

@@ -664,7 +664,6 @@
 		CA4D9CFD28C8D801006AFB5D /* MultiplyImpact.swift in Sources */ = {isa = PBXBuildFile; fileRef = CA4D9CA628C8D801006AFB5D /* MultiplyImpact.swift */; };
 		CA4D9CFE28C8D801006AFB5D /* EcosiaNavigation.swift in Sources */ = {isa = PBXBuildFile; fileRef = CA4D9CA728C8D801006AFB5D /* EcosiaNavigation.swift */; };
 		CA4D9D0228C8D801006AFB5D /* MultiplyImpactStep.swift in Sources */ = {isa = PBXBuildFile; fileRef = CA4D9CAB28C8D801006AFB5D /* MultiplyImpactStep.swift */; };
-		CA4D9D0628C8D801006AFB5D /* WelcomeTourPlanet.swift in Sources */ = {isa = PBXBuildFile; fileRef = CA4D9CB028C8D801006AFB5D /* WelcomeTourPlanet.swift */; };
 		CA4D9D0728C8D801006AFB5D /* Welcome.swift in Sources */ = {isa = PBXBuildFile; fileRef = CA4D9CB128C8D801006AFB5D /* Welcome.swift */; };
 		CA4D9D0828C8D801006AFB5D /* WelcomeTour.Step.swift in Sources */ = {isa = PBXBuildFile; fileRef = CA4D9CB228C8D801006AFB5D /* WelcomeTour.Step.swift */; };
 		CA4D9D0928C8D801006AFB5D /* WelcomeTourAction.swift in Sources */ = {isa = PBXBuildFile; fileRef = CA4D9CB328C8D801006AFB5D /* WelcomeTourAction.swift */; };
@@ -3643,7 +3642,6 @@
 		CA4D9CA628C8D801006AFB5D /* MultiplyImpact.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MultiplyImpact.swift; sourceTree = "<group>"; };
 		CA4D9CA728C8D801006AFB5D /* EcosiaNavigation.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = EcosiaNavigation.swift; sourceTree = "<group>"; };
 		CA4D9CAB28C8D801006AFB5D /* MultiplyImpactStep.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MultiplyImpactStep.swift; sourceTree = "<group>"; };
-		CA4D9CB028C8D801006AFB5D /* WelcomeTourPlanet.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WelcomeTourPlanet.swift; sourceTree = "<group>"; };
 		CA4D9CB128C8D801006AFB5D /* Welcome.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Welcome.swift; sourceTree = "<group>"; };
 		CA4D9CB228C8D801006AFB5D /* WelcomeTour.Step.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WelcomeTour.Step.swift; sourceTree = "<group>"; };
 		CA4D9CB328C8D801006AFB5D /* WelcomeTourAction.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WelcomeTourAction.swift; sourceTree = "<group>"; };
@@ -6674,7 +6672,6 @@
 		CA4D9CAF28C8D801006AFB5D /* Onboarding */ = {
 			isa = PBXGroup;
 			children = (
-				CA4D9CB028C8D801006AFB5D /* WelcomeTourPlanet.swift */,
 				1287A99C2A6FFA45005F21F7 /* WelcomeTourGreen.swift */,
 				CA4D9CB128C8D801006AFB5D /* Welcome.swift */,
 				CA4D9CB228C8D801006AFB5D /* WelcomeTour.Step.swift */,
@@ -9359,7 +9356,6 @@
 				C84655FD2887A01800861B4A /* WallpaperResourceManager.swift in Sources */,
 				CAA3B7E62497DCB60094E3C1 /* LoginDataSource.swift in Sources */,
 				1DFE57FF27BAE3150025DE58 /* HomepageSectionType.swift in Sources */,
-				CA4D9D0628C8D801006AFB5D /* WelcomeTourPlanet.swift in Sources */,
 				E4CD9F6D1A77DD2800318571 /* ReaderModeStyleViewController.swift in Sources */,
 				8AD40FD527BB1C1000672675 /* ConnectionButton.swift in Sources */,
 				E571EE772875694C0051D9AA /* MockPocketSponsoredStoriesProvider.swift in Sources */,

Client/Ecosia/L10N/String.swift

@@ -233,7 +233,7 @@ extension String {
         case onboardingSkipTourButtonAccessibility = "Skip the onboarding"
         case onboardingContinueCTAButtonAccessibility = "Continue to the next onboarding page"
         case onboardingFinishCTAButtonAccessibility = "Finish onboarding and start contributing to Ecosia"
-        case onboardingIllustrationTour1 = "This onboarding illustration shows how by performing searches via the Ecosia app, you are leveling up your tree planting impact score. A small search screenshot and a smaller Your Impact section is shown. Leaves on the background."
+        case onboardingIllustrationTour1 = "This onboarding illustration shows how by performing searches via the Ecosia app, you are leveling up your tree planting impact score. A small search screenshot and a tree coounter example is shown. A forest can be seen on the background."
         case onboardingIllustrationTour1Alternative = "This onboarding illustration shows how by performing searches via the Ecosia app, you are leveling up your planed-friendly lifestyle. A small search input field screenshot and result example containing the green icon is shown. A forest can be seen on the background."
         case onboardingIllustrationTour2 = "This onboarding illustration shows briefly an example of a before and after comparision of trees planted in a land. The image is a screenshot from the satellite view."
         case onboardingIllustrationTour3 = "This onboarding illustration shows a few numbers like the projects Ecosia is involved in, the total number of trees planted by the Ecosia community, alongisde the number of countries Ecosia is active. A small map of the planisphere with trees pins in few geographic location, background."

Client/Ecosia/UI/Ecosia.xcassets/tour/tour1.imageset/Contents.json

@@ -5,12 +5,12 @@
       "scale" : "1x"
     },
     {
-      "filename" : "[email protected]",
+      "filename" : "1 51.png",
       "idiom" : "iphone",
       "scale" : "2x"
     },
     {
-      "filename" : "[email protected]",
+      "filename" : "1 52.png",
       "idiom" : "iphone",
       "scale" : "3x"
     },
@@ -19,7 +19,7 @@
       "scale" : "1x"
     },
     {
-      "filename" : "tour1_iPad.jpg",
+      "filename" : "1 53.png",
       "idiom" : "ipad",
       "scale" : "2x"
     }

Client/Ecosia/UI/Ecosia.xcassets/tour/tourCounter.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "Tree card.pdf",
+      "filename" : "Cards-illustrative.pdf",
       "idiom" : "universal"
     },
     {
@@ -11,7 +11,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "Tree card-2.pdf",
+      "filename" : "Cards-illustrative 1.pdf",
       "idiom" : "universal"
     }
   ],

Client/Ecosia/UI/Ecosia.xcassets/tour/tourSearch.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "Group 1411.pdf",
+      "filename" : "Theme=Light, Variant=Search.pdf",
       "idiom" : "universal"
     },
     {
@@ -11,7 +11,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "Group 1411-2.pdf",
+      "filename" : "Theme=Dark, Variant=Search.pdf",
       "idiom" : "universal"
     }
   ],

Client/Ecosia/UI/Onboarding/WelcomeTour.Step.swift

@@ -58,10 +58,8 @@ extension WelcomeTour {
         }
         var background: Background {
             switch self {
-            case .planet:
+            case .green ,.planet:
                 return .init(image: "tour1")
-            case .green:
-                return .init(image: "tour1-alternative")
             case .profit:
                 return .init(image: "tour2")
             case .action:
@@ -92,7 +90,7 @@ extension WelcomeTour {
             let view: UIView?
             switch self {
             case .planet:
-                view = WelcomeTourPlanet()
+                view = WelcomeTourGreen(isCounterEnabled: true)
             case .green:
                 view = WelcomeTourGreen()
             case .profit:

Client/Ecosia/UI/Onboarding/WelcomeTourGreen.swift

@@ -5,18 +5,44 @@
 import UIKit
 
 final class WelcomeTourGreen: UIView, NotificationThemeable {
-    private weak var searchLabel: UILabel!
+    private lazy var searchLabel: UILabel = {
+        let label = UILabel()
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.text = .localized(.sustainableShoes)
+        label.font = .systemFont(ofSize: 15)
+        label.numberOfLines = 1
+        label.textAlignment = .left
+        return label
+    }()
+    private lazy var counterLabel: UILabel = {
+        let label = UILabel()
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.text = "10"
+        label.font = .systemFont(ofSize: 17).bold()
+        label.numberOfLines = 1
+        label.textAlignment = .left
+        return label
+    }()
+    private lazy var counterSubtitleLabel: UILabel = {
+        let label = UILabel()
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.text = .localizedPlural(.searches, num: 500)
+        label.font = .systemFont(ofSize: 13)
+        label.numberOfLines = 1
+        label.textAlignment = .left
+        return label
+    }()
 
-    init() {
+    init(isCounterEnabled: Bool = false) {
         super.init(frame: .zero)
-        setup()
+        setup(isCounterEnabled: isCounterEnabled)
         updateAccessibilitySettings()
         applyTheme()
     }
 
     required init?(coder: NSCoder) {  nil }
 
-    func setup() {
+    func setup(isCounterEnabled: Bool) {
         let iPadOffset: CGFloat = traitCollection.userInterfaceIdiom == .pad ? 60 : 0
 
         let stack = UIStackView()
@@ -30,31 +56,38 @@ final class WelcomeTourGreen: UIView, NotificationThemeable {
         stack.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
         stack.centerYAnchor.constraint(equalTo: centerYAnchor, constant: -50 - iPadOffset).isActive = true
 
-        let topImage = UIImageView(image: .init(named: "tourSearch-alternative"))
+        let topImage = UIImageView(image: .init(named: "tourSearch"))
         topImage.translatesAutoresizingMaskIntoConstraints = false
-        topImage.isAccessibilityElement = false
         stack.addArrangedSubview(topImage)
 
-        let searchLabel = UILabel()
-        searchLabel.translatesAutoresizingMaskIntoConstraints = false
-        searchLabel.text = .localized(.sustainableShoes)
-        searchLabel.font = .systemFont(ofSize: 12)
-        searchLabel.numberOfLines = 1
-        searchLabel.textAlignment = .left
-        searchLabel.isAccessibilityElement = false
         topImage.addSubview(searchLabel)
-        self.searchLabel = searchLabel
 
         searchLabel.leadingAnchor.constraint(equalTo: topImage.leadingAnchor, constant: 55).isActive = true
-        searchLabel.topAnchor.constraint(equalTo: topImage.topAnchor, constant: 37).isActive = true
+        searchLabel.topAnchor.constraint(equalTo: topImage.topAnchor, constant: 35).isActive = true
         searchLabel.trailingAnchor.constraint(equalTo: topImage.trailingAnchor, constant: -40).isActive = true
         searchLabel.transform = .init(rotationAngle: Double.pi / -33)
 
-        let bottomImage = UIImageView(image: .init(named: "tourGreen"))
+        let bottomImage = UIImageView(image: .init(named: isCounterEnabled ? "tourCounter" : "tourGreen"))
         bottomImage.translatesAutoresizingMaskIntoConstraints = false
-        bottomImage.isAccessibilityElement = false
         stack.addArrangedSubview(bottomImage)
 
+        if isCounterEnabled {
+            bottomImage.addSubview(counterLabel)
+            bottomImage.addSubview(counterSubtitleLabel)
+
+            NSLayoutConstraint.activate([
+                counterLabel.topAnchor.constraint(equalTo: bottomImage.topAnchor, constant: 28),
+                counterLabel.leadingAnchor.constraint(equalTo: bottomImage.leadingAnchor, constant: 65),
+                counterLabel.trailingAnchor.constraint(equalTo: bottomImage.trailingAnchor, constant: -46),
+                counterSubtitleLabel.topAnchor.constraint(equalTo: counterLabel.bottomAnchor, constant: 2),
+                counterSubtitleLabel.leadingAnchor.constraint(equalTo: counterLabel.leadingAnchor),
+                counterSubtitleLabel.trailingAnchor.constraint(equalTo: counterLabel.trailingAnchor)
+            ])
+            let angle: CGFloat = .pi / 33
+            counterLabel.transform = .init(rotationAngle: angle)
+            counterSubtitleLabel.transform = .init(rotationAngle: angle)
+        }
+
         // upscale images for iPad
         if traitCollection.userInterfaceIdiom == .pad {
             bottomImage.transform = bottomImage.transform.scaledBy(x: 1.5, y: 1.5)
@@ -64,6 +97,8 @@ final class WelcomeTourGreen: UIView, NotificationThemeable {
 
     func applyTheme() {
         searchLabel.textColor = .theme.ecosia.primaryText
+        counterLabel.textColor = .theme.ecosia.primaryText
+        counterSubtitleLabel.textColor = .theme.ecosia.secondaryText
     }
 
     func updateAccessibilitySettings() {