custom rectangle outline colour

Author: c298lee

packages/feedback/src/screenshot/components/ScreenshotEditorv2.tsx

@@ -94,7 +94,14 @@ function drawRect(rect: Rect, ctx: CanvasRenderingContext2D, scale: number = 1,
   ctx.shadowColor = 'transparent';
   ctx.shadowBlur = 0;
 
-  ctx.strokeStyle = '#ff0000';
+  let strokeColor;
+  const sentryFeedback = DOCUMENT.getElementById('sentry-feedback');
+  if (sentryFeedback) {
+    strokeColor =
+      getComputedStyle(sentryFeedback).getPropertyValue('--button-primary-background') ||
+      getComputedStyle(sentryFeedback).getPropertyValue('--accent-background');
+  }
+  ctx.strokeStyle = strokeColor || 'white';
   ctx.lineWidth = lineWidth;
   ctx.strokeRect(scaledX + 1, scaledY + 1, scaledWidth - 2, scaledHeight - 2);
 }

packages/feedback/src/screenshot/components/ScreenshotInput.css.ts

@@ -132,12 +132,12 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   border: var(--button-border, var(--border));
   border-radius: var(--button-border-radius, 6px);
   background: var(--button-background, var(--background));
-  color: var(--button-foreground, var(--foreground));
+  color: var(--button-color, var(--foreground));
 }
 
 .editor__tool--active {
   background: var(--button-primary-background, var(--accent-background));
-  color: var(--button-primary-foreground, var(--accent-foreground));
+  color: var(--button-primary-color, var(--accent-foreground));
 }
 
 .editor__rect-container {