Adds sentry branding (png logo)

Author: antonis

packages/core/src/js/feedback/FeedbackForm.styles.ts

@@ -10,7 +10,8 @@ const defaultStyles: FeedbackFormStyles = {
     fontSize: 24,
     fontWeight: 'bold',
     marginBottom: 20,
-    textAlign: 'center',
+    textAlign: 'left',
+    flex: 1,
   },
   label: {
     marginBottom: 4,
@@ -49,6 +50,14 @@ const defaultStyles: FeedbackFormStyles = {
     color: '#6a1b9a',
     fontSize: 16,
   },
+  titleContainer: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  sentryLogo: {
+    width: 40,
+    height: 40,
+  },
 };
 
 export default defaultStyles;

packages/core/src/js/feedback/FeedbackForm.tsx

@@ -2,7 +2,7 @@ import { captureFeedback } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
-import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Alert, Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
@@ -78,7 +78,12 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     return (
     <View style={styles.container}>
-      <Text style={styles.title}>{text.formTitle}</Text>
+      <View style={styles.titleContainer}>
+          <Text style={styles.title}>{text.formTitle}</Text>
+          {config.showBranding && (
+            <Image source={require('../../../assets/sentrylogo.png')} style={styles.sentryLogo} />
+          )}
+      </View>
 
       {config.showName && (
       <>

packages/core/src/js/feedback/FeedbackForm.types.ts

@@ -1,5 +1,8 @@
-import type { TextStyle, ViewStyle } from 'react-native';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 
+/**
+ * The props for the feedback form
+ */
 export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
   styles?: FeedbackFormStyles;
 }
@@ -8,6 +11,11 @@ export interface FeedbackFormProps extends FeedbackGeneralConfiguration, Feedbac
  * General feedback configuration
  */
 export interface FeedbackGeneralConfiguration {
+  /**
+   * Show the Sentry branding
+   */
+  showBranding?: boolean;
+
   /**
    * Should the email field be required?
    */
@@ -123,6 +131,9 @@ export interface FeedbackCallbacks {
   onFormClose?: () => void;
 }
 
+/**
+ * The styles for the feedback form
+ */
 export interface FeedbackFormStyles {
   container?: ViewStyle;
   title?: TextStyle;
@@ -133,8 +144,13 @@ export interface FeedbackFormStyles {
   submitText?: TextStyle;
   cancelButton?: ViewStyle;
   cancelText?: TextStyle;
+  titleContainer?: ViewStyle;
+  sentryLogo?: ImageStyle;
 }
 
+/**
+ * The state of the feedback form
+ */
 export interface FeedbackFormState {
   isVisible: boolean;
   name: string;

packages/core/src/js/feedback/defaults.ts

@@ -30,6 +30,7 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   },
 
   // FeedbackGeneralConfiguration
+  showBranding: true,
   isEmailRequired: false,
   isNameRequired: false,
   showEmail: true,

packages/core/test/feedback/FeedbackForm.test.tsx

@@ -36,6 +36,7 @@ const defaultProps: FeedbackFormProps = {
   formError: 'Please fill out all required fields.',
   emailError: 'The email address is not valid.',
   successMessageText: 'Feedback success',
+  showBranding: false,
 };
 
 describe('FeedbackForm', () => {