feat(feedback): Theming (#4677)

* Update the client implementation to use the new capture feedback js api * Updates SDK API * Adds new feedback button in the sample * Adds changelog * Removes unused mock * Update CHANGELOG.md Co-authored-by: Krystof Woldrich <[email protected]> * Directly use captureFeedback from sentry/core * Use import from core * Fixes imports order lint issue * Fixes build issue * Adds captureFeedback tests from sentry-javascript * Update CHANGELOG.md * Only deprecate client captureUserFeedback * Add simple form UI * Adds basic form functionality * Update imports * Update imports * Remove useState hook to avoid multiple react instances issues * Move types and styles in different files * Removes attachment button to be added back separately along with the implementation * Add basic field validation * Adds changelog * Updates changelog * Updates changelog * Trim whitespaces from the submitted feedback * Adds tests * Renames FeedbackFormScreen to FeedbackForm * Add beta label * Extract default text to constants * Moves constant to a separate file and aligns naming with JS * Adds input text labels * Close screen before sending the feedback to minimise wait time Co-authored-by: LucasZF <[email protected]> * Rename file for consistency * Flatten configuration hierarchy and clean up * Align required values with JS * Use Sentry user email and name when set * Simplifies email validation * Show success alert message * Aligns naming with JS and unmounts the form by default * Use the minimum config without props in the changelog * Adds development not for unimplemented function * Show email and name conditionally * Adds sentry branding (png logo) * Adds sentry logo resource * Add assets in module exports * Revert "Add assets in module exports" This reverts commit 5292475. * Revert "Adds sentry logo resource" This reverts commit d6e9229. * Revert "Adds sentry branding (png logo)" This reverts commit 8c56753. * Add last event id * Mock lastEventId * Adds beta note in the changelog * Autoinject feedback form * Updates changelog * Align colors with JS * Update CHANGELOG.md Co-authored-by: Krystof Woldrich <[email protected]> * Update CHANGELOG.md Co-authored-by: Krystof Woldrich <[email protected]> * Update CHANGELOG.md Co-authored-by: Krystof Woldrich <[email protected]> * Use regular fonts for both buttons * Handle keyboard properly * Adds an option on whether the email should be validated * Merge properties only once * Loads current user data on form construction * Remove unneeded extra padding * Fix background color issue * Adds feedback button * Updates the changelog * Fixes changelog typo * Updates styles background color Co-authored-by: Krystof Woldrich <[email protected]> * Use defaultProps * Correct defaultProps * Adds test to verify when getUser is called * Use smaller image Co-authored-by: LucasZF <[email protected]> * Add margin next to the icon * Adds bottom spacing in the ErrorScreen so that the feedback button does not hide the scrollview buttons * (2.2) feat: Add Feedback Form UI Branding logo (#4357) * Adds sentry branding logo as a base64 encoded png --------- Co-authored-by: LucasZF <[email protected]> * Autoinject feedback form (#4370) * Align changelog entry * Update changelog * Disable bouncing * Add modal ui appearance * Update snapshot tests * Fix bottom margin * Fix sheet height * Remove extra modal border * Do not expose modal styles * Animate background color * Avoid keyboard in modal * Update changelog * Fix changelog * Updates comment * Extract FeedbackButtonProps * Add public function description to satisfy lint check * Adds tests * Fix tests * Add hardcoded dark and light color themes * Rename theme options * Update snapshot tests * Include in the feedback integration * Fix circular dependency * Add theme integration options * Adds changelog * Add comment note * Align with JS api * Remove unneeded line Co-authored-by: Krystof Woldrich <[email protected]> * Place widget button below the feedback widget shadow * Expose showFeedbackButton/hideFeedbackButton methods * Add dummy integration for tracking usage * Adds button border * Fixes tests * Add accentBackground and accentForeground colors * Extract integration getter in a helper function * Adds dynamic theming support * Add snapshot tests * Adds system theme tests * Test dynamically changed theme --------- Co-authored-by: Krystof Woldrich <[email protected]> Co-authored-by: LucasZF <[email protected]>
getsentry · krystofwoldrich · May 20, 2025 · Apr 7, 2025 · Apr 7, 2025 · Apr 14, 2025
commit 9a0ab61836a6dd4e0441622114c3bf2befc4c5e0
@@ -11,6 +11,7 @@
 ### Features
 
 - Adds the `FeedbackButton` component that shows the Feedback Widget ([#4378](https://github.com/getsentry/sentry-react-native/pull/4378))
+- Add Feedback Widget theming ([#4677](https://github.com/getsentry/sentry-react-native/pull/4677))
 
 ### Fixes
 

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { Image, Text, TouchableOpacity } from 'react-native';
+import type { NativeEventSubscription} from 'react-native';
+import { Appearance, Image, Text, TouchableOpacity } from 'react-native';
 
 import { defaultButtonConfiguration } from './defaults';
 import { defaultButtonStyles } from './FeedbackWidget.styles';
+import { getTheme } from './FeedbackWidget.theme';
 import type { FeedbackButtonProps, FeedbackButtonStyles, FeedbackButtonTextConfiguration } from './FeedbackWidget.types';
 import { feedbackIcon } from './icons';
 import { lazyLoadFeedbackIntegration } from './lazy';
@@ -18,20 +20,41 @@ const showFeedbackWidget = (): void => {
  * Implements a feedback button that opens the FeedbackForm.
  */
 export class FeedbackButton extends React.Component<FeedbackButtonProps> {
+  private _themeListener: NativeEventSubscription;
+
   public constructor(props: FeedbackButtonProps) {
     super(props);
     lazyLoadFeedbackIntegration();
   }
 
+  /**
+   * Adds a listener for theme changes.
+   */
+  public componentDidMount(): void {
+    this._themeListener = Appearance.addChangeListener(() => {
+      this.forceUpdate();
+    });
+  }
+
+  /**
+   * Removes the theme listener.
+   */
+  public componentWillUnmount(): void {
+    if (this._themeListener) {
+      this._themeListener.remove();
+    }
+  }
+
   /**
    * Renders the feedback button.
    */
   public render(): React.ReactNode {
+    const theme = getTheme();
     const text: FeedbackButtonTextConfiguration = { ...defaultButtonConfiguration, ...this.props };
     const styles: FeedbackButtonStyles = {
-      triggerButton: { ...defaultButtonStyles.triggerButton, ...this.props.styles?.triggerButton },
-      triggerText: { ...defaultButtonStyles.triggerText, ...this.props.styles?.triggerText },
-      triggerIcon: { ...defaultButtonStyles.triggerIcon, ...this.props.styles?.triggerIcon },
+      triggerButton: { ...defaultButtonStyles(theme).triggerButton, ...this.props.styles?.triggerButton },
+      triggerText: { ...defaultButtonStyles(theme).triggerText, ...this.props.styles?.triggerText },
+      triggerIcon: { ...defaultButtonStyles(theme).triggerIcon, ...this.props.styles?.triggerIcon },
     };
 
     return (

@@ -1,133 +1,135 @@
 import type { ViewStyle } from 'react-native';
 
+import type { FeedbackWidgetTheme } from './FeedbackWidget.theme';
 import type { FeedbackButtonStyles, FeedbackWidgetStyles } from './FeedbackWidget.types';
 
-const PURPLE = 'rgba(88, 74, 192, 1)';
-const FOREGROUND_COLOR = '#2b2233';
-const BACKGROUND_COLOR = '#ffffff';
-const BORDER_COLOR = 'rgba(41, 35, 47, 0.13)';
-
-const defaultStyles: FeedbackWidgetStyles = {
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: BACKGROUND_COLOR,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 20,
-    textAlign: 'left',
-    flex: 1,
-    color: FOREGROUND_COLOR,
-  },
-  label: {
-    marginBottom: 4,
-    fontSize: 16,
-    color: FOREGROUND_COLOR,
-  },
-  input: {
-    height: 50,
-    borderColor: BORDER_COLOR,
-    borderWidth: 1,
-    borderRadius: 5,
-    paddingHorizontal: 10,
-    marginBottom: 15,
-    fontSize: 16,
-    color: FOREGROUND_COLOR,
-  },
-  textArea: {
-    height: 100,
-    textAlignVertical: 'top',
-    color: FOREGROUND_COLOR,
-  },
-  screenshotButton: {
-    backgroundColor: BACKGROUND_COLOR,
-    padding: 15,
-    borderRadius: 5,
-    alignItems: 'center',
-    flex: 1,
-    borderWidth: 1,
-    borderColor: BORDER_COLOR,
-  },
-  screenshotContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-    marginBottom: 20,
-  },
-  screenshotThumbnail: {
-    width: 50,
-    height: 50,
-    borderRadius: 5,
-    marginRight: 10,
-  },
-  screenshotText: {
-    color: FOREGROUND_COLOR,
-    fontSize: 16,
-  },
-  submitButton: {
-    backgroundColor: PURPLE,
-    paddingVertical: 15,
-    borderRadius: 5,
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  submitText: {
-    color: BACKGROUND_COLOR,
-    fontSize: 18,
-  },
-  cancelButton: {
-    backgroundColor: BACKGROUND_COLOR,
-    padding: 15,
-    borderRadius: 5,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: BORDER_COLOR,
-  },
-  cancelText: {
-    color: FOREGROUND_COLOR,
-    fontSize: 16,
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    width: '100%',
-  },
-  sentryLogo: {
-    width: 40,
-    height: 40,
-  },
+const defaultStyles = (theme: FeedbackWidgetTheme): FeedbackWidgetStyles => {
+  return {
+    container: {
+      flex: 1,
+      padding: 20,
+      backgroundColor: theme.background,
+    },
+    title: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      marginBottom: 20,
+      textAlign: 'left',
+      flex: 1,
+      color: theme.foreground,
+    },
+    label: {
+      marginBottom: 4,
+      fontSize: 16,
+      color: theme.foreground,
+    },
+    input: {
+      height: 50,
+      borderColor: theme.border,
+      borderWidth: 1,
+      borderRadius: 5,
+      paddingHorizontal: 10,
+      marginBottom: 15,
+      fontSize: 16,
+      color: theme.foreground,
+    },
+    textArea: {
+      height: 100,
+      textAlignVertical: 'top',
+      color: theme.foreground,
+    },
+    screenshotButton: {
+      backgroundColor: theme.background,
+      padding: 15,
+      borderRadius: 5,
+      alignItems: 'center',
+      flex: 1,
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    screenshotContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '100%',
+      marginBottom: 20,
+    },
+    screenshotThumbnail: {
+      width: 50,
+      height: 50,
+      borderRadius: 5,
+      marginRight: 10,
+    },
+    screenshotText: {
+      color: theme.foreground,
+      fontSize: 16,
+    },
+    submitButton: {
+      backgroundColor: theme.accentBackground,
+      paddingVertical: 15,
+      borderRadius: 5,
+      alignItems: 'center',
+      marginBottom: 10,
+    },
+    submitText: {
+      color: theme.accentForeground,
+      fontSize: 18,
+    },
+    cancelButton: {
+      backgroundColor: theme.background,
+      padding: 15,
+      borderRadius: 5,
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    cancelText: {
+      color: theme.foreground,
+      fontSize: 16,
+    },
+    titleContainer: {
+      flexDirection: 'row',
+      width: '100%',
+    },
+    sentryLogo: {
+      width: 40,
+      height: 40,
+      tintColor: theme.sentryLogo,
+    },
+  };
 };
 
-export const defaultButtonStyles: FeedbackButtonStyles = {
-  triggerButton: {
-    position: 'absolute',
-    bottom: 30,
-    right: 30,
-    backgroundColor: BACKGROUND_COLOR,
-    padding: 15,
-    borderRadius: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-    elevation: 5,
-    shadowColor: BORDER_COLOR,
-    shadowOffset: { width: 1, height: 2 },
-    shadowOpacity: 0.5,
-    shadowRadius: 3,
-    flexDirection: 'row',
-    borderWidth: 1,
-    borderColor: BORDER_COLOR,
-  },
-  triggerText: {
-    color: FOREGROUND_COLOR,
-    fontSize: 18,
-  },
-  triggerIcon: {
-    width: 24,
-    height: 24,
-    padding: 2,
-    marginEnd: 6,
-  },
+export const defaultButtonStyles = (theme: FeedbackWidgetTheme): FeedbackButtonStyles => {
+  return {
+    triggerButton: {
+      position: 'absolute',
+      bottom: 30,
+      right: 30,
+      backgroundColor: theme.background,
+      padding: 15,
+      borderRadius: 40,
+      justifyContent: 'center',
+      alignItems: 'center',
+      elevation: 5,
+      shadowColor: theme.border,
+      shadowOffset: { width: 1, height: 2 },
+      shadowOpacity: 0.5,
+      shadowRadius: 3,
+      flexDirection: 'row',
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    triggerText: {
+      color: theme.foreground,
+      fontSize: 18,
+    },
+    triggerIcon: {
+      width: 24,
+      height: 24,
+      padding: 2,
+      marginEnd: 6,
+      tintColor: theme.sentryLogo,
+    },
+  };
 };
 
 export const modalWrapper: ViewStyle = {
@@ -138,18 +140,20 @@ export const modalWrapper: ViewStyle = {
   bottom: 0,
 };
 
-export const modalSheetContainer: ViewStyle = {
-  backgroundColor: '#ffffff',
-  borderTopLeftRadius: 16,
-  borderTopRightRadius: 16,
-  overflow: 'hidden',
-  alignSelf: 'stretch',
-  shadowColor: '#000',
-  shadowOffset: { width: 0, height: -3 },
-  shadowOpacity: 0.1,
-  shadowRadius: 4,
-  elevation: 5,
-  flex: 1,
+export const modalSheetContainer = (theme: FeedbackWidgetTheme): ViewStyle => {
+  return {
+    backgroundColor: theme.background,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    overflow: 'hidden',
+    alignSelf: 'stretch',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -3 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
+    flex: 1,
+  };
 };
 
 export const topSpacer: ViewStyle = {