From eb40923e8cfe18fd6040b16bdd8fffe50de436ea Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jan 2024 14:27:57 -0500 Subject: [PATCH 1/5] border radius configurations --- .../javascript/common/user-feedback/configuration/index.mdx | 3 +++ .../node/common/user-feedback/configuration/index.mdx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/platforms/javascript/common/user-feedback/configuration/index.mdx b/src/platforms/javascript/common/user-feedback/configuration/index.mdx index 601f9ef86306b..9f87bbccdcf9d 100644 --- a/src/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/src/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -88,6 +88,7 @@ Colors can be customized via the Feedback class constructor or by defining CSS v | `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) | | `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) | | `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget (injected button and form) | +| `borderRadius` | `--border-radius` | `12px` | `12px` | Border radius style used for the widget (injected button and success message) | | `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget (injected button and form) | | `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button | | `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button | @@ -104,7 +105,9 @@ Colors can be customized via the Feedback class constructor or by defining CSS v | `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | | `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | | `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | +| `inputBorderRadius` | `--input-border-radius` | `6px` | `6px` | Border radius style for form inputs and buttons | | `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | +| `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form | Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration: diff --git a/src/platforms/node/common/user-feedback/configuration/index.mdx b/src/platforms/node/common/user-feedback/configuration/index.mdx index 3f7159b6e5db3..300e0565569d6 100644 --- a/src/platforms/node/common/user-feedback/configuration/index.mdx +++ b/src/platforms/node/common/user-feedback/configuration/index.mdx @@ -86,6 +86,7 @@ Colors can be customized via the Feedback class constructor or by defining CSS v | `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) | | `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) | | `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget (injected button and form) | +| `borderRadius` | `--border-radius` | `12px` | `12px` | Border radius style used for the widget (injected button and success message) | | `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget (injected button and form) | | `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button | | `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button | @@ -102,7 +103,9 @@ Colors can be customized via the Feedback class constructor or by defining CSS v | `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | | `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | | `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | +| `inputBorderRadius` | `--input-border-radius` | `6px` | `6px` | Border radius style for form inputs and buttons | | `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | +| `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form | Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration: From 25b2e6597c78e1e64d54a7f0fc90236646d20655 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jan 2024 15:34:52 -0500 Subject: [PATCH 2/5] update option --- .../user-feedback/configuration/index.mdx | 56 +++++++++--------- .../user-feedback/configuration/index.mdx | 57 ++++++++++--------- 2 files changed, 57 insertions(+), 56 deletions(-) diff --git a/src/platforms/javascript/common/user-feedback/configuration/index.mdx b/src/platforms/javascript/common/user-feedback/configuration/index.mdx index 9f87bbccdcf9d..07a801af2ccaa 100644 --- a/src/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/src/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -80,34 +80,34 @@ new Feedback({ Colors can be customized via the Feedback class constructor or by defining CSS variables on the injected button. If you use the default button it will have a property `id="sentry-feedback`, meaning you can use the `#sentry-feedback` selector to define CSS variables to override. -| key | css variable | light | dark | description | -| ----------------------- | --------------------------- | ----------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------- | -| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget (injected button and form) | -| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of the injected button when in a hover state | -| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color | -| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) | -| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) | -| `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget (injected button and form) | -| `borderRadius` | `--border-radius` | `12px` | `12px` | Border radius style used for the widget (injected button and success message) | -| `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget (injected button and form) | -| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button | -| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button | -| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button | -| `submitOutlineFocus` | `--submit-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for the submit button, in the focused state | -| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button | -| `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button when hovering | -| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button | -| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button | -| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | -| `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state | -| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button | -| `cancelForegroundHover` | `--cancel-foreground-hover` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button when hovering | -| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | -| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | -| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | -| `inputBorderRadius` | `--input-border-radius` | `6px` | `6px` | Border radius style for form inputs and buttons | -| `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | -| `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form | +| key | css variable | light | dark | description | +| ------------------------- | ------------------------------ | ----------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------- | +| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget (injected button and form) | +| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of the injected button when in a hover state | +| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color | +| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) | +| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) | +| `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget (injected button and form) | +| `borderRadius` | `--border-radius` | `12px` | `12px` | Border radius style used for the widget (injected button and success message) | +| `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget (injected button and form) | +| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button | +| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button | +| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button | +| `submitOutlineFocus` | `--submit-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for the submit button, in the focused state | +| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button | +| `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button when hovering | +| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button | +| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button | +| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | +| `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state | +| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button | +| `cancelForegroundHover` | `--cancel-foreground-hover` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button when hovering | +| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | +| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | +| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | +| `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | +| `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form | +| `formContentBorderRadius` | `--form-content-border-radius` | `6px` | `6px` | Border radius style for form content | Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration: diff --git a/src/platforms/node/common/user-feedback/configuration/index.mdx b/src/platforms/node/common/user-feedback/configuration/index.mdx index 300e0565569d6..18cd2df2def2b 100644 --- a/src/platforms/node/common/user-feedback/configuration/index.mdx +++ b/src/platforms/node/common/user-feedback/configuration/index.mdx @@ -78,34 +78,35 @@ new Feedback({ Colors can be customized via the Feedback class constructor or by defining CSS variables on the injected button. If you use the default button it will have a property `id="sentry-feedback`, meaning you can use the `#sentry-feedback` selector to define CSS variables to override. -| key | css variable | light | dark | description | -| ----------------------- | --------------------------- | ----------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------- | -| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget (injected button and form) | -| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of the injected button when in a hover state | -| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color | -| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) | -| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) | -| `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget (injected button and form) | -| `borderRadius` | `--border-radius` | `12px` | `12px` | Border radius style used for the widget (injected button and success message) | -| `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget (injected button and form) | -| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button | -| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button | -| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button | -| `submitOutlineFocus` | `--submit-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for the submit button, in the focused state | -| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button | -| `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button when hovering | -| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button | -| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button | -| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | -| `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state | -| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button | -| `cancelForegroundHover` | `--cancel-foreground-hover` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button when hovering | -| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | -| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | -| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | -| `inputBorderRadius` | `--input-border-radius` | `6px` | `6px` | Border radius style for form inputs and buttons | -| `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | -| `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form | +| key | css variable | light | dark | description | +| ------------------------- | ------------------------------ | ----------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------- | +| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget (injected button and form) | +| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of the injected button when in a hover state | +| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color | +| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) | +| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) | +| `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget (injected button and form) | +| `borderRadius` | `--border-radius` | `12px` | `12px` | Border radius style used for the widget (injected button and success message) | +| `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget (injected button and form) | +| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button | +| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button | +| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button | +| `submitOutlineFocus` | `--submit-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for the submit button, in the focused state | +| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button | +| `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button when hovering | +| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button | +| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button | +| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | +| `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state | +| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button | +| `cancelForegroundHover` | `--cancel-foreground-hover` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button when hovering | +| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | +| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | +| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | +| | +| `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | +| `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form | +| `formContentBorderRadius` | `--form-content-border-radius` | `6px` | `6px` | Border radius style for form content | Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration: From ce6a54ac1c71d85f0ed32c6e8228e14205b590ad Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Tue, 23 Jan 2024 10:14:59 -0500 Subject: [PATCH 3/5] fix spacing --- src/platforms/node/common/user-feedback/configuration/index.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platforms/node/common/user-feedback/configuration/index.mdx b/src/platforms/node/common/user-feedback/configuration/index.mdx index 18cd2df2def2b..a61759533d144 100644 --- a/src/platforms/node/common/user-feedback/configuration/index.mdx +++ b/src/platforms/node/common/user-feedback/configuration/index.mdx @@ -103,7 +103,6 @@ Colors can be customized via the Feedback class constructor or by defining CSS v | `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | | `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | | `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | -| | | `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | | `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form | | `formContentBorderRadius` | `--form-content-border-radius` | `6px` | `6px` | Border radius style for form content | From 38d3b0c96da4f265870fd5b1c5d0556dd652457c Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Tue, 23 Jan 2024 10:38:32 -0500 Subject: [PATCH 4/5] Update src/platforms/javascript/common/user-feedback/configuration/index.mdx Co-authored-by: Billy Vong --- .../javascript/common/user-feedback/configuration/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/javascript/common/user-feedback/configuration/index.mdx b/src/platforms/javascript/common/user-feedback/configuration/index.mdx index 07a801af2ccaa..7810cb3ca2a1e 100644 --- a/src/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/src/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -107,7 +107,7 @@ Colors can be customized via the Feedback class constructor or by defining CSS v | `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | | `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | | `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form | -| `formContentBorderRadius` | `--form-content-border-radius` | `6px` | `6px` | Border radius style for form content | +| `formContentBorderRadius` | `--form-content-border-radius` | `6px` | `6px` | Border radius style for form content (for example: inputs, buttons) | Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration: From d89c1f6446a61421dd0be5d985290f3f3ace4914 Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:40:04 +0000 Subject: [PATCH 5/5] [getsentry/action-github-commit] Auto commit --- .../javascript/common/user-feedback/configuration/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/javascript/common/user-feedback/configuration/index.mdx b/src/platforms/javascript/common/user-feedback/configuration/index.mdx index 7810cb3ca2a1e..0fd846e1728f9 100644 --- a/src/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/src/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -107,7 +107,7 @@ Colors can be customized via the Feedback class constructor or by defining CSS v | `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | | `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | | `formBorderRadius` | `--form-border-radius` | `20px` | `20px` | Border radius style for the form | -| `formContentBorderRadius` | `--form-content-border-radius` | `6px` | `6px` | Border radius style for form content (for example: inputs, buttons) | +| `formContentBorderRadius` | `--form-content-border-radius` | `6px` | `6px` | Border radius style for form content (for example: inputs, buttons) | Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration: