feat(user feedback): Create pen tool button for uf annotations

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

@@ -0,0 +1,31 @@
+import type { VNode, h as hType } from 'preact';
+
+interface FactoryParams {
+  h: typeof hType;
+}
+
+export default function PenIconFactory({
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+}: FactoryParams) {
+  return function PenIcon(): VNode {
+    return (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M8.5 12L12 8.5L14 11L11 14L8.5 12Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12 8.5L11 3.5L2 2L3.5 11L8.5 12L12 8.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path d="M2 2L7.5 7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  };
+}

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

@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
 import type * as Hooks from 'preact/hooks';
 import { DOCUMENT, WINDOW } from '../../constants';
 import CropCornerFactory from './CropCorner';
+import PenIconFactory from './PenIcon';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshotFactory } from './useTakeScreenshot';
 
@@ -72,10 +73,11 @@ export function ScreenshotEditorFactory({
   options,
 }: FactoryParams): ComponentType<Props> {
   const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
+  const CropCorner = CropCornerFactory({ h });
+  const PenIcon = PenIconFactory({ h });
 
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
-    const CropCorner = CropCornerFactory({ h });
 
     const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
     const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
@@ -393,14 +395,25 @@ export function ScreenshotEditorFactory({
       <div class="editor">
         <style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
         {options._experiments.annotations && (
-          <button
-            class="editor__pen-tool"
-            style={{ background: isAnnotating ? 'red' : 'white' }}
-            onClick={e => {
-              e.preventDefault();
-              setIsAnnotating(!isAnnotating);
-            }}
-          ></button>
+          <div class="editor__tool-container">
+            <button
+              class="editor__pen-tool"
+              style={{
+                background: isAnnotating
+                  ? 'var(--button-primary-background, var(--accent-background))'
+                  : 'var(--button-background, var(--background))',
+                color: isAnnotating
+                  ? 'var(--button-primary-foreground, var(--accent-foreground))'
+                  : 'var(--button-foreground, var(--foreground))',
+              }}
+              onClick={e => {
+                e.preventDefault();
+                setIsAnnotating(!isAnnotating);
+              }}
+            >
+              <PenIcon />
+            </button>
+          </div>
         )}
         <div class="editor__canvas-container" ref={canvasContainerRef}>
           <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>

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

@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   padding-top: 65px;
   padding-bottom: 65px;
   flex-grow: 1;
+  position: relative;
 
   background-color: ${surface200};
   background-image: repeating-linear-gradient(
@@ -55,7 +56,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   padding: 8px;
   gap: 8px;
   border-radius: var(--menu-border-radius, 6px);
-  background: var(--button-primary-background, var(--background));
+  background: var(--button-background, var(--background));
   width: 175px;
   position: absolute;
 }
@@ -88,9 +89,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   border-left: none;
   border-top: none;
 }
+.editor__tool-container {
+  position: absolute;
+  padding: 10px 0px;
+  top: 0;
+}
 .editor__pen-tool {
-  width: 30px;
   height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: var(--button-border, var(--border));
+  border-radius: var(--button-border-radius, 6px);
 }
 `;