From a476d4fe3614cac4064e05cd2cfc4139a1916bb2 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 9 May 2024 09:30:20 -0400 Subject: [PATCH 1/5] fix(feedback): Improve CSS theme variable names and layout --- packages/feedback/src/constants/theme.ts | 68 +++++---- .../feedback/src/core/components/Actor.css.ts | 14 +- .../feedback/src/core/createMainStyles.ts | 42 +++--- .../src/modal/components/Dialog.css.ts | 128 +++++++++------- .../feedback/src/modal/components/Dialog.tsx | 30 ++-- .../src/modal/components/SentryLogo.ts | 2 +- .../src/modal/components/SuccessIcon.ts | 2 +- packages/types/src/feedback/theme.ts | 140 +++++++++--------- 8 files changed, 225 insertions(+), 201 deletions(-) diff --git a/packages/feedback/src/constants/theme.ts b/packages/feedback/src/constants/theme.ts index 26398b74d1b2..52a57efebd6a 100644 --- a/packages/feedback/src/constants/theme.ts +++ b/packages/feedback/src/constants/theme.ts @@ -1,44 +1,47 @@ -const LIGHT_BACKGROUND = '#ffffff'; const INHERIT = 'inherit'; -const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)'; +const PURPLE = 'rgba(88, 74, 192, 1)'; +const PURPLE_HOVER = 'rgba(108, 95, 199, 1)'; export const LIGHT_THEME = { - fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif", - fontSize: '14px', - foreground: '#2b2233', - background: LIGHT_BACKGROUND, - success: '#268d75', - error: '#df3338', - - zIndex: 100000, + successForeground: '#268d75', + errorForeground: '#df3338', + background: '#ffffff', border: '1.5px solid rgba(41, 35, 47, 0.13)', boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)', backgroundHover: '#f6f6f7', borderRadius: '25px', - formBorderRadius: '20px', - formContentBorderRadius: '6px', - - submitForeground: LIGHT_BACKGROUND, - submitBackground: 'rgba(88, 74, 192, 1)', - submitForegroundHover: LIGHT_BACKGROUND, - submitBackgroundHover: SUBMIT_COLOR, - submitBorder: SUBMIT_COLOR, + inputForeground: INHERIT, + inputBackground: INHERIT, + inputBackgroundHover: INHERIT, + inputBackgroundFocus: INHERIT, + inputBorder: 'var(--border)', + inputBorderRadius: '6px', + inputOutlineFocus: PURPLE_HOVER, + + buttonForeground: INHERIT, + buttonForegroundHover: INHERIT, + buttonBackground: 'var(--background)', + buttonBackgroundHover: '#f6f6f7', + buttonBorder: 'var(--border)', + buttonOutlineFocus: 'var(--input-outline-focus)', + + submitForeground: '#ffffff', + submitForegroundHover: '#ffffff', + submitBackground: PURPLE, + submitBackgroundHover: PURPLE_HOVER, + submitBorder: PURPLE_HOVER, + submitBorderRadius: 'var(--button-border-radius)', submitOutlineFocus: '#29232f', - cancelForeground: 'var(--foreground)', - cancelBackground: 'transparent', - cancelForegroundHover: 'var(--foreground)', - cancelBackgroundHover: 'var(--background-hover)', - cancelBorder: 'var(--border)', - cancelOutlineFocus: 'var(--input-outline-focus)', + triggerBackground: 'var(--background)', + triggerBackgroundHover: 'var(--button-background-hover)', + triggerBorderRadius: '1.7em/50%', - inputBackground: INHERIT, - inputForeground: INHERIT, - inputBorder: 'var(--border)', - inputOutlineFocus: SUBMIT_COLOR, + dialogBackground: 'var(--background)', + dialogBorderRadius: '20px', }; export const DEFAULT_THEME = { @@ -46,12 +49,13 @@ export const DEFAULT_THEME = { dark: { ...LIGHT_THEME, - background: '#29232f', - backgroundHover: '#352f3b', foreground: '#ebe6ef', + successForeground: '#2da98c', + errorForeground: '#f55459', + background: '#29232f', border: '1.5px solid rgba(235, 230, 239, 0.15)', + boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)', - success: '#2da98c', - error: '#f55459', + buttonBackgroundHover: '#352f3b', }, }; diff --git a/packages/feedback/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts index ea80921b3744..fdd8c4175cb2 100644 --- a/packages/feedback/src/core/components/Actor.css.ts +++ b/packages/feedback/src/core/components/Actor.css.ts @@ -9,7 +9,7 @@ export function createActorStyles(): HTMLStyleElement { .widget__actor { position: fixed; z-index: var(--z-index); - margin: 0; + margin: var(--page-margin); inset: var(--actor-inset); display: flex; @@ -20,11 +20,11 @@ export function createActorStyles(): HTMLStyleElement { font-family: inherit; font-size: var(--font-size); font-weight: 600; - line-height: 16px; + line-height: 1.14em; text-decoration: none; - background-color: var(--background); - border-radius: var(--border-radius); + background-color: var(--trigger-background); + border-radius: var(--trigger-border-radius); border: var(--border); box-shadow: var(--box-shadow); color: var(--foreground); @@ -41,12 +41,12 @@ export function createActorStyles(): HTMLStyleElement { } .widget__actor:hover { - background-color: var(--background-hover); + background-color: var(--trigger-background-hover); } .widget__actor svg { - width: 16px; - height: 16px; + width: 1.14em; + height: 1.14em; } @media (max-width: 600px) { diff --git a/packages/feedback/src/core/createMainStyles.ts b/packages/feedback/src/core/createMainStyles.ts index bdcc52362a21..b60bba37b6e3 100644 --- a/packages/feedback/src/core/createMainStyles.ts +++ b/packages/feedback/src/core/createMainStyles.ts @@ -3,14 +3,23 @@ import { DOCUMENT } from '../constants'; function getThemedCssVariables(theme: FeedbackInternalOptions['themeLight']): string { return ` - --background: ${theme.background}; - --background-hover: ${theme.backgroundHover}; --foreground: ${theme.foreground}; - --error: ${theme.error}; - --success: ${theme.success}; + --success-foreground: ${theme.successForeground}; + --error-foreground: ${theme.errorForeground}; + --background: ${theme.background}; --border: ${theme.border}; - --border-radius: ${theme.borderRadius}; --box-shadow: ${theme.boxShadow}; + + --button-foreground: ${theme.buttonForeground}; + --button-foreground-hover: ${theme.buttonForegroundHover}; + --button-background: ${theme.buttonBackground}; + --button-background-hover: ${theme.buttonBackgroundHover}; + --button-border: ${theme.buttonBorder}; + --button-outline-focus: ${theme.buttonOutlineFocus}; + + --trigger-background: ${theme.triggerBackground}; + --trigger-background-hover: ${theme.triggerBackgroundHover}; + --trigger-border-radius: ${theme.triggerBorderRadius}; `; } @@ -21,25 +30,16 @@ export function createMainStyles({ colorScheme, themeDark, themeLight }: Feedbac const style = DOCUMENT.createElement('style'); style.textContent = ` :host { - --z-index: ${themeLight.zIndex}; - --font-family: ${themeLight.fontFamily}; - --font-size: ${themeLight.fontSize}; - - font-family: var(--font-family); - font-size: var(--font-size); + --font-family: system-ui, 'Helvetica Neue', Arial, sans-serif; + --font-size: 14px; + --z-index: 100000; --page-margin: 16px; - --actor-inset: auto var(--page-margin) var(--page-margin) auto; + --inset: auto 0 0 auto; + --actor-inset: var(--inset); - .brand-link path { - fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'}; - } - @media (prefers-color-scheme: dark) - { - path: { - fill: '#fff'; - } - } + font-family: var(--font-family); + font-size: var(--font-size); ${getThemedCssVariables(colorScheme === 'dark' ? themeDark : themeLight)} } diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts index 0e50933a5bce..427e32d891b0 100644 --- a/packages/feedback/src/modal/components/Dialog.css.ts +++ b/packages/feedback/src/modal/components/Dialog.css.ts @@ -6,6 +6,7 @@ const DIALOG = ` position: fixed; z-index: var(--z-index); margin: 0; + inset: 0; display: flex; align-items: center; @@ -23,6 +24,26 @@ const DIALOG = ` transition: opacity 0.2s ease-in-out; } +.dialog__position { + position: fixed; + z-index: var(--z-index); + inset: var(--dialog-inset); + padding: var(--page-margin); + display: flex; + max-height: calc(100vh - (2 * var(--page-margin))); +} +@media (max-width: 600px) { + .dialog__position { + inset: var(--page-margin); + padding: 0; + } +} + +.dialog__position:has(.editor) { + inset: var(--page-margin); + padding: 0; +} + .dialog:not([open]) { opacity: 0; pointer-events: none; @@ -33,34 +54,24 @@ const DIALOG = ` } .dialog__content { - position: fixed; - inset: var(--dialog-inset); - display: flex; flex-direction: column; gap: 16px; padding: var(--dialog-padding); max-width: 100%; - max-height: calc(100% - (2 * var(--page-margin)) - (2 * var(--dialog-padding))); + width: 100%; + max-height: 100%; overflow: auto; - background-color: var(--background); - border-radius: var(--form-border-radius); + background-color: var(--dialog-background); + border-radius: var(--dialog-border-radius); border: var(--border); box-shadow: var(--box-shadow); color: var(--foreground); + fill: var(--foreground); transform: translate(0, 0) scale(1); transition: transform 0.2s ease-in-out; } - -.dialog__content:has(.editor) { - inset: var(--page-margin); -} -@media (max-width: 600px) { - .dialog__content { - inset: var(--page-margin); - } -} `; const DIALOG_HEADER = ` @@ -75,6 +86,9 @@ const DIALOG_HEADER = ` .brand-link { display: inline-flex; } +.brand-link:focus-visible { + outline: 1px auto var(--input-outline-focus); +} `; const FORM = ` @@ -109,7 +123,8 @@ const FORM = ` } .form__error-container { - color: var(--error); + color: var(--error-foreground); + fill: var(--error-foreground); } .form__label { @@ -135,8 +150,9 @@ const FORM = ` background-color: var(--input-background); box-sizing: border-box; border: var(--input-border); - border-radius: var(--form-content-border-radius); + border-radius: var(--input-border-radius); color: var(--input-foreground); + fill: var(--input-foreground); font-size: var(--font-size); font-weight: 500; padding: 6px 12px; @@ -157,7 +173,8 @@ const FORM = ` } .error { - color: var(--error); + color: var(--error-foreground); + fill: var(--error-foreground); } `; @@ -183,47 +200,55 @@ const BUTTON = ` } .btn--primary { - background-color: var(--submit-background); - border-color: var(--submit-border); color: var(--submit-foreground); + fill: var(--submit-foreground); + background-color: var(--submit-background); + border: var(--submit-border); + border-radius: var(--input-border-radius); + font-weight: 500; } .btn--primary:hover { - background-color: var(--submit-background-hover); color: var(--submit-foreground-hover); + fill: var(--submit-foreground-hover); + background-color: var(--submit-background-hover); } .btn--primary:focus-visible { outline: 1px auto var(--submit-outline-focus); } .btn--default { - background-color: var(--cancel-background); - color: var(--cancel-foreground); + color: var(--button-foreground); + fill: var(--button-foreground); + background-color: var(--button-background); + border: var(--button-border); + border-radius: var(--input-border-radius); font-weight: 500; } .btn--default:hover { - background-color: var(--cancel-background-hover); - color: var(--cancel-foreground-hover); + color: var(--button-foreground-hover); + fill: var(--button-foreground-hover); + background-color: var(--button-background-hover); } .btn--default:focus-visible { - outline: 1px auto var(--cancel-outline-focus); + outline: 1px auto var(--button-outline-focus); } `; const SUCCESS = ` -.success-message { +.success__position { position: fixed; - left: var(--left); - right: var(--right); - bottom: var(--bottom); - top: var(--top); + inset: var(--dialog-inset); + padding: var(--page-margin); z-index: var(--z-index); - - background-color: var(--background); +} +.success__content { + background-color: var(--trigger-background); border: var(--border); - border-radius: var(--border-radius); + border-radius: var(--trigger-border-radius); box-shadow: var(--box-shadow); font-weight: 600; - color: var(--success); + color: var(--success-foreground); + fill: var(--success-foreground); padding: 12px 24px; line-height: 25px; display: grid; @@ -233,34 +258,30 @@ const SUCCESS = ` cursor: default; } -.success-icon { +.success__icon { display: flex; } `; function getThemedCssVariables(theme: FeedbackInternalOptions['themeLight']): string { return ` - --submit-background: ${theme.submitBackground}; - --submit-background-hover: ${theme.submitBackgroundHover}; - --submit-border: ${theme.submitBorder}; - --submit-outline-focus: ${theme.submitOutlineFocus}; - --submit-foreground: ${theme.submitForeground}; - --submit-foreground-hover: ${theme.submitForegroundHover}; - - --cancel-background: ${theme.cancelBackground}; - --cancel-background-hover: ${theme.cancelBackgroundHover}; - --cancel-border: ${theme.cancelBorder}; - --cancel-outline-focus: ${theme.cancelOutlineFocus}; - --cancel-foreground: ${theme.cancelForeground}; - --cancel-foreground-hover: ${theme.cancelForegroundHover}; - + --input-border-radius: ${theme.inputBorderRadius}; --input-background: ${theme.inputBackground}; + --input-background-hover: ${theme.inputBackgroundHover}; + --input-background-focus: ${theme.inputBackgroundFocus}; --input-foreground: ${theme.inputForeground}; --input-border: ${theme.inputBorder}; --input-outline-focus: ${theme.inputOutlineFocus}; - --form-border-radius: ${theme.formBorderRadius}; - --form-content-border-radius: ${theme.formContentBorderRadius}; + --submit-foreground: ${theme.submitForeground}; + --submit-foreground-hover: ${theme.submitForegroundHover}; + --submit-background: ${theme.submitBackground}; + --submit-background-hover: ${theme.submitBackgroundHover}; + --submit-border: ${theme.submitBorder}; + --submit-outline-focus: ${theme.submitOutlineFocus}; + + --dialog-background: ${theme.dialogBackground}; + --dialog-border-radius: ${theme.dialogBorderRadius}; `; } @@ -272,7 +293,7 @@ export function createDialogStyles({ colorScheme, themeDark, themeLight }: Feedb style.textContent = ` :host { - --dialog-inset: auto var(--page-margin) var(--page-margin) auto; + --dialog-inset: var(--inset); --dialog-padding: 24px; ${getThemedCssVariables(colorScheme === 'dark' ? themeDark : themeLight)} @@ -288,7 +309,6 @@ ${ }` : '' } -} ${DIALOG} ${DIALOG_HEADER} diff --git a/packages/feedback/src/modal/components/Dialog.tsx b/packages/feedback/src/modal/components/Dialog.tsx index 17a59a18444b..d691d0bd18c8 100644 --- a/packages/feedback/src/modal/components/Dialog.tsx +++ b/packages/feedback/src/modal/components/Dialog.tsx @@ -46,21 +46,25 @@ export function Dialog({ open, onFormSubmitted, ...props }: Props): VNode { return ( {timeoutId ? ( -
- {options.successMessageText} - +
+
+ {options.successMessageText} + +
) : ( - -
{ - // Stop event propagation so clicks on content modal do not propagate to dialog (which will close dialog) - e.stopPropagation(); - }} - > - -
+ +
+
{ + // Stop event propagation so clicks on content modal do not propagate to dialog (which will close dialog) + e.stopPropagation(); + }} + > + + +
)} diff --git a/packages/feedback/src/modal/components/SentryLogo.ts b/packages/feedback/src/modal/components/SentryLogo.ts index eabdcdf8d9b1..8a3c338d341e 100644 --- a/packages/feedback/src/modal/components/SentryLogo.ts +++ b/packages/feedback/src/modal/components/SentryLogo.ts @@ -13,7 +13,7 @@ export function SentryLogo(): SVGElement { width: '32', height: '30', viewBox: '0 0 72 66', - fill: 'none', + fill: 'inherit', }); const path = setAttributesNS(createElementNS('path'), { diff --git a/packages/feedback/src/modal/components/SuccessIcon.ts b/packages/feedback/src/modal/components/SuccessIcon.ts index 279938bced49..fe76c6d0ecfa 100644 --- a/packages/feedback/src/modal/components/SuccessIcon.ts +++ b/packages/feedback/src/modal/components/SuccessIcon.ts @@ -15,7 +15,7 @@ export function SuccessIcon(): SVGElement { width: `${WIDTH}`, height: `${HEIGHT}`, viewBox: `0 0 ${WIDTH} ${HEIGHT}`, - fill: 'var(--success)', + fill: 'inherit', }); const g = setAttributesNS(createElementNS('g'), { diff --git a/packages/types/src/feedback/theme.ts b/packages/types/src/feedback/theme.ts index c9e0b91908f0..68bd3b25f0d7 100644 --- a/packages/types/src/feedback/theme.ts +++ b/packages/types/src/feedback/theme.ts @@ -1,18 +1,18 @@ interface BaseStyles { /** - * Font family for widget + * Foreground color (i.e. text color) */ - fontFamily: string; + foreground: string; /** - * Font size for widget + * Success color */ - fontSize: string; + successForeground: string; /** - * Foreground color (i.e. text color) + * Error color */ - foreground: string; + errorForeground: string; /** * Background color for actor and dialog @@ -20,148 +20,144 @@ interface BaseStyles { background: string; /** - * Success color + * Border styling for actor and dialog */ - success: string; + border: string; /** - * Error color + * Box shadow for actor and dialog */ - error: string; + boxShadow: string; } -interface ActorAndModal { +interface Input { /** - * z-index of the floating Actor or Modal + * Foreground color for form inputs */ - zIndex: number; + inputForeground: string; /** - * Border styling for actor and dialog + * Background color for form inputs */ - border: string; + inputBackground: string; /** - * Box shadow for actor and dialog + * Background color for form inputs, in the hover state */ - boxShadow: string; -} + inputBackgroundHover: string; -interface ActorButton { /** - * Background color on hover + * Background color for form inputs, in the focus state */ - backgroundHover: string; + inputBackgroundFocus: string; /** - * Border radius styling for actor + * Border styles for form inputs */ - borderRadius: string; -} + inputBorder: string; -interface Modal { /** - * Border radius for dialog + * Border radius for form inputs */ - formBorderRadius: string; + inputBorderRadius: string; /** - * Border radius for form inputs + * Border styles for form inputs when focused */ - formContentBorderRadius: string; + inputOutlineFocus: string; } -interface SubmitButton { +interface Button { /** - * Foreground color for the submit button + * Foreground color for buttons */ - submitForeground: string; + buttonForeground: string; /** - * Background color for the submit button + * Foreground color for buttons, in the hover state */ - submitBackground: string; + buttonForegroundHover: string; /** - * Foreground color for the submit button, in the hover state + * Background color for buttons */ - submitForegroundHover: string; + buttonBackground: string; /** - * Background color when hovering over the submit button + * Background color when hovering over buttons */ - submitBackgroundHover: string; + buttonBackgroundHover: string; /** - * Border style for the submit button + * Border style for buttons */ - submitBorder: string; + buttonBorder: string; /** - * Border style for the submit button, in the focued state + * Border style for buttons, in the focued state */ - submitOutlineFocus: string; + buttonOutlineFocus: string; } -interface CancelButton { +interface SubmitButton { /** - * Foreground color for the cancel button + * Foreground color for submit buttons */ - cancelForeground: string; + submitForeground: string; /** - * Background color for the cancel button + * Foreground color for submit buttons, in the hover state */ - cancelBackground: string; + submitForegroundHover: string; /** - * Foreground color for the cancel button, in the hover state + * Background color for submit buttons */ - cancelForegroundHover: string; + submitBackground: string; /** - * Background color when hovering over the cancel button + * Background color when hovering over submit buttons */ - cancelBackgroundHover: string; + submitBackgroundHover: string; /** - * Border style for the cancel button + * Border style for submit buttons */ - cancelBorder: string; + submitBorder: string; /** - * Border style for the cancel button, in the focued state + * Border style for submit buttons, in the focued state */ - cancelOutlineFocus: string; + submitOutlineFocus: string; } -interface Input { +interface Trigger { /** - * Background color for form inputs + * Background color of the actor button */ - inputBackground: string; + triggerBackground: string; /** - * Foreground color for form inputs + * Background color on hover */ - inputForeground: string; + triggerBackgroundHover: string; /** - * Border styles for form inputs + * Border radius styling for actor */ - inputBorder: string; + triggerBorderRadius: string; +} +interface Dialog { /** - * Border styles for form inputs when focused + * Background color of the open dialog */ - inputOutlineFocus: string; + dialogBackground: string; + + /** + * Border radius for dialog + */ + dialogBorderRadius: string; } -export interface FeedbackTheme - extends BaseStyles, - ActorAndModal, - ActorButton, - Modal, - SubmitButton, - CancelButton, - Input {} +export interface FeedbackTheme extends BaseStyles, Input, Button, SubmitButton, Trigger, Dialog {} From 43b66f2ffe53e3b90f58cb378f177818056a8157 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 9 May 2024 09:38:24 -0400 Subject: [PATCH 2/5] fix border in dark mode --- packages/feedback/src/constants/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/feedback/src/constants/theme.ts b/packages/feedback/src/constants/theme.ts index 52a57efebd6a..2f3911ad9a42 100644 --- a/packages/feedback/src/constants/theme.ts +++ b/packages/feedback/src/constants/theme.ts @@ -53,7 +53,7 @@ export const DEFAULT_THEME = { successForeground: '#2da98c', errorForeground: '#f55459', background: '#29232f', - border: '1.5px solid rgba(235, 230, 239, 0.15)', + border: '1.5px solid rgba(235, 230, 239, 0.5)', boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)', buttonBackgroundHover: '#352f3b', From ff2f6f5d546b1ddef06910afb570199d395e7206 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 9 May 2024 09:58:18 -0400 Subject: [PATCH 3/5] be consistent about setting color and fill for icons --- packages/feedback/src/core/components/Actor.css.ts | 1 + packages/feedback/src/modal/components/Dialog.css.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/feedback/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts index fdd8c4175cb2..3daa58d09a99 100644 --- a/packages/feedback/src/core/components/Actor.css.ts +++ b/packages/feedback/src/core/components/Actor.css.ts @@ -28,6 +28,7 @@ export function createActorStyles(): HTMLStyleElement { border: var(--border); box-shadow: var(--box-shadow); color: var(--foreground); + fill: var(--foreground); cursor: pointer; opacity: 1; transition: transform 0.2s ease-in-out; diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts index 427e32d891b0..8e280e6df4da 100644 --- a/packages/feedback/src/modal/components/Dialog.css.ts +++ b/packages/feedback/src/modal/components/Dialog.css.ts @@ -15,6 +15,8 @@ const DIALOG = ` height: 100vh; width: 100vw; + color: var(--foreground); + fill: var(--foreground); line-height: 1.75em; background-color: rgba(0, 0, 0, 0.05); @@ -67,8 +69,6 @@ const DIALOG = ` border-radius: var(--dialog-border-radius); border: var(--border); box-shadow: var(--box-shadow); - color: var(--foreground); - fill: var(--foreground); transform: translate(0, 0) scale(1); transition: transform 0.2s ease-in-out; } From d8cf4aa4fbdafd3e48407c116a0ca025a6ba5160 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 9 May 2024 07:47:46 -0700 Subject: [PATCH 4/5] Apply suggestions from code review --- packages/feedback/src/constants/theme.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/feedback/src/constants/theme.ts b/packages/feedback/src/constants/theme.ts index 2f3911ad9a42..ba8193afd9d0 100644 --- a/packages/feedback/src/constants/theme.ts +++ b/packages/feedback/src/constants/theme.ts @@ -10,9 +10,6 @@ export const LIGHT_THEME = { border: '1.5px solid rgba(41, 35, 47, 0.13)', boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)', - backgroundHover: '#f6f6f7', - borderRadius: '25px', - inputForeground: INHERIT, inputBackground: INHERIT, inputBackgroundHover: INHERIT, From 4fdfdf866a7031f8959748a0cf4bfa1576f6b663 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 9 May 2024 13:23:18 -0400 Subject: [PATCH 5/5] fix some types --- packages/feedback/src/modal/integration.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/feedback/src/modal/integration.tsx b/packages/feedback/src/modal/integration.tsx index cf50b66274bb..a92b9cad356c 100644 --- a/packages/feedback/src/modal/integration.tsx +++ b/packages/feedback/src/modal/integration.tsx @@ -1,5 +1,11 @@ import { getCurrentScope, getGlobalScope, getIsolationScope } from '@sentry/core'; -import type { CreateDialogProps, FeedbackFormData, FeedbackModalIntegration, IntegrationFn } from '@sentry/types'; +import type { + CreateDialogProps, + FeedbackDialog, + FeedbackFormData, + FeedbackModalIntegration, + IntegrationFn, +} from '@sentry/types'; import { h, render } from 'preact'; import { DOCUMENT } from '../constants'; import { Dialog } from './components/Dialog'; @@ -19,7 +25,7 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => { const style = createDialogStyles(options); let originalOverflow = ''; - const dialog = { + const dialog: FeedbackDialog = { get el() { return el; },