feat(feedback): [v7] New feedback button design (#11841)

Backport of #11641 to
v7

Author: c298lee

packages/feedback/src/constants.ts

@@ -16,7 +16,7 @@ const LIGHT_THEME = {
   backgroundHover: '#f6f6f7',
   foreground: '#2b2233',
   border: '1.5px solid rgba(41, 35, 47, 0.13)',
-  borderRadius: '12px',
+  borderRadius: '25px',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
   success: '#268d75',

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

@@ -5,7 +5,14 @@ export function createActorStyles(d: Document): HTMLStyleElement {
   const style = d.createElement('style');
   style.textContent = `
 .widget__actor {
-  line-height: 25px;
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
+  line-height: 16px;
 
   display: flex;
   align-items: center;
@@ -16,7 +23,7 @@ export function createActorStyles(d: Document): HTMLStyleElement {
   font-family: inherit;
   font-size: var(--font-size);
   font-weight: 600;
-  padding: 12px 16px;
+  padding: 16px;
   text-decoration: none;
   z-index: 9000;
 
@@ -46,6 +53,12 @@ export function createActorStyles(d: Document): HTMLStyleElement {
 .widget__actor__text {
 }
 
+@media (max-width: 600px) {
+  .widget__actor__text {
+    display: none;
+  }
+}
+
 .feedback-icon path {
   fill: var(--foreground);
 }