customize crop color, BES naming & padding

Author: c298lee

packages/feedback/src/constants/theme.ts

@@ -37,6 +37,8 @@ export const LIGHT_THEME = {
 
   formBorderRadius: '20px',
   formContentBorderRadius: '6px',
+
+  cropForeground: 'var(--submit-background)',
 };
 
 export const DEFAULT_THEME = {

packages/feedback/src/core/createMainStyles.ts

@@ -33,6 +33,8 @@ function getThemedCssVariables(theme: FeedbackTheme): string {
 
   --form-border-radius: ${theme.formBorderRadius};
   --form-content-border-radius: ${theme.formContentBorderRadius};
+
+  --crop-foreground: ${theme.cropForeground};
   `;
 }
 

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

@@ -71,6 +71,9 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     const [croppingRect, setCroppingRect] = useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
     const [confirmCrop, setConfirmCrop] = useState(false);
 
+    const cropStyle =
+      croppingRef.current && getComputedStyle(croppingRef.current).getPropertyValue('--crop-foreground');
+
     useEffect(() => {
       WINDOW.addEventListener('resize', resizeCropper, false);
     }, []);
@@ -115,7 +118,9 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       ctx.clearRect(croppingBox.x, croppingBox.y, croppingBox.width, croppingBox.height);
 
       // draw selection border
-      ctx.strokeStyle = 'purple';
+      if (cropStyle) {
+        ctx.strokeStyle = cropStyle;
+      }
       ctx.lineWidth = 3;
       ctx.strokeRect(croppingBox.x, croppingBox.y, croppingBox.width, croppingBox.height);
     }, [croppingRect]);
@@ -143,28 +148,28 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
         const mouseX = e.clientX - cropBoundingRect.x;
         const mouseY = e.clientY - cropBoundingRect.y;
         switch (corner) {
-          case 'topleft':
+          case 'top-left':
             setCroppingRect(prev => ({
               ...prev,
               startX: Math.min(Math.max(0, mouseX), prev.endX - CROP_BUTTON_OFFSET),
               startY: Math.min(Math.max(0, mouseY), prev.endY - CROP_BUTTON_OFFSET),
             }));
             break;
-          case 'topright':
+          case 'top-right':
             setCroppingRect(prev => ({
               ...prev,
               endX: Math.max(Math.min(mouseX, cropCanvas.width), prev.startX + CROP_BUTTON_OFFSET),
               startY: Math.min(Math.max(0, mouseY), prev.endY - CROP_BUTTON_OFFSET),
             }));
             break;
-          case 'bottomleft':
+          case 'bottom-left':
             setCroppingRect(prev => ({
               ...prev,
               startX: Math.min(Math.max(0, mouseX), prev.endX - CROP_BUTTON_OFFSET),
               endY: Math.max(Math.min(mouseY, cropCanvas.height), prev.startY + CROP_BUTTON_OFFSET),
             }));
             break;
-          case 'bottomright':
+          case 'bottom-right':
             setCroppingRect(prev => ({
               ...prev,
               endX: Math.max(Math.min(mouseX, cropCanvas.width), prev.startX + CROP_BUTTON_OFFSET),
@@ -240,32 +245,32 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     return (
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
-        <div class="canvasContainer" ref={canvasContainerRef}>
-          <div class="cropButtonContainer" style={{ position: 'absolute' }} ref={cropContainerRef}>
+        <div class="container--canvas" ref={canvasContainerRef}>
+          <div class="container--crop-btn" style={{ position: 'absolute' }} ref={cropContainerRef}>
             <canvas style={{ position: 'absolute' }} ref={croppingRef}></canvas>
             <CropCorner
               left={croppingRect.startX}
               top={croppingRect.startY}
               onGrabButton={onGrabButton}
-              corner="topleft"
+              corner="top-left"
             ></CropCorner>
             <CropCorner
               left={croppingRect.endX - CROP_BUTTON_SIZE}
               top={croppingRect.startY}
               onGrabButton={onGrabButton}
-              corner="topright"
+              corner="top-right"
             ></CropCorner>
             <CropCorner
               left={croppingRect.startX}
               top={croppingRect.endY - CROP_BUTTON_SIZE}
               onGrabButton={onGrabButton}
-              corner="bottomleft"
+              corner="bottom-left"
             ></CropCorner>
             <CropCorner
               left={croppingRect.endX - CROP_BUTTON_SIZE}
               top={croppingRect.endY - CROP_BUTTON_SIZE}
               onGrabButton={onGrabButton}
-              corner="bottomright"
+              corner="bottom-right"
             ></CropCorner>
             <div
               style={{
@@ -323,16 +328,10 @@ function CropCorner({
 }): VNode {
   return (
     <button
-      class="crop-btn"
+      class={`${corner} crop-btn`}
       style={{
         top: top,
         left: left,
-        borderTop: corner === 'topleft' || corner === 'topright' ? 'solid purple' : 'none',
-        borderLeft: corner === 'topleft' || corner === 'bottomleft' ? 'solid purple' : 'none',
-        borderRight: corner === 'topright' || corner === 'bottomright' ? 'solid purple' : 'none',
-        borderBottom: corner === 'bottomleft' || corner === 'bottomright' ? 'solid purple' : 'none',
-        borderWidth: `${CROP_BUTTON_BORDER}px`,
-        cursor: corner === 'topleft' || corner === 'bottomright' ? 'nwse-resize' : 'nesw-resize',
       }}
       onMouseDown={e => {
         e.preventDefault();

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

@@ -16,6 +16,9 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
 }
 
 .editor {
+  padding: 10px;
+  padding-top: 65px;
+  padding-bottom: 65px;
   flex-grow: 1;
 
   background-color: ${surface200};
@@ -35,23 +38,18 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
     );
 }
 
-.canvasContainer {
+.container--canvas {
   width: 100%;
   height: 100%;
   position: relative;
 }
 
-.canvasContainer canvas {
+.container--canvas canvas {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
 
-.cropper {
-  width: 100%;
-  height: 100%;
-}
-
 .crop-btn-group {
   padding: 8px;
   gap: 8px;
@@ -66,6 +64,29 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
   height: 30px;
   position: absolute;
   background: none;
+  border: solid var(--crop-foreground);
+  border-width: 3px;
+}
+
+.top-left {
+  cursor: nwse-resize;
+  border-right: none;
+  border-bottom: none;
+}
+.top-right {
+  cursor: nesw-resize;
+  border-left: none;
+  border-bottom: none;
+}
+.bottom-left {
+  cursor: nesw-resize;
+  border-right: none;
+  border-top: none;
+}
+.bottom-right {
+  cursor: nwse-resize;
+  border-left: none;
+  border-top: none;
 }
 `;
 

packages/feedback/src/types/theme.ts

@@ -115,4 +115,8 @@ export interface FeedbackTheme {
    * Border radius for form inputs
    */
   formContentBorderRadius: string;
+  /**
+   * Foreground colour for cropping
+   */
+  cropForeground: string;
 }