Add translate toast with settings button. Update onboarding.

ios/brave-ios/Sources/Brave/Frontend/Browser/BrowserViewController/BVC+Translate.swift

@@ -4,9 +4,11 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import BraveUI
+import DesignSystem
 import Foundation
 import Onboarding
 import Preferences
+import UIKit
 
 extension BrowserViewController: BraveTranslateScriptHandlerDelegate {
   func updateTranslateURLBar(tab: Tab?, state: TranslateURLBarButton.TranslateState) {
@@ -50,36 +52,44 @@ extension BrowserViewController: BraveTranslateScriptHandlerDelegate {
             onContinueButtonPressed: { [weak self, weak tab] in
               guard let tab = tab, let self = self else { return }
 
+              self.topToolbar.locationView.translateButton.setOnboardingState(enabled: false)
+
               if let scriptHandler = tab.getContentScript(
                 name: BraveTranslateScriptHandler.scriptName
               )
                 as? BraveTranslateScriptHandler
               {
-                self.showTranslateOnboarding(tab: tab) { [weak scriptHandler] translateEnabled in
-                  scriptHandler?.presentUI(on: self)
-                }
+                scriptHandler.presentUI(on: self)
               }
             },
             onDisableFeature: { [weak self, weak tab] in
               guard let tab = tab, let self = self else { return }
 
+              self.topToolbar.locationView.translateButton.setOnboardingState(enabled: false)
+
               Preferences.Translate.translateEnabled.value = false
               tab.translationState = .unavailable
               self.topToolbar.updateTranslateButtonState(.unavailable)
             }
-          )
+          ),
+          autoLayoutConfiguration: .init(preferredWidth: self.view.bounds.width - (32.0 * 2.0))
         )
 
+        popover.arrowDistance = 10.0
+
         popover.previewForOrigin = .init(
-          view: self.topToolbar.locationView.translateButton,
+          view: self.topToolbar.locationView.translateButton.then {
+            $0.setOnboardingState(enabled: true)
+          },
           action: { popover in
             popover.previewForOrigin = nil
             popover.dismissPopover()
             completion(Preferences.Translate.translateEnabled.value)
           }
         )
 
-        popover.popoverDidDismiss = { _ in
+        popover.popoverDidDismiss = { [weak self] _ in
+          self?.topToolbar.locationView.translateButton.setOnboardingState(enabled: false)
           completion(Preferences.Translate.translateEnabled.value)
         }
         popover.present(from: self.topToolbar.locationView.translateButton, on: self)
@@ -90,4 +100,16 @@ extension BrowserViewController: BraveTranslateScriptHandlerDelegate {
       completion(true)
     }
   }
+
+  func presentToast(_ languageInfo: BraveTranslateLanguageInfo) {
+    let popover = PopoverController(
+      content: TranslateToast(languageInfo: languageInfo),
+      autoLayoutConfiguration: .phoneWidth
+    )
+
+    popover.popoverDidDismiss = { [weak self] _ in
+
+    }
+    popover.present(from: self.topToolbar.locationView.translateButton, on: self)
+  }
 }

ios/brave-ios/Sources/Brave/Frontend/Browser/Toolbars/UrlBar/TranslateURLBarButton.swift

@@ -1,4 +1,4 @@
-// Copyright 2021 The Brave Authors. All rights reserved.
+// Copyright 2024 The Brave Authors. All rights reserved.
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
@@ -19,10 +19,14 @@ class TranslateURLBarButton: UIButton {
     }
   }
 
+  var imageIcon: UIImage? {
+    UIImage(braveSystemNamed: "leo.product.translate")
+  }
+
   override init(frame: CGRect) {
     super.init(frame: frame)
     adjustsImageWhenHighlighted = false
-    setImage(UIImage(braveSystemNamed: "leo.product.translate"), for: .normal)
+    setImage(imageIcon, for: .normal)
     updateIconSize()
   }
 
@@ -92,6 +96,42 @@ class TranslateURLBarButton: UIButton {
     }
   }
 
+  private lazy var gradientLayer = CAGradientLayer().then {
+    let gradient = BraveGradient(
+      stops: [
+        .init(color: UIColor(rgb: 0xFA7250), position: 0.0),
+        .init(color: UIColor(rgb: 0xFF1893), position: 0.43),
+        .init(color: UIColor(rgb: 0xA78AFF), position: 1.0),
+      ],
+      angle: .figmaDegrees(314.42)
+    )
+
+    $0.frame = self.bounds
+    $0.type = gradient.type
+    $0.colors = gradient.stops.map(\.color.cgColor)
+    $0.locations = gradient.stops.map({ NSNumber(value: $0.position) })
+    $0.startPoint = gradient.startPoint
+    $0.endPoint = gradient.endPoint
+
+    let mask = CALayer()
+    mask.contents = imageIcon?.cgImage
+    mask.frame = $0.bounds
+    $0.mask = mask
+  }
+
+  func setOnboardingState(enabled: Bool) {
+    if enabled {
+      gradientLayer.frame = imageView?.bounds ?? self.bounds
+      gradientLayer.mask?.frame = gradientLayer.bounds
+
+      imageView?.layer.addSublayer(gradientLayer)
+      setImage(nil, for: .normal)
+    } else {
+      gradientLayer.removeFromSuperlayer()
+      setImage(imageIcon, for: .normal)
+    }
+  }
+
   enum TranslateState {
     case available
     case unavailable

ios/brave-ios/Sources/Brave/Frontend/Browser/Translate/TranslateToast.swift

@@ -0,0 +1,94 @@
+// Copyright 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import BraveUI
+import SwiftUI
+
+struct TranslateToast: View {
+
+  var languageInfo: BraveTranslateLanguageInfo
+
+  var currentLanguageName: String {
+    if let languageCode = languageInfo.currentLanguage.languageCode?.identifier,
+      let languageName = Locale.current.localizedString(forLanguageCode: languageCode)
+    {
+      return languageName
+    }
+    return "Unknown Language"
+  }
+
+  var pageLanguageName: String {
+    if let languageCode = languageInfo.pageLanguage?.languageCode?.identifier,
+      let languageName = Locale.current.localizedString(forLanguageCode: languageCode)
+    {
+      return languageName
+    }
+    return "Unknown Language"
+  }
+
+  var body: some View {
+    HStack {
+      Image(braveSystemName: "leo.product.translate")
+        .symbolRenderingMode(.monochrome)
+        .foregroundStyle(
+          LinearGradient(
+            braveGradient: .init(
+              stops: [
+                .init(color: UIColor(rgb: 0xFA7250), position: 0.0),
+                .init(color: UIColor(rgb: 0xFF1893), position: 0.43),
+                .init(color: UIColor(rgb: 0xA78AFF), position: 1.0),
+              ],
+              angle: .figmaDegrees(314.42)
+            )
+          )
+        )
+        .padding(.trailing)
+      VStack {
+        Text("Page Translations")
+          .font(.callout.weight(.semibold))
+          .foregroundColor(Color(braveSystemName: .textPrimary))
+
+        Text(
+          "\(pageLanguageName) To \(currentLanguageName)"
+        )
+        .font(.callout)
+        .foregroundColor(Color(braveSystemName: .textSecondary))
+      }
+      .padding(.trailing)
+
+      Spacer()
+
+      Button {
+
+      } label: {
+        Image(braveSystemName: "leo.settings")
+          .foregroundStyle(Color(braveSystemName: .iconDefault))
+      }
+
+      Color(braveSystemName: .dividerSubtle)
+        .frame(width: 1.0)
+        .padding([.top, .bottom], 8.0)
+        .padding([.leading, .trailing])
+
+      Button {
+
+      } label: {
+        Text("Undo")
+          .foregroundStyle(Color(braveSystemName: .textInteractive))
+      }
+    }
+    .padding()
+  }
+}
+
+extension TranslateToast: PopoverContentComponent {
+  public var popoverBackgroundColor: UIColor {
+    .braveBackground
+  }
+}
+
+#Preview {
+  TranslateToast(languageInfo: .init())
+}

ios/brave-ios/Sources/Brave/Frontend/UserContent/UserScripts/Scripts_Dynamic/ScriptHandlers/Sandboxed/BraveTranslateScriptHandler.swift

@@ -15,6 +15,7 @@ import os.log
 protocol BraveTranslateScriptHandlerDelegate: NSObject {
   func updateTranslateURLBar(tab: Tab?, state: TranslateURLBarButton.TranslateState)
   func showTranslateOnboarding(tab: Tab?, completion: @escaping (_ translateEnabled: Bool) -> Void)
+  func presentToast(_ languageInfo: BraveTranslateLanguageInfo)
 }
 
 class BraveTranslateScriptLanguageDetectionHandler: NSObject, TabContentScript {
@@ -275,6 +276,7 @@ class BraveTranslateScriptHandler: NSObject, TabContentScript {
       )
 
       self.delegate?.updateTranslateURLBar(tab: self.tab, state: .active)
+      self.delegate?.presentToast(currentLanguageInfo)
     }
   }
 

ios/brave-ios/Sources/Onboarding/Assets/Images.xcassets/Translate/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}