outline colors and other theming

Samples/iOS-Swift/iOS-Swift/AppDelegate.swift

@@ -219,7 +219,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
                         fontFamily = "ChalkboardSE-Regular"
                     }
                     theme.font = UIFont(name: fontFamily, size: fontSize) ?? UIFont.systemFont(ofSize: fontSize)
-                    theme.outlineColor = .purple
+                    theme.outlineStyle = .init(outlineColor: .purple)
                     theme.foreground = .purple
                     theme.background = .purple.withAlphaComponent(0.1)
                 }

Sources/Swift/Integrations/UserFeedback/Configuration/SentryUserFeedbackThemeConfiguration.swift

@@ -31,55 +31,65 @@ public class SentryUserFeedbackThemeConfiguration: NSObject {
      * Foreground color for the form submit button.
      * - note: Default: `rgb(255, 255, 255)` for both dark and light modes
      */
-    public var accentForeground: UIColor = UIColor.white
+    public var submitForeground: UIColor = UIColor.white
 
     /**
      * Background color for the form submit button in light and dark modes.
      * - note: Default: `rgb(88, 74, 192)` for both light and dark modes
      */
-    public var accentBackground: UIColor = UIColor(red: 88 / 255, green: 74 / 255, blue: 192 / 255, alpha: 1)
+    public var submitBackground: UIColor = UIColor(red: 88 / 255, green: 74 / 255, blue: 192 / 255, alpha: 1)
 
     /**
-     * Color used for success-related components (such as text color when feedback is submitted successfully).
-     * - note: Default light mode: `rgb(38, 141, 117)`; dark mode: `rgb(45, 169, 140)`
+     * Foreground color for the cancel and screenshot buttons.
+     * - note: Default: Same as `foreground` for both dark and light modes
      */
-    public var successColor = UIScreen.main.traitCollection.userInterfaceStyle == .dark ? UIColor(red: 45 / 255, green: 169 / 255, blue: 140 / 255, alpha: 1) : UIColor(red: 38 / 255, green: 141 / 255, blue: 117 / 255, alpha: 1)
+    public lazy var buttonForeground: UIColor = foreground
 
     /**
-     * Color used for error-related components (such as text color when there's an error submitting feedback).
-     * - note: Default light mode: `rgb(223, 51, 56)`; dark mode: `rgb(245, 84, 89)`
+     * Background color for the form cancel and screenshot buttons in light and dark modes.
+     * - note: Default: Transparent for both light and dark modes
      */
-    public var errorColor = UIScreen.main.traitCollection.userInterfaceStyle == .dark ? UIColor(red: 245 / 255, green: 84 / 255, blue: 89 / 255, alpha: 1) : UIColor(red: 223 / 255, green: 51 / 255, blue: 56 / 255, alpha: 1)
+    public var buttonBackground: UIColor = UIColor.clear
 
     /**
-     * Normal outline color for form inputs.
-     * - note: Default: `nil (system default)`
+     * Color used for success-related components (such as text color when feedback is submitted successfully).
+     * - note: Default light mode: `rgb(38, 141, 117)`; dark mode: `rgb(45, 169, 140)`
      */
-    public var outlineColor = UIColor.systemGray3
+    public var successColor = UIScreen.main.traitCollection.userInterfaceStyle == .dark ? UIColor(red: 45 / 255, green: 169 / 255, blue: 140 / 255, alpha: 1) : UIColor(red: 38 / 255, green: 141 / 255, blue: 117 / 255, alpha: 1)
 
     /**
-     * Outline color for form inputs when focused.
-     * - note: Default: `nil (system default)`
+     * Color used for error-related components (such as text color when there's an error submitting feedback).
+     * - note: Default light mode: `rgb(223, 51, 56)`; dark mode: `rgb(245, 84, 89)`
      */
-    public var outlineColorFocussed: UIColor?
+    public var errorColor = UIScreen.main.traitCollection.userInterfaceStyle == .dark ? UIColor(red: 245 / 255, green: 84 / 255, blue: 89 / 255, alpha: 1) : UIColor(red: 223 / 255, green: 51 / 255, blue: 56 / 255, alpha: 1)
 
-    /**
-     * Normal outline thickness for form inputs.
-     * - note: Default: `nil (system default)`
-     */
-    public var outlineThickness: NSNumber?
+    public struct OutlineStyle: Equatable {
+        /**
+         * Outline color for form inputs.
+         * - note: Default: The system default of a UITextField outline with borderStyle of .roundedRect.
+         */
+        public var outlineColor =  UIColor(white: 204 / 255, alpha: 1)
+
+        /**
+         * Outline corner radius for form input elements.
+         * - note: Default: `5`
+         */
+        public var cornerRadius: CGFloat = 5
+
+        public var outlineWidth: CGFloat = 0.5
+
+        public init(outlineColor: UIColor = UIColor(white: 204 / 255, alpha: 1), cornerRadius: CGFloat = 5, outlineWidth: CGFloat = 0.5) {
+            self.outlineColor = outlineColor
+            self.cornerRadius = cornerRadius
+            self.outlineWidth = outlineWidth
+        }
+    }
 
-    /**
-     * Outline thickness for form inputs when focused.
-     * - note: Default: `nil (system default)`
-     */
-    public var outlineThicknessFocussed: NSNumber?
+    let defaultOutlineStyle = OutlineStyle()
+    public lazy var outlineStyle: OutlineStyle = defaultOutlineStyle
 
-    /**
-     * Outline corner radius for form input elements.
-     * - note: Default: `nil (system default)`
-     */
-    public var cornerRadius: NSNumber?
+    public var inputBackground: UIColor = UIColor.secondarySystemBackground
+    public var inputBorder: CGFloat? = nil
 }
 
 #endif // os(iOS) && !SENTRY_NO_UIKIT

Sources/Swift/Integrations/UserFeedback/SentryUserFeedbackForm.swift

@@ -92,7 +92,13 @@ class SentryUserFeedbackForm: UIViewController {
     lazy var fullNameTextField = {
         let field = UITextField(frame: .zero)
         field.placeholder = config.formConfig.namePlaceholder
-        field.borderStyle = .roundedRect
+        if config.theme.outlineStyle == config.theme.defaultOutlineStyle {
+            field.borderStyle = .roundedRect
+        } else {
+            field.layer.cornerRadius = config.theme.outlineStyle.cornerRadius
+            field.layer.borderWidth = config.theme.outlineStyle.outlineWidth
+            field.layer.borderColor = config.theme.outlineStyle.outlineColor.cgColor
+        }
         field.accessibilityLabel = config.formConfig.nameTextFieldAccessibilityLabel
         return field
     }()
@@ -106,7 +112,13 @@ class SentryUserFeedbackForm: UIViewController {
     lazy var emailTextField = {
         let field = UITextField(frame: .zero)
         field.placeholder = config.formConfig.emailPlaceholder
-        field.borderStyle = .roundedRect
+        if config.theme.outlineStyle == config.theme.defaultOutlineStyle {
+            field.borderStyle = .roundedRect
+        } else {
+            field.layer.cornerRadius = config.theme.outlineStyle.cornerRadius
+            field.layer.borderWidth = config.theme.outlineStyle.outlineWidth
+            field.layer.borderColor = config.theme.outlineStyle.outlineColor.cgColor
+        }
         field.accessibilityLabel = config.formConfig.emailTextFieldAccessibilityLabel
         return field
     }()
@@ -122,9 +134,9 @@ class SentryUserFeedbackForm: UIViewController {
         textView.text = config.formConfig.messagePlaceholder // TODO: color the text as placeholder if this is the content of the textview, otherwise change to regular foreground color
         textView.isScrollEnabled = true
         textView.isEditable = true
-        textView.layer.borderWidth = 0.3
-        textView.layer.borderColor = UIColor(white: 204 / 255, alpha: 1).cgColor // this is the observed color of a textfield outline when using borderStyle = .roundedRect
-        textView.layer.cornerRadius = 5
+        textView.layer.cornerRadius = config.theme.outlineStyle.cornerRadius
+        textView.layer.borderWidth = config.theme.outlineStyle.outlineWidth
+        textView.layer.borderColor = config.theme.outlineStyle.outlineColor.cgColor
         textView.accessibilityLabel = config.formConfig.messageTextViewAccessibilityLabel
         return textView
     }()
@@ -133,35 +145,51 @@ class SentryUserFeedbackForm: UIViewController {
         let button = UIButton(frame: .zero)
         button.setTitle(config.formConfig.addScreenshotButtonLabel, for: .normal)
         button.accessibilityLabel = config.formConfig.addScreenshotButtonAccessibilityLabel
-        button.backgroundColor = .systemBlue
+        button.backgroundColor = config.theme.buttonBackground
+        button.setTitleColor(config.theme.buttonForeground, for: .normal)
         button.addTarget(self, action: #selector(addScreenshotButtonTapped), for: .touchUpInside)
+        button.layer.cornerRadius = config.theme.outlineStyle.cornerRadius
+        button.layer.borderWidth = config.theme.outlineStyle.outlineWidth
+        button.layer.borderColor = config.theme.outlineStyle.outlineColor.cgColor
         return button
     }()
 
     lazy var removeScreenshotButton = {
         let button = UIButton(frame: .zero)
         button.setTitle(config.formConfig.removeScreenshotButtonLabel, for: .normal)
         button.accessibilityLabel = config.formConfig.removeScreenshotButtonAccessibilityLabel
-        button.backgroundColor = .systemBlue
+        button.backgroundColor = config.theme.buttonBackground
+        button.setTitleColor(config.theme.buttonForeground, for: .normal)
         button.addTarget(self, action: #selector(removeScreenshotButtonTapped), for: .touchUpInside)
+        button.layer.cornerRadius = config.theme.outlineStyle.cornerRadius
+        button.layer.borderWidth = config.theme.outlineStyle.outlineWidth
+        button.layer.borderColor = config.theme.outlineStyle.outlineColor.cgColor
         return button
     }()
 
     lazy var submitButton = {
         let button = UIButton(frame: .zero)
         button.setTitle(config.formConfig.submitButtonLabel, for: .normal)
         button.accessibilityLabel = config.formConfig.submitButtonAccessibilityLabel
-        button.backgroundColor = .systemGreen
+        button.backgroundColor = config.theme.submitBackground
+        button.setTitleColor(config.theme.submitForeground, for: .normal)
         button.addTarget(self, action: #selector(submitFeedbackButtonTapped), for: .touchUpInside)
+        button.layer.cornerRadius = config.theme.outlineStyle.cornerRadius
+        button.layer.borderWidth = config.theme.outlineStyle.outlineWidth
+        button.layer.borderColor = config.theme.outlineStyle.outlineColor.cgColor
         return button
     }()
 
     lazy var cancelButton = {
         let button = UIButton(frame: .zero)
         button.setTitle(config.formConfig.cancelButtonLabel, for: .normal)
         button.accessibilityLabel = config.formConfig.cancelButtonAccessibilityLabel
-        button.backgroundColor = .systemRed
+        button.backgroundColor = config.theme.buttonBackground
+        button.setTitleColor(config.theme.buttonForeground, for: .normal)
         button.addTarget(self, action: #selector(cancelButtonTapped), for: .touchUpInside)
+        button.layer.cornerRadius = config.theme.outlineStyle.cornerRadius
+        button.layer.borderWidth = config.theme.outlineStyle.outlineWidth
+        button.layer.borderColor = config.theme.outlineStyle.outlineColor.cgColor
         return button
     }()
 

Sources/Swift/Integrations/UserFeedback/SentryUserFeedbackWidgetButtonView.swift

@@ -158,10 +158,10 @@ class SentryUserFeedbackWidgetButtonView: UIView {
 
         if UIScreen.main.traitCollection.userInterfaceStyle == .dark {
             lozengeLayer.fillColor = config.darkTheme.background.cgColor
-            lozengeLayer.strokeColor = config.darkTheme.outlineColor.cgColor
+            lozengeLayer.strokeColor = config.darkTheme.outlineStyle.outlineColor.cgColor
         } else {
             lozengeLayer.fillColor = config.theme.background.cgColor
-            lozengeLayer.strokeColor = config.theme.outlineColor.cgColor
+            lozengeLayer.strokeColor = config.theme.outlineStyle.outlineColor.cgColor
         }
 
         let iconSizeDifference = (scaledIconSize - svgSize) / 2