new config

Author: c298lee

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';

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',

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);
 }

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();

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));
+}

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) {

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