[focus-ios] Fix iOS widget has a white border (mozilla-mobile/focus-i…

…os#4011)

* Fix iOS widget has a white border mozilla-mobile/focus-ios#4005

* Fix padding.

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

focus-ios/focus-ios/BlockzillaPackage/Sources/Onboarding/SwiftUI Onboarding/CardBannerView.swift

@@ -62,7 +62,7 @@ public struct CardBannerView: View {
     }
 
     var widget: some View {
-        SearchWidgetView(title: config.widget.title)
+        SearchWidgetView(title: config.widget.title, padding: true, background: true)
             .frame(width: .searchWidgetSize, height: .searchWidgetSize)
             .clipShape(RoundedRectangle(cornerRadius: 20))
             .colorScheme(.light)

focus-ios/focus-ios/BlockzillaPackage/Sources/Onboarding/SwiftUI Onboarding/ShowMeHowOnboardingView.swift

@@ -56,7 +56,7 @@ public struct ShowMeHowOnboardingView: View {
                         }
                         HStack {
                             Spacer()
-                            SearchWidgetView(title: config.widgetText)
+                            SearchWidgetView(title: config.widgetText, padding: true, background: true)
                                 .frame(width: .searchWidgetSize, height: .searchWidgetSize)
                                 .clipShape(RoundedRectangle(cornerRadius: 20))
                                 .colorScheme(.light)

focus-ios/focus-ios/BlockzillaPackage/Sources/Widget/SearchWidgetView.swift

@@ -6,9 +6,13 @@ import SwiftUI
 
 public struct SearchWidgetView: View {
     let title: String
+    let padding: Bool
+    let background: Bool
 
-    public init(title: String) {
+    public init(title: String, padding: Bool, background: Bool) {
         self.title = title
+        self.padding = padding
+        self.background = background
     }
 
     public var body: some View {
@@ -17,11 +21,11 @@ public struct SearchWidgetView: View {
                 Text(title)
                     .font(.headline)
                     .fontWeight(.medium)
-                .minimumScaleFactor(0.8)
-                .foregroundColor(.white)
+                    .minimumScaleFactor(0.8)
+                    .foregroundColor(.white)
 
                 Spacer()
-
+                
                 Image.magnifyingGlass
                     .foregroundColor(.white)
                     .frame(height: .magnifyingGlassHeight)
@@ -36,20 +40,20 @@ public struct SearchWidgetView: View {
                     .frame(height: .logoHeight)
             }
         }
-        .padding()
+        .padding(.all, padding ? 10 : 0)
         .background(
-            LinearGradient(
+            background ? LinearGradient(
                 gradient: .quickAccessWidget,
                 startPoint: .topLeading,
-                endPoint: .bottomTrailing)
+                endPoint: .bottomTrailing) : nil
         )
     }
 }
 
 @available(iOS 14, *)
 struct SearchWidgetView_Previews: PreviewProvider {
     static var previews: some View {
-        SearchWidgetView(title: "Search in Focus")
+        SearchWidgetView(title: "Search in Focus", padding: true, background: true)
             .previewLayout(.sizeThatFits)
             .frame(width: 135, height: 135)
             .clipShape(RoundedRectangle(cornerRadius: 20))

focus-ios/focus-ios/Widgets/Assets.xcassets/GradientFirst.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.796",
+          "green" : "0.165",
+          "red" : "0.349"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x33",
+          "green" : "0x2A",
+          "red" : "0x2B"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

focus-ios/focus-ios/Widgets/Assets.xcassets/GradientSecond.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "1.000",
+          "green" : "0.443",
+          "red" : "0.671"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x33",
+          "green" : "0x2A",
+          "red" : "0x2B"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

focus-ios/focus-ios/Widgets/Widgets.swift

@@ -31,8 +31,13 @@ struct FocusWidgetsEntryView : View {
     var entry: Provider.Entry
 
     var body: some View {
-        SearchWidgetView(title: String(format: .searchInAppFormat, String.appNameForBundle))
+        SearchWidgetView(title: String(format: .searchInAppFormat, String.appNameForBundle), padding: !Bool.isIOS17OrLater, background: false)
             .widgetURL(.deepLinkURL)
+            .widgetBackground(backgroundView:
+                                LinearGradient(
+                                    gradient: .quickAccessWidget,
+                                    startPoint: .topLeading,
+                                    endPoint: .bottomTrailing))
     }
 }
 
@@ -57,6 +62,10 @@ struct FocusWidgets_Previews: PreviewProvider {
     }
 }
 
+fileprivate extension Gradient {
+    static let quickAccessWidget = Gradient(colors: [Color("GradientFirst"), Color("GradientSecond")])
+}
+
 fileprivate extension String {
     static var appNameForBundle: String {
         var isKlar: Bool { return (Bundle.main.infoDictionary!["CFBundleIdentifier"] as! String).contains("Klar") }
@@ -85,6 +94,28 @@ fileprivate extension String {
     static let searchInApp = String(format: searchInAppFormat, AppInfo.shortProductName)
 }
 
+fileprivate extension Bool {
+    static var isIOS17OrLater: Bool {
+        if #available(iOS 17, *) {
+            return true
+        } else {
+            return false
+        }
+    }
+}
+
 fileprivate extension URL {
     static let deepLinkURL: URL = URL(string: "firefox-focus://widget")!
 }
+
+fileprivate extension View {
+    func widgetBackground(backgroundView: some View) -> some View {
+        if #available(watchOS 10.0, iOSApplicationExtension 17.0, iOS 17.0, macOSApplicationExtension 14.0, *) {
+            return containerBackground(for: .widget) {
+                backgroundView
+            }
+        } else {
+            return background(backgroundView)
+        }
+    }
+}