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

Backport of #11641 to v7
getsentry · Apr 30, 2024 · 6f7095d · 6f7095d
1 parent 77a51bd
commit 6f7095d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/feedback/src/constants.ts b/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',

diff --git a/packages/feedback/src/widget/Actor.css.ts b/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);
 }