From 04ce7f2fc8552e140be1db873c8387fdc3c76984 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:25:31 -0400
Subject: [PATCH 1/5] button designs

---
 packages/feedback/src/constants/theme.ts           |  2 +-
 packages/feedback/src/core/components/Actor.css.ts | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/feedback/src/constants/theme.ts b/packages/feedback/src/constants/theme.ts
index 7fff31f48964..268abeef87aa 100644
--- a/packages/feedback/src/constants/theme.ts
+++ b/packages/feedback/src/constants/theme.ts
@@ -10,7 +10,7 @@ export const LIGHT_THEME = {
   backgroundHover: '#f6f6f7',
   foreground: '#2b2233',
   border: '1.5px solid rgba(41, 35, 47, 0.13)',
-  borderRadius: '12px',
+  borderRadius: '99px',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
   success: '#268d75',
diff --git a/packages/feedback/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts
index de295e9fc1f4..872ad3d7b48c 100644
--- a/packages/feedback/src/core/components/Actor.css.ts
+++ b/packages/feedback/src/core/components/Actor.css.ts
@@ -14,7 +14,7 @@ export function createActorStyles(): HTMLStyleElement {
   top: var(--top);
   z-index: var(--z-index);
 
-  line-height: 25px;
+  line-height: 16px;
 
   display: flex;
   align-items: center;
@@ -26,7 +26,7 @@ export function createActorStyles(): HTMLStyleElement {
   font-family: inherit;
   font-size: var(--font-size);
   font-weight: 600;
-  padding: 12px 16px;
+  padding: 16px;
   text-decoration: none;
   z-index: 9000;
 
@@ -56,6 +56,13 @@ export function createActorStyles(): HTMLStyleElement {
 .widget__actor__text {
 }
 
+@media (max-width: 600px) {
+  .widget__actor__text {
+    display: none;
+  }
+}
+
+
 .feedback-icon path {
   fill: var(--foreground);
 }

From 8a614f0f4dc9368e24bc5e4c9baeb0566936965c Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:27:34 -0400
Subject: [PATCH 2/5] lint

---
 packages/feedback/src/core/components/Actor.css.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/feedback/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts
index 872ad3d7b48c..bfc135a7c9a0 100644
--- a/packages/feedback/src/core/components/Actor.css.ts
+++ b/packages/feedback/src/core/components/Actor.css.ts
@@ -62,7 +62,6 @@ export function createActorStyles(): HTMLStyleElement {
   }
 }
 
-
 .feedback-icon path {
   fill: var(--foreground);
 }

From ead7ae7beed7d82fead1c141170aad4e51c6ffe8 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Wed, 17 Apr 2024 18:54:44 -0400
Subject: [PATCH 3/5] new config

---
 packages/feedback/src/constants/index.ts            | 2 +-
 packages/feedback/src/constants/theme.ts            | 2 +-
 packages/feedback/src/core/components/Actor.css.ts  | 6 ------
 packages/feedback/src/core/integration.ts           | 3 ++-
 packages/feedback/src/util/isMobile.ts              | 7 +++++++
 packages/feedback/src/util/isScreenshotSupported.ts | 4 ++--
 packages/types/src/feedback/config.ts               | 2 +-
 7 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 packages/feedback/src/util/isMobile.ts

diff --git a/packages/feedback/src/constants/index.ts b/packages/feedback/src/constants/index.ts
index fe4683b5ee17..f138075868a4 100644
--- a/packages/feedback/src/constants/index.ts
+++ b/packages/feedback/src/constants/index.ts
@@ -9,7 +9,7 @@ export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 export const DOCUMENT = WINDOW.document;
 export const NAVIGATOR = WINDOW.navigator;
 
-export const ACTOR_LABEL = 'Report a Bug';
+export const ACTOR_LABEL = { desktop: 'Report a Bug', mobile: '' };
 export const CANCEL_BUTTON_LABEL = 'Cancel';
 export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
 export const FORM_TITLE = 'Report a Bug';
diff --git a/packages/feedback/src/constants/theme.ts b/packages/feedback/src/constants/theme.ts
index 268abeef87aa..127cc4616062 100644
--- a/packages/feedback/src/constants/theme.ts
+++ b/packages/feedback/src/constants/theme.ts
@@ -10,7 +10,7 @@ export const LIGHT_THEME = {
   backgroundHover: '#f6f6f7',
   foreground: '#2b2233',
   border: '1.5px solid rgba(41, 35, 47, 0.13)',
-  borderRadius: '99px',
+  borderRadius: '25px',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
   success: '#268d75',
diff --git a/packages/feedback/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts
index bfc135a7c9a0..ab5b58a8ea26 100644
--- a/packages/feedback/src/core/components/Actor.css.ts
+++ b/packages/feedback/src/core/components/Actor.css.ts
@@ -56,12 +56,6 @@ export function createActorStyles(): HTMLStyleElement {
 .widget__actor__text {
 }
 
-@media (max-width: 600px) {
-  .widget__actor__text {
-    display: none;
-  }
-}
-
 .feedback-icon path {
   fill: var(--foreground);
 }
diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
index b4a513ab3b9f..bb09f85bbfb9 100644
--- a/packages/feedback/src/core/integration.ts
+++ b/packages/feedback/src/core/integration.ts
@@ -31,6 +31,7 @@ import { Actor } from './components/Actor';
 import { createMainStyles } from './createMainStyles';
 import { sendFeedback } from './sendFeedback';
 import type { OptionalFeedbackConfiguration, OverrideFeedbackConfiguration } from './types';
+import { isMobile } from '../util/isMobile';
 
 type Unsubscribe = () => void;
 
@@ -217,7 +218,7 @@ export const feedbackIntegration = (({
 
   const autoInjectActor = (): void => {
     const shadow = _createShadow(_options);
-    const actor = Actor({ buttonLabel: _options.buttonLabel, shadow });
+    const actor = Actor({ buttonLabel: (typeof _options.buttonLabel === 'object' ? (isMobile() ? _options.buttonLabel.mobile : _options.buttonLabel.desktop) : _options.buttonLabel), shadow });
     const mergedOptions = mergeOptions(_options, {
       onFormOpen() {
         actor.removeFromDom();
diff --git a/packages/feedback/src/util/isMobile.ts b/packages/feedback/src/util/isMobile.ts
new file mode 100644
index 000000000000..07e03cc75b32
--- /dev/null
+++ b/packages/feedback/src/util/isMobile.ts
@@ -0,0 +1,7 @@
+import { NAVIGATOR } from '../constants';
+/**
+ * Returns if it's a mobile browser
+ */
+export function isMobile(): boolean {
+  return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(NAVIGATOR.userAgent));
+}
diff --git a/packages/feedback/src/util/isScreenshotSupported.ts b/packages/feedback/src/util/isScreenshotSupported.ts
index a486e8f91d99..fd742e72f175 100644
--- a/packages/feedback/src/util/isScreenshotSupported.ts
+++ b/packages/feedback/src/util/isScreenshotSupported.ts
@@ -1,4 +1,4 @@
-import { NAVIGATOR } from '../constants';
+import { isMobile } from './isMobile';
 
 /**
  * Mobile browsers do not support `mediaDevices.getDisplayMedia` even though they have the api implemented
@@ -14,7 +14,7 @@ import { NAVIGATOR } from '../constants';
  * https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
  */
 export function isScreenshotSupported(): boolean {
-  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(NAVIGATOR.userAgent)) {
+  if (isMobile()) {
     return false;
   }
   if (!isSecureContext) {
diff --git a/packages/types/src/feedback/config.ts b/packages/types/src/feedback/config.ts
index 97c0465b7392..654e57f5f904 100644
--- a/packages/types/src/feedback/config.ts
+++ b/packages/types/src/feedback/config.ts
@@ -84,7 +84,7 @@ export interface FeedbackTextConfiguration {
   /**
    * The label for the Feedback widget button that opens the dialog
    */
-  buttonLabel: string;
+  buttonLabel: string | { desktop: string;  mobile: string};
 
   /**
    * The label for the Feedback form cancel button that closes dialog

From 0a2b2055f420a1e9f4d9fe11ee7049daacba7c5c Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 19 Apr 2024 18:21:02 -0400
Subject: [PATCH 4/5] Revert "new config"

This reverts commit ead7ae7beed7d82fead1c141170aad4e51c6ffe8.
---
 packages/feedback/src/constants/index.ts            | 2 +-
 packages/feedback/src/constants/theme.ts            | 2 +-
 packages/feedback/src/core/components/Actor.css.ts  | 6 ++++++
 packages/feedback/src/core/integration.ts           | 3 +--
 packages/feedback/src/util/isMobile.ts              | 7 -------
 packages/feedback/src/util/isScreenshotSupported.ts | 4 ++--
 packages/types/src/feedback/config.ts               | 2 +-
 7 files changed, 12 insertions(+), 14 deletions(-)
 delete mode 100644 packages/feedback/src/util/isMobile.ts

diff --git a/packages/feedback/src/constants/index.ts b/packages/feedback/src/constants/index.ts
index f138075868a4..fe4683b5ee17 100644
--- a/packages/feedback/src/constants/index.ts
+++ b/packages/feedback/src/constants/index.ts
@@ -9,7 +9,7 @@ export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 export const DOCUMENT = WINDOW.document;
 export const NAVIGATOR = WINDOW.navigator;
 
-export const ACTOR_LABEL = { desktop: 'Report a Bug', mobile: '' };
+export const ACTOR_LABEL = 'Report a Bug';
 export const CANCEL_BUTTON_LABEL = 'Cancel';
 export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
 export const FORM_TITLE = 'Report a Bug';
diff --git a/packages/feedback/src/constants/theme.ts b/packages/feedback/src/constants/theme.ts
index 127cc4616062..268abeef87aa 100644
--- a/packages/feedback/src/constants/theme.ts
+++ b/packages/feedback/src/constants/theme.ts
@@ -10,7 +10,7 @@ export const LIGHT_THEME = {
   backgroundHover: '#f6f6f7',
   foreground: '#2b2233',
   border: '1.5px solid rgba(41, 35, 47, 0.13)',
-  borderRadius: '25px',
+  borderRadius: '99px',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
   success: '#268d75',
diff --git a/packages/feedback/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts
index ab5b58a8ea26..bfc135a7c9a0 100644
--- a/packages/feedback/src/core/components/Actor.css.ts
+++ b/packages/feedback/src/core/components/Actor.css.ts
@@ -56,6 +56,12 @@ export function createActorStyles(): HTMLStyleElement {
 .widget__actor__text {
 }
 
+@media (max-width: 600px) {
+  .widget__actor__text {
+    display: none;
+  }
+}
+
 .feedback-icon path {
   fill: var(--foreground);
 }
diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
index bb09f85bbfb9..b4a513ab3b9f 100644
--- a/packages/feedback/src/core/integration.ts
+++ b/packages/feedback/src/core/integration.ts
@@ -31,7 +31,6 @@ import { Actor } from './components/Actor';
 import { createMainStyles } from './createMainStyles';
 import { sendFeedback } from './sendFeedback';
 import type { OptionalFeedbackConfiguration, OverrideFeedbackConfiguration } from './types';
-import { isMobile } from '../util/isMobile';
 
 type Unsubscribe = () => void;
 
@@ -218,7 +217,7 @@ export const feedbackIntegration = (({
 
   const autoInjectActor = (): void => {
     const shadow = _createShadow(_options);
-    const actor = Actor({ buttonLabel: (typeof _options.buttonLabel === 'object' ? (isMobile() ? _options.buttonLabel.mobile : _options.buttonLabel.desktop) : _options.buttonLabel), shadow });
+    const actor = Actor({ buttonLabel: _options.buttonLabel, shadow });
     const mergedOptions = mergeOptions(_options, {
       onFormOpen() {
         actor.removeFromDom();
diff --git a/packages/feedback/src/util/isMobile.ts b/packages/feedback/src/util/isMobile.ts
deleted file mode 100644
index 07e03cc75b32..000000000000
--- a/packages/feedback/src/util/isMobile.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { NAVIGATOR } from '../constants';
-/**
- * Returns if it's a mobile browser
- */
-export function isMobile(): boolean {
-  return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(NAVIGATOR.userAgent));
-}
diff --git a/packages/feedback/src/util/isScreenshotSupported.ts b/packages/feedback/src/util/isScreenshotSupported.ts
index fd742e72f175..a486e8f91d99 100644
--- a/packages/feedback/src/util/isScreenshotSupported.ts
+++ b/packages/feedback/src/util/isScreenshotSupported.ts
@@ -1,4 +1,4 @@
-import { isMobile } from './isMobile';
+import { NAVIGATOR } from '../constants';
 
 /**
  * Mobile browsers do not support `mediaDevices.getDisplayMedia` even though they have the api implemented
@@ -14,7 +14,7 @@ import { isMobile } from './isMobile';
  * https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
  */
 export function isScreenshotSupported(): boolean {
-  if (isMobile()) {
+  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(NAVIGATOR.userAgent)) {
     return false;
   }
   if (!isSecureContext) {
diff --git a/packages/types/src/feedback/config.ts b/packages/types/src/feedback/config.ts
index 654e57f5f904..97c0465b7392 100644
--- a/packages/types/src/feedback/config.ts
+++ b/packages/types/src/feedback/config.ts
@@ -84,7 +84,7 @@ export interface FeedbackTextConfiguration {
   /**
    * The label for the Feedback widget button that opens the dialog
    */
-  buttonLabel: string | { desktop: string;  mobile: string};
+  buttonLabel: string;
 
   /**
    * The label for the Feedback form cancel button that closes dialog

From 70e56cc45bf0ee3c4aa61b6479e5f236d9b09b49 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 19 Apr 2024 18:37:28 -0400
Subject: [PATCH 5/5] PR comments

---
 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 268abeef87aa..127cc4616062 100644
--- a/packages/feedback/src/constants/theme.ts
+++ b/packages/feedback/src/constants/theme.ts
@@ -10,7 +10,7 @@ export const LIGHT_THEME = {
   backgroundHover: '#f6f6f7',
   foreground: '#2b2233',
   border: '1.5px solid rgba(41, 35, 47, 0.13)',
-  borderRadius: '99px',
+  borderRadius: '25px',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
   success: '#268d75',