Skip to content

Commit 7397f55

Browse files
ryan953ryan953
committed
fix(feedback): Improve CSS theme names and coverage to set icon colors and spacing
1 parent de97227 commit 7397f55

File tree

18 files changed

+415
-390
lines changed

18 files changed

+415
-390
lines changed

‎packages/feedback/src/constants/index.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
99
export const DOCUMENT = WINDOW.document;
1010
export const NAVIGATOR = WINDOW.navigator;
1111

12-
export const ACTOR_LABEL = 'Report a Bug';
12+
export const TRIGGER_LABEL = 'Report a Bug';
1313
export const CANCEL_BUTTON_LABEL = 'Cancel';
1414
export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
15+
export const CONFIRM_BUTTON_LABEL = 'Confirm';
1516
export const FORM_TITLE = 'Report a Bug';
1617
export const EMAIL_PLACEHOLDER = '[email protected]';
1718
export const EMAIL_LABEL = 'Email';
@@ -20,7 +21,9 @@ export const MESSAGE_LABEL = 'Description';
2021
export const NAME_PLACEHOLDER = 'Your Name';
2122
export const NAME_LABEL = 'Name';
2223
export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
23-
export const IS_REQUIRED_TEXT = '(required)';
24+
export const IS_REQUIRED_LABEL = '(required)';
25+
export const ADD_SCREENSHOT_LABEL = 'Add a screenshot';
26+
export const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot';
2427

2528
export const FEEDBACK_WIDGET_SOURCE = 'widget';
2629
export const FEEDBACK_API_SOURCE = 'api';

‎packages/feedback/src/constants/theme.ts‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,58 @@
11
const LIGHT_BACKGROUND = '#ffffff';
22
const INHERIT = 'inherit';
3-
const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';
3+
const PURPLE = 'rgba(88, 74, 192, 1)';
4+
const PURPLE_HOVER = 'rgba(108, 95, 199, 1)';
45

56
export const LIGHT_THEME = {
6-
fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
7-
fontSize: '14px',
8-
97
foreground: '#2b2233',
8+
successForeground: '#268d75',
9+
errorForeground: '#df3338',
1010
background: LIGHT_BACKGROUND,
11-
success: '#268d75',
12-
error: '#df3338',
13-
14-
zIndex: 100000,
1511
border: '1.5px solid rgba(41, 35, 47, 0.13)',
1612
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
1713

18-
backgroundHover: '#f6f6f7',
19-
borderRadius: '25px',
20-
21-
formBorderRadius: '20px',
22-
formContentBorderRadius: '6px',
23-
24-
submitForeground: LIGHT_BACKGROUND,
25-
submitBackground: 'rgba(88, 74, 192, 1)',
26-
submitForegroundHover: LIGHT_BACKGROUND,
27-
submitBackgroundHover: SUBMIT_COLOR,
28-
submitBorder: SUBMIT_COLOR,
14+
inputForeground: INHERIT,
15+
inputBackground: INHERIT,
16+
inputBackgroundHover: INHERIT,
17+
inputBackgroundFocus: INHERIT,
18+
inputBorder: 'var(--border)',
19+
inputBorderRadius: '6px',
20+
inputOutlineFocus: PURPLE_HOVER,
21+
22+
buttonForeground: INHERIT,
23+
buttonForegroundHover: INHERIT,
24+
buttonBackground: 'var(--background)',
25+
buttonBackgroundHover: '#f6f6f7',
26+
buttonBorder: 'var(--border)',
27+
buttonOutlineFocus: 'var(--input-outline-focus)',
28+
29+
submitForeground: '#ffffff',
30+
submitForegroundHover: '#ffffff',
31+
submitBackground: PURPLE,
32+
submitBackgroundHover: PURPLE_HOVER,
33+
submitBorder: PURPLE_HOVER,
34+
submitBorderRadius: 'var(--button-border-radius)',
2935
submitOutlineFocus: '#29232f',
3036

31-
cancelForeground: 'var(--foreground)',
32-
cancelBackground: 'transparent',
33-
cancelForegroundHover: 'var(--foreground)',
34-
cancelBackgroundHover: 'var(--background-hover)',
35-
cancelBorder: 'var(--border)',
36-
cancelOutlineFocus: 'var(--input-outline-focus)',
37+
triggerBackground: 'var(--background)',
38+
triggerBackgroundHover: 'var(--button-background-hover)',
39+
triggerBorderRadius: '25px', // TODO, make flexible
3740

38-
inputBackground: INHERIT,
39-
inputForeground: INHERIT,
40-
inputBorder: 'var(--border)',
41-
inputOutlineFocus: SUBMIT_COLOR,
41+
dialogBackground: 'var(--background)',
42+
dialogBorderRadius: '20px',
4243
};
4344

4445
export const DEFAULT_THEME = {
4546
light: LIGHT_THEME,
4647
dark: {
4748
...LIGHT_THEME,
4849

49-
background: '#29232f',
50-
backgroundHover: '#352f3b',
5150
foreground: '#ebe6ef',
51+
successForeground: '#2da98c',
52+
errorForeground: '#f55459',
53+
background: '#29232f',
5254
border: '1.5px solid rgba(235, 230, 239, 0.15)',
53-
54-
success: '#2da98c',
55-
error: '#f55459',
55+
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
56+
buttonBackgroundHover: '#352f3b',
5657
},
5758
};

‎packages/feedback/src/core/components/Actor.css.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export function createActorStyles(): HTMLStyleElement {
99
.widget__actor {
1010
position: fixed;
1111
z-index: var(--z-index);
12-
margin: 0;
1312
inset: var(--actor-inset);
13+
margin: var(--page-margin);
1414
1515
display: flex;
1616
align-items: center;
@@ -20,11 +20,11 @@ export function createActorStyles(): HTMLStyleElement {
2020
font-family: inherit;
2121
font-size: var(--font-size);
2222
font-weight: 600;
23-
line-height: 16px;
23+
line-height: 1.14em;
2424
text-decoration: none;
2525
26-
background-color: var(--background);
27-
border-radius: var(--border-radius);
26+
background-color: var(--trigger-background);
27+
border-radius: var(--trigger-border-radius);
2828
border: var(--border);
2929
box-shadow: var(--box-shadow);
3030
color: var(--foreground);
@@ -41,12 +41,12 @@ export function createActorStyles(): HTMLStyleElement {
4141
}
4242
4343
.widget__actor:hover {
44-
background-color: var(--background-hover);
44+
background-color: var(--trigger-background-hover);
4545
}
4646
4747
.widget__actor svg {
48-
width: 16px;
49-
height: 16px;
48+
width: 1.14em;
49+
height: 1.14em;
5050
}
5151
5252
@media (max-width: 600px) {

‎packages/feedback/src/core/components/Actor.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { createActorStyles } from './Actor.css';
33
import { FeedbackIcon } from './FeedbackIcon';
44

55
export interface ActorProps {
6-
buttonLabel: string;
6+
triggerLabel: string;
77
shadow: ShadowRoot;
88
}
99

@@ -22,16 +22,16 @@ export interface ActorComponent {
2222
/**
2323
* The sentry-provided button to open the feedback modal
2424
*/
25-
export function Actor({ buttonLabel, shadow }: ActorProps): ActorComponent {
25+
export function Actor({ triggerLabel, shadow }: ActorProps): ActorComponent {
2626
const el = DOCUMENT.createElement('button');
2727
el.type = 'button';
2828
el.className = 'widget__actor';
2929
el.ariaHidden = 'false';
30-
el.ariaLabel = buttonLabel;
30+
el.ariaLabel = triggerLabel;
3131
el.appendChild(FeedbackIcon());
32-
if (buttonLabel) {
32+
if (triggerLabel) {
3333
const label = DOCUMENT.createElement('span');
34-
label.appendChild(DOCUMENT.createTextNode(buttonLabel));
34+
label.appendChild(DOCUMENT.createTextNode(triggerLabel));
3535
el.appendChild(label);
3636
}
3737

‎packages/feedback/src/core/createMainStyles.ts‎

Lines changed: 20 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,83 +3,47 @@ import type { FeedbackInternalOptions } from '../types';
33

44
function getThemedCssVariables(theme: FeedbackInternalOptions['themeLight']): string {
55
return `
6-
--background: ${theme.background};
7-
--background-hover: ${theme.backgroundHover};
86
--foreground: ${theme.foreground};
9-
--error: ${theme.error};
10-
--success: ${theme.success};
7+
--success-foreground: ${theme.successForeground};
8+
--error-foreground: ${theme.errorForeground};
9+
--background: ${theme.background};
1110
--border: ${theme.border};
12-
--border-radius: ${theme.borderRadius};
1311
--box-shadow: ${theme.boxShadow};
1412
15-
--submit-background: ${theme.submitBackground};
16-
--submit-background-hover: ${theme.submitBackgroundHover};
17-
--submit-border: ${theme.submitBorder};
18-
--submit-outline-focus: ${theme.submitOutlineFocus};
19-
--submit-foreground: ${theme.submitForeground};
20-
--submit-foreground-hover: ${theme.submitForegroundHover};
21-
22-
--cancel-background: ${theme.cancelBackground};
23-
--cancel-background-hover: ${theme.cancelBackgroundHover};
24-
--cancel-border: ${theme.cancelBorder};
25-
--cancel-outline-focus: ${theme.cancelOutlineFocus};
26-
--cancel-foreground: ${theme.cancelForeground};
27-
--cancel-foreground-hover: ${theme.cancelForegroundHover};
28-
29-
--input-background: ${theme.inputBackground};
30-
--input-foreground: ${theme.inputForeground};
31-
--input-border: ${theme.inputBorder};
32-
--input-outline-focus: ${theme.inputOutlineFocus};
33-
34-
--form-border-radius: ${theme.formBorderRadius};
35-
--form-content-border-radius: ${theme.formContentBorderRadius};
13+
--trigger-background: ${theme.triggerBackground};
14+
--trigger-background-hover: ${theme.triggerBackgroundHover};
15+
--trigger-border-radius: ${theme.triggerBorderRadius};
3616
`;
3717
}
3818

3919
/**
4020
* Creates <style> element for widget actor (button that opens the dialog)
4121
*/
42-
export function createMainStyles(
43-
colorScheme: 'system' | 'dark' | 'light',
44-
themes: Pick<FeedbackInternalOptions, 'themeLight' | 'themeDark'>,
45-
): HTMLStyleElement {
22+
export function createMainStyles({ colorScheme, themeDark, themeLight }: FeedbackInternalOptions): HTMLStyleElement {
4623
const style = DOCUMENT.createElement('style');
4724
style.textContent = `
4825
:host {
49-
--z-index: ${themes.themeLight.zIndex};
50-
--font-family: ${themes.themeLight.fontFamily};
51-
--font-size: ${themes.themeLight.fontSize};
52-
53-
font-family: var(--font-family);
54-
font-size: var(--font-size);
26+
--font-family: system-ui, 'Helvetica Neue', Arial, sans-serif;
27+
--font-size: 14px;
28+
--z-index: 100000;
5529
5630
--page-margin: 16px;
57-
--actor-inset: auto var(--page-margin) var(--page-margin) auto;
58-
59-
--dialog-inset: auto var(--page-margin) var(--page-margin) auto;
60-
--dialog-padding: 24px;
31+
--inset: auto 0 0 auto;
32+
--actor-inset: var(--inset);
6133
62-
.brand-link path {
63-
fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
64-
}
65-
@media (prefers-color-scheme: dark)
66-
{
67-
path: {
68-
fill: '#fff';
69-
}
70-
}
34+
font-family: var(--font-family);
35+
font-size: var(--font-size);
7136
72-
${getThemedCssVariables(colorScheme === 'dark' ? themes.themeDark : themes.themeLight)}
37+
${getThemedCssVariables(colorScheme === 'dark' ? themeDark : themeLight)}
7338
}
7439
7540
${
7641
colorScheme === 'system'
77-
? `
78-
@media (prefers-color-scheme: dark) {
79-
:host {
80-
${getThemedCssVariables(themes.themeDark)}
81-
}
82-
}`
42+
? `@media (prefers-color-scheme: dark) {
43+
:host {
44+
${getThemedCssVariables(themeDark)}
45+
}
46+
}`
8347
: ''
8448
}
8549
}`;

0 commit comments

Comments
 (0)