Skip to content

Commit c5ae366

Browse files
billyvgbillyvg
committed
submit/cancel
1 parent cc44fa6 commit c5ae366

File tree

7 files changed

+115
-41
lines changed

7 files changed

+115
-41
lines changed

‎packages/feedback/src/constants.ts

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,56 @@
1+
const LIGHT_BORDER = '1.5px solid rgba(41, 35, 47, 0.13)';
2+
const LIGHT_BACKGROUND_HOVER = '#f6f6f7';
3+
const LIGHT_FOREGROUND = '#2B2233';
4+
5+
const DARK_BACKGROUND_HOVER = '#352f3b';
6+
const DARK_BORDER = '1.5px solid rgba(235, 230, 239, 0.15)';
7+
const DARK_FOREGROUND = '#EBE6EF';
8+
9+
const SUBMIT_FOREGROUND = '#ffffff';
10+
111
export const DEFAULT_THEME = {
212
light: {
313
fontFamily: "'Helvetica Neue', Arial, sans-serif",
414
fontSize: '14px',
515
background: '#ffffff',
6-
backgroundHover: '#f6f6f7',
7-
foreground: '#2B2233',
16+
backgroundHover: LIGHT_BACKGROUND_HOVER,
17+
18+
submitButtonBackground: 'rgba(88, 74, 192, 1)',
19+
submitButtonBackgroundHover: 'rgba(108, 95, 199, 1)',
20+
submitButtonBorder: 'rgba(108, 95, 199, 1)',
21+
submitButtonForeground: SUBMIT_FOREGROUND,
22+
23+
cancelButtonBackground: 'transparent',
24+
cancelButtonBackgroundHover: LIGHT_BACKGROUND_HOVER,
25+
cancelButtonBorder: LIGHT_BORDER,
26+
cancelButtonForeground: LIGHT_FOREGROUND,
27+
28+
foreground: LIGHT_FOREGROUND,
829
success: '#268d75',
930
error: '#df3338',
10-
border: '1.5px solid rgba(41, 35, 47, 0.13)',
31+
border: LIGHT_BORDER,
1132
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
1233
},
1334
dark: {
1435
fontFamily: "'Helvetica Neue', Arial, sans-serif",
1536
fontSize: '14px',
1637
background: '#29232f',
17-
backgroundHover: '#352f3b',
18-
foreground: '#EBE6EF',
38+
backgroundHover: DARK_BACKGROUND_HOVER,
39+
foreground: DARK_FOREGROUND,
40+
41+
submitButtonBackground: 'rgba(88, 74, 192, 1)',
42+
submitButtonBackgroundHover: 'rgba(108, 95, 199, 1)',
43+
submitButtonBorder: 'rgba(108, 95, 199, 1)',
44+
submitButtonForeground: SUBMIT_FOREGROUND,
45+
46+
cancelButtonBackground: 'transparent',
47+
cancelButtonBackgroundHover: DARK_BACKGROUND_HOVER,
48+
cancelButtonBorder: DARK_BORDER,
49+
cancelButtonForeground: DARK_FOREGROUND,
50+
1951
success: '#2da98c',
2052
error: '#f55459',
21-
border: '1.5px solid rgba(235, 230, 239, 0.15)',
53+
border: DARK_BORDER,
2254
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
2355
},
2456
};

‎packages/feedback/src/integration.ts

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@ import {
1616
SUBMIT_BUTTON_LABEL,
1717
SUCCESS_MESSAGE_TEXT,
1818
} from './constants';
19-
import type {
20-
OptionalFeedbackConfiguration,
21-
FeedbackInternalOptions,
22-
Widget,
23-
} from './types';
19+
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
2420
import { mergeOptions } from './util/mergeOptions';
2521
import { createActorStyles } from './widget/Actor.css';
2622
import { createShadowHost } from './widget/createShadowHost';
@@ -132,11 +128,11 @@ export class Feedback implements Integration {
132128
colorScheme,
133129
themeDark: {
134130
...DEFAULT_THEME.dark,
135-
...themeDark
131+
...themeDark,
136132
},
137133
themeLight: {
138134
...DEFAULT_THEME.light,
139-
...themeLight
135+
...themeLight,
140136
},
141137

142138
buttonLabel,

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,8 @@ export interface FeedbackInternalOptions
208208
/**
209209
* Partial configuration that overrides default configuration values
210210
*/
211-
export interface OptionalFeedbackConfiguration extends Omit<Partial<FeedbackInternalOptions>, 'themeLight'|'themeDark'> {
211+
export interface OptionalFeedbackConfiguration
212+
extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
212213
themeLight?: Partial<FeedbackTheme>;
213214
themeDark?: Partial<FeedbackTheme>;
214215
}
@@ -250,6 +251,16 @@ export interface FeedbackTheme {
250251
* Error color
251252
*/
252253
error: string;
254+
255+
submitButtonBackground: string;
256+
submitButtonBackgroundHover: string;
257+
submitButtonBorder: string;
258+
submitButtonForeground: string;
259+
260+
cancelButtonBackground: string;
261+
cancelButtonBackgroundHover: string;
262+
cancelButtonBorder: string;
263+
cancelButtonForeground: string;
253264
}
254265

255266
export interface FeedbackThemes {

‎packages/feedback/src/util/mergeOptions.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
import { FeedbackInternalOptions, OptionalFeedbackConfiguration } from "../types";
1+
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
22

3-
export function mergeOptions(defaultOptions: FeedbackInternalOptions, optionOverrides: OptionalFeedbackConfiguration) {
3+
/**
4+
*
5+
*/
6+
export function mergeOptions(
7+
defaultOptions: FeedbackInternalOptions,
8+
optionOverrides: OptionalFeedbackConfiguration,
9+
): FeedbackInternalOptions {
410
return {
511
...defaultOptions,
612
...optionOverrides,
@@ -11,7 +17,6 @@ export function mergeOptions(defaultOptions: FeedbackInternalOptions, optionOver
1117
themeLight: {
1218
...defaultOptions.themeLight,
1319
...optionOverrides.themeLight,
14-
}
20+
},
1521
};
16-
1722
}

‎packages/feedback/src/widget/Actor.css.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ export function createActorStyles(d: Document): HTMLStyleElement {
1919
text-decoration: none;
2020
z-index: 9000;
2121
22-
color: var(--fg-color);
23-
background-color: var(--bg-color);
22+
color: var(--foreground-color);
23+
background-color: var(--background-color);
2424
border: var(--border);
2525
box-shadow: var(--box-shadow);
2626
opacity: 1;
2727
transition: opacity 0.1s ease-in-out;
2828
}
2929
3030
.widget__actor:hover {
31-
background-color: var(--bg-hover-color);
31+
background-color: var(--background-hover-color);
3232
}
3333
3434
.widget__actor svg {
@@ -46,7 +46,7 @@ export function createActorStyles(d: Document): HTMLStyleElement {
4646
}
4747
4848
.feedback-icon path {
49-
fill: var(--fg-color);
49+
fill: var(--foreground-color);
5050
}
5151
`;
5252

‎packages/feedback/src/widget/Dialog.css.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
4040
border: var(--border);
4141
padding: 24px;
4242
border-radius: 20px;
43-
background-color: var(--bg-color);
43+
background-color: var(--background-color);
4444
color: var(--fg-color);
4545
4646
width: 320px;
@@ -130,7 +130,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
130130
131131
.btn {
132132
line-height: inherit;
133-
border: var(--border);
133+
border: var(--cancel-button-border);
134134
border-radius: 6px;
135135
cursor: pointer;
136136
font-size: 14px;
@@ -143,25 +143,25 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
143143
}
144144
145145
.btn--primary {
146-
background-color: rgba(108, 95, 199, 1);
147-
border-color: rgba(108, 95, 199, 1);
148-
color: #fff;
146+
background-color: var(--submit-button-background);
147+
border-color: var(--submit-button-border);
148+
color: var(--submit-button-foreground);
149149
}
150150
.btn--primary:hover {
151-
background-color: rgba(88, 74, 192, 1);
151+
background-color: var(--submit-button-background-hover);
152152
}
153153
154154
.btn--default {
155-
background-color: transparent;
156-
color: var(--fg-color);
155+
background-color: var(--cancel-button-background);
156+
color: var(--cancel-button-foreground);
157157
font-weight: 500;
158158
}
159159
.btn--default:hover {
160-
background-color: var(--bg-accent-color);
160+
background-color: var(--cancel-button-background-hover);
161161
}
162162
163163
.success-message {
164-
background-color: var(--bg-color);
164+
background-color: var(--background-color);
165165
border: var(--border);
166166
border-radius: 12px;
167167
box-shadow: var(--box-shadow);

‎packages/feedback/src/widget/Main.css.ts

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,43 +29,73 @@ export function createMainStyles(
2929
font-family: var(--font-family);
3030
font-size: var(--font-size);
3131
32-
--bg-color: ${themes.light.background};
33-
--bg-hover-color: ${themes.light.backgroundHover};
34-
--fg-color: ${themes.light.foreground};
32+
--background-color: ${themes.light.background};
33+
--background-hover-color: ${themes.light.backgroundHover};
34+
--foreground-color: ${themes.light.foreground};
3535
--error-color: ${themes.light.error};
3636
--success-color: ${themes.light.success};
3737
--border: ${themes.light.border};
3838
--box-shadow: ${themes.light.boxShadow};
39+
40+
--submit-button-background: ${themes.light.submitButtonBackground};
41+
--submit-button-background-hover: ${themes.light.submitButtonBackgroundHover};
42+
--submit-button-border: ${themes.light.submitButtonBorder};
43+
--submit-button-foreground: ${themes.light.submitButtonForeground};
44+
45+
--cancel-button-background: ${themes.light.cancelButtonBackground};
46+
--cancel-button-background-hover: ${themes.light.cancelButtonBackgroundHover};
47+
--cancel-button-border: ${themes.light.cancelButtonBorder};
48+
--cancel-button-foreground: ${themes.light.cancelButtonForeground};
3949
}
4050
4151
${
4252
colorScheme === 'system'
4353
? `
4454
@media (prefers-color-scheme: dark) {
4555
:host {
46-
--bg-color: ${themes.dark.background};
47-
--bg-hover-color: ${themes.dark.backgroundHover};
48-
--fg-color: ${themes.dark.foreground};
56+
--background-color: ${themes.dark.background};
57+
--background-hover-color: ${themes.dark.backgroundHover};
58+
--foreground-color: ${themes.dark.foreground};
4959
--error-color: ${themes.dark.error};
5060
--success-color: ${themes.dark.success};
5161
--border: ${themes.dark.border};
5262
--box-shadow: ${themes.dark.boxShadow};
5363
--font-family: ${themes.dark.fontFamily};
5464
--font-size: ${themes.dark.fontSize};
65+
66+
--submit-button-background: ${themes.dark.submitButtonBackground};
67+
--submit-button-background-hover: ${themes.dark.submitButtonBackgroundHover};
68+
--submit-button-border: ${themes.dark.submitButtonBorder};
69+
--submit-button-foreground: ${themes.dark.submitButtonForeground};
70+
71+
--cancel-button-background: ${themes.dark.cancelButtonBackground};
72+
--cancel-button-background-hover: ${themes.dark.cancelButtonBackgroundHover};
73+
--cancel-button-border: ${themes.dark.cancelButtonBorder};
74+
--cancel-button-foreground: ${themes.dark.cancelButtonForeground};
5575
}
5676
}
5777
`
5878
: `
5979
:host-context([data-sentry-feedback-colorscheme="dark"]) {
60-
--bg-color: ${themes.dark.background};
61-
--bg-hover-color: ${themes.dark.backgroundHover};
62-
--fg-color: ${themes.dark.foreground};
80+
--background-color: ${themes.dark.background};
81+
--background-hover-color: ${themes.dark.backgroundHover};
82+
--foreground-color: ${themes.dark.foreground};
6383
--error-color: ${themes.dark.error};
6484
--success-color: ${themes.dark.success};
6585
--border: ${themes.dark.border};
6686
--box-shadow: ${themes.dark.boxShadow};
6787
--font-family: ${themes.dark.fontFamily};
6888
--font-size: ${themes.dark.fontSize};
89+
90+
--submit-button-background: ${themes.dark.submitButtonBackground};
91+
--submit-button-background-hover: ${themes.dark.submitButtonBackgroundHover};
92+
--submit-button-border: ${themes.dark.submitButtonBorder};
93+
--submit-button-foreground: ${themes.dark.submitButtonForeground};
94+
95+
--cancel-button-background: ${themes.dark.cancelButtonBackground};
96+
--cancel-button-background-hover: ${themes.dark.cancelButtonBackgroundHover};
97+
--cancel-button-border: ${themes.dark.cancelButtonBorder};
98+
--cancel-button-foreground: ${themes.dark.cancelButtonForeground};
6999
}
70100
`
71101
}`;

0 commit comments

Comments
 (0)