From ae31e821c9b630459d22aba13f3273a2805de253 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jan 2024 11:50:20 -0500 Subject: [PATCH 1/3] configure border radius for feedback --- packages/feedback/src/constants.ts | 5 +++++ packages/feedback/src/types/index.ts | 16 ++++++++++++++++ packages/feedback/src/widget/Actor.css.ts | 2 +- packages/feedback/src/widget/Dialog.css.ts | 8 ++++---- packages/feedback/src/widget/Main.css.ts | 5 +++++ 5 files changed, 31 insertions(+), 5 deletions(-) diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts index 48f699408762..c0a8dd4b5941 100644 --- a/packages/feedback/src/constants.ts +++ b/packages/feedback/src/constants.ts @@ -16,6 +16,7 @@ const LIGHT_THEME = { backgroundHover: '#f6f6f7', foreground: '#2b2233', border: '1.5px solid rgba(41, 35, 47, 0.13)', + borderRadius: '12px', boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)', success: '#268d75', @@ -31,6 +32,7 @@ const LIGHT_THEME = { cancelBackground: 'transparent', cancelBackgroundHover: 'var(--background-hover)', cancelBorder: 'var(--border)', + cancelBorderRadius: '6px', cancelOutlineFocus: 'var(--input-outline-focus)', cancelForeground: 'var(--foreground)', cancelForegroundHover: 'var(--foreground)', @@ -38,7 +40,10 @@ const LIGHT_THEME = { inputBackground: INHERIT, inputForeground: INHERIT, inputBorder: 'var(--border)', + inputBorderRadius: '6px', inputOutlineFocus: SUBMIT_COLOR, + + formBorderRadius: '20px', }; export const DEFAULT_THEME = { diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts index a86fd4ee4107..4facd704fc97 100644 --- a/packages/feedback/src/types/index.ts +++ b/packages/feedback/src/types/index.ts @@ -215,6 +215,10 @@ export interface FeedbackTheme { * Border styling for actor and dialog */ border: string; + /** + * Border styling for actor and dialog + */ + borderRadius: string; /** * Box shadow for actor and dialog */ @@ -270,6 +274,10 @@ export interface FeedbackTheme { * Border style for the cancel button */ cancelBorder: string; + /** + * Border radius for buttons + */ + cancelBorderRadius: string; /** * Border style for the cancel button, in the focued state */ @@ -295,10 +303,18 @@ export interface FeedbackTheme { * Border styles for form inputs */ inputBorder: string; + /** + * Border radius for form inputs + */ + inputBorderRadius: string; /** * Border styles for form inputs when focused */ inputOutlineFocus: string; + /** + * Border radius for dialog + */ + formBorderRadius: string; } export interface FeedbackThemes { diff --git a/packages/feedback/src/widget/Actor.css.ts b/packages/feedback/src/widget/Actor.css.ts index c0fd8d3bd68f..44bd60a3418e 100644 --- a/packages/feedback/src/widget/Actor.css.ts +++ b/packages/feedback/src/widget/Actor.css.ts @@ -11,7 +11,7 @@ export function createActorStyles(d: Document): HTMLStyleElement { align-items: center; gap: 8px; - border-radius: 12px; + border-radius: var(--border-radius); cursor: pointer; font-size: 14px; font-weight: 600; diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/widget/Dialog.css.ts index b9cd5a499c13..be601858a4aa 100644 --- a/packages/feedback/src/widget/Dialog.css.ts +++ b/packages/feedback/src/widget/Dialog.css.ts @@ -38,7 +38,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { top: var(--top); border: var(--border); - border-radius: 20px; + border-radius: var(--form-border-radius); background-color: var(--background); color: var(--foreground); @@ -113,7 +113,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { background-color: var(--input-background); box-sizing: border-box; border: var(--input-border); - border-radius: 6px; + border-radius: var(--input-border-radius); color: var(--input-foreground); font-size: 14px; font-weight: 500; @@ -138,7 +138,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { .btn { line-height: inherit; border: var(--cancel-border); - border-radius: 6px; + border-radius: var(--cancel-border-radius); cursor: pointer; font-size: 14px; font-weight: 600; @@ -178,7 +178,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { .success-message { background-color: var(--background); border: var(--border); - border-radius: 12px; + border-radius: var(--border-radius); box-shadow: var(--box-shadow); font-weight: 600; color: var(--success); diff --git a/packages/feedback/src/widget/Main.css.ts b/packages/feedback/src/widget/Main.css.ts index 0c74fedf6832..ef8ef5786313 100644 --- a/packages/feedback/src/widget/Main.css.ts +++ b/packages/feedback/src/widget/Main.css.ts @@ -8,6 +8,7 @@ function getThemedCssVariables(theme: FeedbackTheme): string { --error: ${theme.error}; --success: ${theme.success}; --border: ${theme.border}; + --border-radius: ${theme.borderRadius}; --box-shadow: ${theme.boxShadow}; --submit-background: ${theme.submitBackground}; @@ -20,6 +21,7 @@ function getThemedCssVariables(theme: FeedbackTheme): string { --cancel-background: ${theme.cancelBackground}; --cancel-background-hover: ${theme.cancelBackgroundHover}; --cancel-border: ${theme.cancelBorder}; + --cancel-border-radius: ${theme.cancelBorderRadius}; --cancel-outline-focus: ${theme.cancelOutlineFocus}; --cancel-foreground: ${theme.cancelForeground}; --cancel-foreground-hover: ${theme.cancelForegroundHover}; @@ -27,7 +29,10 @@ function getThemedCssVariables(theme: FeedbackTheme): string { --input-background: ${theme.inputBackground}; --input-foreground: ${theme.inputForeground}; --input-border: ${theme.inputBorder}; + --input-border-radius: ${theme.inputBorderRadius}; --input-outline-focus: ${theme.inputOutlineFocus}; + + --form-border-radius: ${theme.formBorderRadius}; `; } From 4d936cc86ccb1b97ba06893b4f292242db4e75ab Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jan 2024 12:17:32 -0500 Subject: [PATCH 2/3] merge cancel border radius config with input --- packages/feedback/src/constants.ts | 1 - packages/feedback/src/types/index.ts | 6 +----- packages/feedback/src/widget/Dialog.css.ts | 2 +- packages/feedback/src/widget/Main.css.ts | 1 - 4 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts index c0a8dd4b5941..0150d92435cc 100644 --- a/packages/feedback/src/constants.ts +++ b/packages/feedback/src/constants.ts @@ -32,7 +32,6 @@ const LIGHT_THEME = { cancelBackground: 'transparent', cancelBackgroundHover: 'var(--background-hover)', cancelBorder: 'var(--border)', - cancelBorderRadius: '6px', cancelOutlineFocus: 'var(--input-outline-focus)', cancelForeground: 'var(--foreground)', cancelForegroundHover: 'var(--foreground)', diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts index 4facd704fc97..e4b15a9f739f 100644 --- a/packages/feedback/src/types/index.ts +++ b/packages/feedback/src/types/index.ts @@ -216,7 +216,7 @@ export interface FeedbackTheme { */ border: string; /** - * Border styling for actor and dialog + * Border radius styling for actor and dialog */ borderRadius: string; /** @@ -274,10 +274,6 @@ export interface FeedbackTheme { * Border style for the cancel button */ cancelBorder: string; - /** - * Border radius for buttons - */ - cancelBorderRadius: string; /** * Border style for the cancel button, in the focued state */ diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/widget/Dialog.css.ts index be601858a4aa..1daf522c079e 100644 --- a/packages/feedback/src/widget/Dialog.css.ts +++ b/packages/feedback/src/widget/Dialog.css.ts @@ -138,7 +138,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { .btn { line-height: inherit; border: var(--cancel-border); - border-radius: var(--cancel-border-radius); + border-radius: var(--input-border-radius); cursor: pointer; font-size: 14px; font-weight: 600; diff --git a/packages/feedback/src/widget/Main.css.ts b/packages/feedback/src/widget/Main.css.ts index ef8ef5786313..ac182ed728f0 100644 --- a/packages/feedback/src/widget/Main.css.ts +++ b/packages/feedback/src/widget/Main.css.ts @@ -21,7 +21,6 @@ function getThemedCssVariables(theme: FeedbackTheme): string { --cancel-background: ${theme.cancelBackground}; --cancel-background-hover: ${theme.cancelBackgroundHover}; --cancel-border: ${theme.cancelBorder}; - --cancel-border-radius: ${theme.cancelBorderRadius}; --cancel-outline-focus: ${theme.cancelOutlineFocus}; --cancel-foreground: ${theme.cancelForeground}; --cancel-foreground-hover: ${theme.cancelForegroundHover}; From 40a9de6f69aa23b332320a85a8e281cce59d29a5 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jan 2024 15:25:10 -0500 Subject: [PATCH 3/3] rename variable --- packages/feedback/src/constants.ts | 2 +- packages/feedback/src/types/index.ts | 10 +++++----- packages/feedback/src/widget/Dialog.css.ts | 4 ++-- packages/feedback/src/widget/Main.css.ts | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts index 0150d92435cc..6e3e9055b511 100644 --- a/packages/feedback/src/constants.ts +++ b/packages/feedback/src/constants.ts @@ -39,10 +39,10 @@ const LIGHT_THEME = { inputBackground: INHERIT, inputForeground: INHERIT, inputBorder: 'var(--border)', - inputBorderRadius: '6px', inputOutlineFocus: SUBMIT_COLOR, formBorderRadius: '20px', + formContentBorderRadius: '6px', }; export const DEFAULT_THEME = { diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts index e4b15a9f739f..c2642b54d09c 100644 --- a/packages/feedback/src/types/index.ts +++ b/packages/feedback/src/types/index.ts @@ -216,7 +216,7 @@ export interface FeedbackTheme { */ border: string; /** - * Border radius styling for actor and dialog + * Border radius styling for actor */ borderRadius: string; /** @@ -299,10 +299,6 @@ export interface FeedbackTheme { * Border styles for form inputs */ inputBorder: string; - /** - * Border radius for form inputs - */ - inputBorderRadius: string; /** * Border styles for form inputs when focused */ @@ -311,6 +307,10 @@ export interface FeedbackTheme { * Border radius for dialog */ formBorderRadius: string; + /** + * Border radius for form inputs + */ + formContentBorderRadius: string; } export interface FeedbackThemes { diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/widget/Dialog.css.ts index 1daf522c079e..b3924f00524a 100644 --- a/packages/feedback/src/widget/Dialog.css.ts +++ b/packages/feedback/src/widget/Dialog.css.ts @@ -113,7 +113,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { background-color: var(--input-background); box-sizing: border-box; border: var(--input-border); - border-radius: var(--input-border-radius); + border-radius: var(--form-content-border-radius); color: var(--input-foreground); font-size: 14px; font-weight: 500; @@ -138,7 +138,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement { .btn { line-height: inherit; border: var(--cancel-border); - border-radius: var(--input-border-radius); + border-radius: var(--form-content-border-radius); cursor: pointer; font-size: 14px; font-weight: 600; diff --git a/packages/feedback/src/widget/Main.css.ts b/packages/feedback/src/widget/Main.css.ts index ac182ed728f0..32bb8048e678 100644 --- a/packages/feedback/src/widget/Main.css.ts +++ b/packages/feedback/src/widget/Main.css.ts @@ -28,10 +28,10 @@ function getThemedCssVariables(theme: FeedbackTheme): string { --input-background: ${theme.inputBackground}; --input-foreground: ${theme.inputForeground}; --input-border: ${theme.inputBorder}; - --input-border-radius: ${theme.inputBorderRadius}; --input-outline-focus: ${theme.inputOutlineFocus}; --form-border-radius: ${theme.formBorderRadius}; + --form-content-border-radius: ${theme.formContentBorderRadius}; `; }