@sentry-internal/feedback - npm Package Compare versions

Comparing version 0.0.1-alpha.7 to 0.0.1-alpha.8

build/npm/cjs/index.js

@@ -331,3 +331,2 @@ Object.defineProperty(exports, '__esModule', { value: true });
   border: var(--border);
-  padding: 24px;
   border-radius: 20px;
@@ -350,5 +349,8 @@ background-color: var(--background);
 .dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font-size: 20px;
   font-weight: 600;
-  padding: 0;
+  padding: 24px 24px 0 24px;
   margin: 0;
@@ -358,2 +360,6 @@ margin-bottom: 16px;
 
+.brand-link {
+  display: inline-flex;
+}
+
 .error {
@@ -369,3 +375,3 @@ color: var(--error);
   gap: 16px;
-  padding: 0;
+  padding: 0 24px 24px;
 }
@@ -412,4 +418,6 @@
 }
+
 .form__input:focus {
-  border-color: var(--input-border-focus);
+  outline: 1px solid transparent;
+  outline-color: var(--input-border-focus);
 }
@@ -540,3 +548,3 @@
 
-  ${getThemedCssVariables(themes.light)}
+  ${getThemedCssVariables(colorScheme === 'dark' ? themes.dark : themes.light)}
 }
@@ -551,9 +559,3 @@
   }
-}
-`
-    : `
-:host-context([data-sentry-feedback-colorscheme="dark"]) {
-  ${getThemedCssVariables(themes.dark)}
-}
-`
+}` : ''}
 }`;
@@ -671,3 +673,3 @@
 const SIZE = 20;
-const XMLNS$1 = 'http://www.w3.org/2000/svg';
+const XMLNS$2 = 'http://www.w3.org/2000/svg';
 
@@ -679,3 +681,3 @@ /**
   const createElementNS = (tagName) =>
-    browser.WINDOW.document.createElementNS(XMLNS$1, tagName);
+    browser.WINDOW.document.createElementNS(XMLNS$2, tagName);
   const svg = setAttributesNS(createElementNS('svg'), {
@@ -1023,3 +1025,53 @@ class: 'feedback-icon',
 
+const XMLNS$1 = 'http://www.w3.org/2000/svg';
+
 /**
+ * Sentry Logo
+ */
+function Logo({ colorScheme }) {
+  const createElementNS = (tagName) =>
+    browser.WINDOW.document.createElementNS(XMLNS$1, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    class: 'sentry-logo',
+    width: '32',
+    height: '30',
+    viewBox: '0 0 72 66',
+    fill: 'none',
+  });
+
+  const path = setAttributesNS(createElementNS('path'), {
+    transform: 'translate(11, 11)',
+    d: 'M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z',
+  });
+  svg.append(path);
+
+  const defs = createElementNS('defs');
+  const style = createElementNS('style');
+
+  if (colorScheme === 'system') {
+    style.textContent = `
+    @media (prefers-color-scheme: dark) {
+      path: {
+        fill: '#fff';
+      }
+    }
+    `;
+  }
+
+  style.textContent = `
+    path {
+      fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
+    }`;
+
+  defs.append(style);
+  svg.append(defs);
+
+  return {
+    get el() {
+      return svg;
+    },
+  };
+}
+
+/**
  * Feedback dialog component that has the form
@@ -1029,4 +1081,6 @@ */
   formTitle,
+  showBranding,
   showName,
   showEmail,
+  colorScheme,
   isAnonymous,
@@ -1112,3 +1166,19 @@ defaultName,
       },
-      createElement('h2', { className: 'dialog__header' }, formTitle),
+      createElement(
+        'h2',
+        { className: 'dialog__header' },
+        formTitle,
+        showBranding &&
+          createElement(
+            'a',
+            {
+              className: 'brand-link',
+              target: '_blank',
+              href: 'https://sentry.io/welcome/',
+              title: 'Powered by Sentry',
+              rel: 'noopener noreferrer',
+            },
+            Logo({ colorScheme }).el,
+          ),
+      ),
       formEl,
@@ -1335,2 +1405,4 @@ ),
       dialog = Dialog({
+        colorScheme: options.colorScheme,
+        showBranding: options.showBranding,
         showName: options.showName,
@@ -1494,2 +1566,3 @@ showEmail: options.showEmail,
     id = 'sentry-feedback',
+    showBranding = true,
     autoInject = true,
@@ -1540,2 +1613,3 @@ showEmail = true,
       id,
+      showBranding,
       autoInject,
@@ -1542,0 +1616,0 @@ isAnonymous,

build/npm/esm/index.js

@@ -329,3 +329,2 @@ import { prepareEvent, getCurrentHub } from '@sentry/core';
   border: var(--border);
-  padding: 24px;
   border-radius: 20px;
@@ -348,5 +347,8 @@ background-color: var(--background);
 .dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font-size: 20px;
   font-weight: 600;
-  padding: 0;
+  padding: 24px 24px 0 24px;
   margin: 0;
@@ -356,2 +358,6 @@ margin-bottom: 16px;
 
+.brand-link {
+  display: inline-flex;
+}
+
 .error {
@@ -367,3 +373,3 @@ color: var(--error);
   gap: 16px;
-  padding: 0;
+  padding: 0 24px 24px;
 }
@@ -410,4 +416,6 @@
 }
+
 .form__input:focus {
-  border-color: var(--input-border-focus);
+  outline: 1px solid transparent;
+  outline-color: var(--input-border-focus);
 }
@@ -538,3 +546,3 @@
 
-  ${getThemedCssVariables(themes.light)}
+  ${getThemedCssVariables(colorScheme === 'dark' ? themes.dark : themes.light)}
 }
@@ -549,9 +557,3 @@
   }
-}
-`
-    : `
-:host-context([data-sentry-feedback-colorscheme="dark"]) {
-  ${getThemedCssVariables(themes.dark)}
-}
-`
+}` : ''}
 }`;
@@ -669,3 +671,3 @@
 const SIZE = 20;
-const XMLNS$1 = 'http://www.w3.org/2000/svg';
+const XMLNS$2 = 'http://www.w3.org/2000/svg';
 
@@ -677,3 +679,3 @@ /**
   const createElementNS = (tagName) =>
-    WINDOW.document.createElementNS(XMLNS$1, tagName);
+    WINDOW.document.createElementNS(XMLNS$2, tagName);
   const svg = setAttributesNS(createElementNS('svg'), {
@@ -1021,3 +1023,53 @@ class: 'feedback-icon',
 
+const XMLNS$1 = 'http://www.w3.org/2000/svg';
+
 /**
+ * Sentry Logo
+ */
+function Logo({ colorScheme }) {
+  const createElementNS = (tagName) =>
+    WINDOW.document.createElementNS(XMLNS$1, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    class: 'sentry-logo',
+    width: '32',
+    height: '30',
+    viewBox: '0 0 72 66',
+    fill: 'none',
+  });
+
+  const path = setAttributesNS(createElementNS('path'), {
+    transform: 'translate(11, 11)',
+    d: 'M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z',
+  });
+  svg.append(path);
+
+  const defs = createElementNS('defs');
+  const style = createElementNS('style');
+
+  if (colorScheme === 'system') {
+    style.textContent = `
+    @media (prefers-color-scheme: dark) {
+      path: {
+        fill: '#fff';
+      }
+    }
+    `;
+  }
+
+  style.textContent = `
+    path {
+      fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
+    }`;
+
+  defs.append(style);
+  svg.append(defs);
+
+  return {
+    get el() {
+      return svg;
+    },
+  };
+}
+
+/**
  * Feedback dialog component that has the form
@@ -1027,4 +1079,6 @@ */
   formTitle,
+  showBranding,
   showName,
   showEmail,
+  colorScheme,
   isAnonymous,
@@ -1110,3 +1164,19 @@ defaultName,
       },
-      createElement('h2', { className: 'dialog__header' }, formTitle),
+      createElement(
+        'h2',
+        { className: 'dialog__header' },
+        formTitle,
+        showBranding &&
+          createElement(
+            'a',
+            {
+              className: 'brand-link',
+              target: '_blank',
+              href: 'https://sentry.io/welcome/',
+              title: 'Powered by Sentry',
+              rel: 'noopener noreferrer',
+            },
+            Logo({ colorScheme }).el,
+          ),
+      ),
       formEl,
@@ -1333,2 +1403,4 @@ ),
       dialog = Dialog({
+        colorScheme: options.colorScheme,
+        showBranding: options.showBranding,
         showName: options.showName,
@@ -1492,2 +1564,3 @@ showEmail: options.showEmail,
     id = 'sentry-feedback',
+    showBranding = true,
     autoInject = true,
@@ -1538,2 +1611,3 @@ showEmail = true,
       id,
+      showBranding,
       autoInject,
@@ -1540,0 +1614,0 @@ isAnonymous,

build/npm/types-ts3.8/constants.d.ts

@@ -8,41 +8,17 @@ export declare const DEFAULT_THEME: {
         foreground: string;
+        success: string;
+        error: string;
         border: string;
         boxShadow: string;
-        success: string;
-        error: string;
-        submitBackground: string;
-        submitBackgroundHover: string;
-        submitBorder: string;
-        submitForeground: string;
-        cancelBackground: string;
-        cancelBackgroundHover: string;
-        cancelBorder: string;
-        cancelForeground: string;
-        inputBackground: string;
-        inputForeground: string;
-        inputBorder: string;
-        inputBorderFocus: string;
     };
     dark: {
+        fontFamily: string;
+        fontSize: string;
         background: string;
         backgroundHover: string;
         foreground: string;
-        border: string;
         success: string;
         error: string;
-        fontFamily: string;
-        fontSize: string;
+        border: string;
         boxShadow: string;
-        submitBackground: string;
-        submitBackgroundHover: string;
-        submitBorder: string;
-        submitForeground: string;
-        cancelBackground: string;
-        cancelBackgroundHover: string;
-        cancelBorder: string;
-        cancelForeground: string;
-        inputBackground: string;
-        inputForeground: string;
-        inputBorder: string;
-        inputBorderFocus: string;
     };
@@ -49,0 +25,0 @@ };

build/npm/types-ts3.8/integration.d.ts

 import { Integration } from '@sentry/types';
-import { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
+import { CreateWidgetOptionOverrides, FeedbackConfigurationWithDefaults, FeedbackInternalOptions, Widget } from './types';
 import { createShadowHost } from './widget/createShadowHost';
+type FeedbackConfiguration = Partial<FeedbackConfigurationWithDefaults>;
 /**
@@ -42,3 +43,3 @@ * Feedback integration. When added as an integration to the SDK, it will
     private _hasInsertedActorStyles;
-    constructor({ id, autoInject, showEmail, showName, useSentryUser, isAnonymous, isEmailRequired, isNameRequired, themeDark, themeLight, colorScheme, buttonLabel, cancelButtonLabel, submitButtonLabel, formTitle, emailPlaceholder, emailLabel, messagePlaceholder, messageLabel, namePlaceholder, nameLabel, successMessageText, onActorClick, onDialogClose, onDialogOpen, onSubmitError, onSubmitSuccess, }?: OptionalFeedbackConfiguration);
+    constructor({ id, autoInject, showEmail, showName, useSentryUser, isAnonymous, isEmailRequired, isNameRequired, themeDark, themeLight, colorScheme, buttonLabel, cancelButtonLabel, submitButtonLabel, formTitle, emailPlaceholder, emailLabel, messagePlaceholder, messageLabel, namePlaceholder, nameLabel, successMessageText, onActorClick, onDialogClose, onDialogOpen, onSubmitError, onSubmitSuccess, }?: FeedbackConfiguration);
     /**
@@ -51,7 +52,7 @@ * Setup and initialize replay container
      */
-    attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null;
+    attachTo(el: Element | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null;
     /**
      * Creates a new widget. Accepts partial options to override any options passed to constructor.
      */
-    createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null;
+    createWidget(optionOverrides: CreateWidgetOptionOverrides): Widget | null;
     /**
@@ -78,2 +79,3 @@ * Removes a single widget
 }
+export {};
 //# sourceMappingURL=integration.d.ts.map

build/npm/types-ts3.8/types/index.d.ts

@@ -1,2 +0,2 @@
-import { Event, Primitive } from '@sentry/types';
+import { Primitive } from '@sentry/types';
 import { ActorComponent } from '../widget/Actor';
@@ -7,15 +7,2 @@ import { DialogComponent } from '../widget/Dialog';
 } | undefined;
-/**
- * NOTE: These types are still considered Beta and subject to change.
- * @hidden
- */
-export interface FeedbackEvent extends Event {
-    feedback: {
-        message: string;
-        url: string;
-        contact_email?: string;
-        name?: string;
-        replay_id?: string;
-    };
-}
 export interface SendFeedbackData {
@@ -177,14 +164,8 @@ feedback: {
 }
-/**
- * The integration's internal `options` member where every value should be set
- */
-export interface FeedbackInternalOptions extends FeedbackGeneralConfiguration, FeedbackThemeConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
+export interface FeedbackConfigurationWithDefaults extends FeedbackGeneralConfiguration, FeedbackThemeConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
 }
 /**
- * Partial configuration that overrides default configuration values
+ * The integration's internal `options` member
  */
-export interface OptionalFeedbackConfiguration extends Pick<Partial<FeedbackInternalOptions>, Exclude<keyof Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'>> {
-    themeLight?: Partial<FeedbackTheme>;
-    themeDark?: Partial<FeedbackTheme>;
-}
+export type FeedbackInternalOptions = FeedbackConfigurationWithDefaults;
 export interface FeedbackTheme {
@@ -227,51 +208,4 @@ /**
     error: string;
-    /**
-     * Background color for the submit button
-     */
-    submitBackground: string;
-    /**
-     * Background color when hovering over the submit button
-     */
-    submitBackgroundHover: string;
-    /**
-     * Border style for the submit button
-     */
-    submitBorder: string;
-    /**
-     * Foreground color for the submit button
-     */
-    submitForeground: string;
-    /**
-     * Background color for the cancel button
-     */
-    cancelBackground: string;
-    /**
-     * Background color when hovering over the cancel button
-     */
-    cancelBackgroundHover: string;
-    /**
-     * Border style for the cancel button
-     */
-    cancelBorder: string;
-    /**
-     * Foreground color for the cancel button
-     */
-    cancelForeground: string;
-    /**
-     * Background color for form inputs
-     */
-    inputBackground: string;
-    /**
-     * Foreground color for form inputs
-     */
-    inputForeground: string;
-    /**
-     * Border styles for form inputs
-     */
-    inputBorder: string;
-    /**
-     * Border styles for form inputs when focused
-     */
-    inputBorderFocus: string;
 }
+export type CreateWidgetOptionOverrides = Partial<FeedbackConfigurationWithDefaults>;
 export interface FeedbackThemes {
@@ -278,0 +212,0 @@ dark: FeedbackTheme;

build/npm/types-ts3.8/util/handleFeedbackSubmit.d.ts

@@ -0,1 +1,2 @@
+import { TransportMakeRequestResponse } from '@sentry/types';
 import { FeedbackFormData, SendFeedbackOptions } from '../types';
@@ -6,3 +7,3 @@ import { DialogComponent } from '../widget/Dialog';
  */
-export declare function handleFeedbackSubmit(dialog: DialogComponent | null, feedback: FeedbackFormData, options?: SendFeedbackOptions): Promise<Response | false>;
+export declare function handleFeedbackSubmit(dialog: DialogComponent | null, feedback: FeedbackFormData, options?: SendFeedbackOptions): Promise<TransportMakeRequestResponse | void>;
 //# sourceMappingURL=handleFeedbackSubmit.d.ts.map

build/npm/types-ts3.8/util/prepareFeedbackEvent.d.ts

 import { Scope } from '@sentry/core';
-import { Client } from '@sentry/types';
-import { FeedbackEvent } from '../types';
+import { Client, FeedbackEvent } from '@sentry/types';
 interface PrepareFeedbackEventParams {
@@ -5,0 +4,0 @@ client: Client;

build/npm/types-ts3.8/util/sendFeedbackRequest.d.ts

@@ -0,6 +1,7 @@
+import { TransportMakeRequestResponse } from '@sentry/types';
 import { SendFeedbackData } from '../types';
 /**
- * Send feedback using `fetch()`
+ * Send feedback using transport
  */
-export declare function sendFeedbackRequest({ feedback: { message, email, name, replay_id, url }, }: SendFeedbackData): Promise<Response | null>;
+export declare function sendFeedbackRequest({ feedback: { message, email, name, replay_id, url }, }: SendFeedbackData): Promise<void | TransportMakeRequestResponse>;
 //# sourceMappingURL=sendFeedbackRequest.d.ts.map

build/npm/types-ts3.8/widget/Actor.d.ts

@@ -1,3 +0,3 @@
-import { FeedbackComponent, FeedbackInternalOptions } from '../types';
-export interface ActorProps extends Pick<FeedbackInternalOptions, 'buttonLabel'> {
+import { FeedbackComponent, FeedbackConfigurationWithDefaults } from '../types';
+export interface ActorProps extends Pick<FeedbackConfigurationWithDefaults, 'buttonLabel'> {
     onClick?: (e: MouseEvent) => void;
@@ -4,0 +4,0 @@ }

build/npm/types/integration.d.ts

@@ -42,3 +42,3 @@ import type { Integration } from '@sentry/types';
     private _hasInsertedActorStyles;
-    constructor({ id, autoInject, showEmail, showName, useSentryUser, isAnonymous, isEmailRequired, isNameRequired, themeDark, themeLight, colorScheme, buttonLabel, cancelButtonLabel, submitButtonLabel, formTitle, emailPlaceholder, emailLabel, messagePlaceholder, messageLabel, namePlaceholder, nameLabel, successMessageText, onActorClick, onDialogClose, onDialogOpen, onSubmitError, onSubmitSuccess, }?: OptionalFeedbackConfiguration);
+    constructor({ id, showBranding, autoInject, showEmail, showName, useSentryUser, isAnonymous, isEmailRequired, isNameRequired, themeDark, themeLight, colorScheme, buttonLabel, cancelButtonLabel, submitButtonLabel, formTitle, emailPlaceholder, emailLabel, messagePlaceholder, messageLabel, namePlaceholder, nameLabel, successMessageText, onActorClick, onDialogClose, onDialogOpen, onSubmitError, onSubmitSuccess, }?: OptionalFeedbackConfiguration);
     /**
@@ -45,0 +45,0 @@ * Setup and initialize replay container

build/npm/types/types/index.d.ts

@@ -52,2 +52,6 @@ import type { Event, Primitive } from '@sentry/types';
     /**
+     * Show the Sentry branding
+     */
+    showBranding: boolean;
+    /**
      * Auto-inject default Feedback actor button to the DOM when integration is
@@ -54,0 +58,0 @@ * added.

build/npm/types/widget/Dialog.d.ts

@@ -1,5 +0,4 @@
-import type { FeedbackComponent } from '../types';
+import type { FeedbackComponent, FeedbackInternalOptions } from '../types';
 import type { FormComponentProps } from './Form';
-export interface DialogProps extends FormComponentProps {
-    formTitle: string;
+export interface DialogProps extends FormComponentProps, Pick<FeedbackInternalOptions, 'formTitle' | 'showBranding' | 'colorScheme'> {
     onClosed?: () => void;
@@ -32,3 +31,3 @@ }
  */
-export declare function Dialog({ formTitle, showName, showEmail, isAnonymous, defaultName, defaultEmail, onClosed, onCancel, onSubmit, ...textLabels }: DialogProps): DialogComponent;
+export declare function Dialog({ formTitle, showBranding, showName, showEmail, colorScheme, isAnonymous, defaultName, defaultEmail, onClosed, onCancel, onSubmit, ...textLabels }: DialogProps): DialogComponent;
 //# sourceMappingURL=Dialog.d.ts.map

package.json

 {
   "name": "@sentry-internal/feedback",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.8",
   "description": "Sentry SDK integration for user feedback",
@@ -5,0 +5,0 @@ "repository": "git://github.com/getsentry/sentry-javascript.git",

README.md

@@ -58,2 +58,3 @@ <p align="center">
 | `autoInject`       | `boolean` | `true`  | Injects the Feedback widget into the application when the integration is added. This is useful to turn off if you bring your own button, or only want to show the widget on certain views. |
+| `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the dialog |
 | `colorScheme` | `"system" \| "light" \| "dark"` | `"system"` | The color theme to use. `"system"` will follow your OS colorscheme. |
@@ -60,0 +61,0 @@

src/integration.ts

@@ -75,2 +75,3 @@ import { WINDOW } from '@sentry/browser';
     id = 'sentry-feedback',
+    showBranding = true,
     autoInject = true,
@@ -121,2 +122,3 @@ showEmail = true,
       id,
+      showBranding,
       autoInject,
@@ -123,0 +125,0 @@ isAnonymous,

src/types/index.ts

@@ -60,2 +60,7 @@ import type { Event, Primitive } from '@sentry/types';
   /**
+   * Show the Sentry branding
+   */
+  showBranding: boolean;
+
+  /**
    * Auto-inject default Feedback actor button to the DOM when integration is
@@ -62,0 +67,0 @@ * added.

src/widget/createWidget.ts

@@ -137,2 +137,4 @@ import { getCurrentHub } from '@sentry/core';
       dialog = Dialog({
+        colorScheme: options.colorScheme,
+        showBranding: options.showBranding,
         showName: options.showName,
@@ -139,0 +141,0 @@ showEmail: options.showEmail,

src/widget/Dialog.css.ts

@@ -41,3 +41,2 @@ /**
   border: var(--border);
-  padding: 24px;
   border-radius: 20px;
@@ -60,5 +59,8 @@ background-color: var(--background);
 .dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font-size: 20px;
   font-weight: 600;
-  padding: 0;
+  padding: 24px 24px 0 24px;
   margin: 0;
@@ -68,2 +70,6 @@ margin-bottom: 16px;
 
+.brand-link {
+  display: inline-flex;
+}
+
 .error {
@@ -79,3 +85,3 @@ color: var(--error);
   gap: 16px;
-  padding: 0;
+  padding: 0 24px 24px;
 }
@@ -122,4 +128,6 @@
 }
+
 .form__input:focus {
-  border-color: var(--input-border-focus);
+  outline: 1px solid transparent;
+  outline-color: var(--input-border-focus);
 }
@@ -126,0 +134,0 @@

src/widget/Dialog.ts

@@ -1,8 +0,10 @@
-import type { FeedbackComponent } from '../types';
+import type { FeedbackComponent, FeedbackInternalOptions } from '../types';
 import type { FormComponentProps } from './Form';
 import { Form } from './Form';
+import { Logo } from './Logo';
 import { createElement } from './util/createElement';
 
-export interface DialogProps extends FormComponentProps {
-  formTitle: string;
+export interface DialogProps
+  extends FormComponentProps,
+    Pick<FeedbackInternalOptions, 'formTitle' | 'showBranding' | 'colorScheme'> {
   onClosed?: () => void;
@@ -43,4 +45,6 @@ }
   formTitle,
+  showBranding,
   showName,
   showEmail,
+  colorScheme,
   isAnonymous,
@@ -126,3 +130,19 @@ defaultName,
       },
-      createElement('h2', { className: 'dialog__header' }, formTitle),
+      createElement(
+        'h2',
+        { className: 'dialog__header' },
+        formTitle,
+        showBranding &&
+          createElement(
+            'a',
+            {
+              className: 'brand-link',
+              target: '_blank',
+              href: 'https://sentry.io/welcome/',
+              title: 'Powered by Sentry',
+              rel: 'noopener noreferrer',
+            },
+            Logo({ colorScheme }).el,
+          ),
+      ),
       formEl,
@@ -129,0 +149,0 @@ ),

src/widget/Main.css.ts

@@ -59,3 +59,3 @@ import type { FeedbackTheme, FeedbackThemes } from '../types';
 
-  ${getThemedCssVariables(themes.light)}
+  ${getThemedCssVariables(colorScheme === 'dark' ? themes.dark : themes.light)}
 }
@@ -70,9 +70,3 @@
   }
-}
-`
-    : `
-:host-context([data-sentry-feedback-colorscheme="dark"]) {
-  ${getThemedCssVariables(themes.dark)}
-}
-`
+}` : ''}
 }`;
@@ -79,0 +73,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

967557

increased by1.58%

Number of package files

178

increased by2.89%

Lines of code

7813

increased by2.13%

Number of lines in readme file

235

increased by0.43%

No dependency changes