feat(feedback): New feedback button design (#11641)

Updates feedback actor button with new designs. The button doesn't show
the label on small viewports now.
Window over 600px:
<img width="167" alt="image"
src="https://github.com/getsentry/sentry-javascript/assets/55311782/1e6cef63-288b-42d1-af07-edbcf32718d6">
Window under 600px:
<img width="167" alt="image"
src="https://github.com/getsentry/sentry-javascript/assets/55311782/c79520a4-f30e-4012-ac5a-b923ab19da0b">

Fixes #11541 and
https://github.com/getsentry/team-replay/issues/413

Author: c298lee

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: '25px',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
   success: '#268d75',

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,12 @@ export function createActorStyles(): HTMLStyleElement {
 .widget__actor__text {
 }
 
+@media (max-width: 600px) {
+  .widget__actor__text {
+    display: none;
+  }
+}
+
 .feedback-icon path {
   fill: var(--foreground);
 }