fix BEM naming

Author: c298lee

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

@@ -245,8 +245,8 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     return (
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
-        <div class="container--canvas" ref={canvasContainerRef}>
-          <div class="container--crop-btn" style={{ position: 'absolute' }} ref={cropContainerRef}>
+        <div class="editor__canvas-container" ref={canvasContainerRef}>
+          <div class="editor__crop-container" style={{ position: 'absolute' }} ref={cropContainerRef}>
             <canvas style={{ position: 'absolute' }} ref={croppingRef}></canvas>
             <CropCorner
               left={croppingRect.startX}
@@ -278,7 +278,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
                 top: Math.max(0, croppingRect.endY + 8),
                 display: confirmCrop ? 'flex' : 'none',
               }}
-              class="crop-btn-group"
+              class="editor__crop-btn-group"
             >
               <button
                 onClick={e => {
@@ -328,7 +328,7 @@ function CropCorner({
 }): VNode {
   return (
     <button
-      class={`${corner} crop-btn`}
+      class={`editor__crop-corner editor__crop-corner--${corner} `}
       style={{
         top: top,
         left: left,

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

@@ -38,19 +38,19 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
     );
 }
 
-.container--canvas {
+.editor__canvas-container {
   width: 100%;
   height: 100%;
   position: relative;
 }
 
-.container--canvas canvas {
+.editor__canvas-container canvas {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
 
-.crop-btn-group {
+.editor__crop-btn-group {
   padding: 8px;
   gap: 8px;
   border-radius: var(--form-content-border-radius);
@@ -59,7 +59,7 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
   position: absolute;
 }
 
-.crop-btn {
+.editor__crop-corner {
   width: 30px;
   height: 30px;
   position: absolute;
@@ -68,22 +68,22 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
   border-width: 3px;
 }
 
-.top-left {
+.editor__crop-corner--top-left {
   cursor: nwse-resize;
   border-right: none;
   border-bottom: none;
 }
-.top-right {
+.editor__crop-corner--top-right {
   cursor: nesw-resize;
   border-left: none;
   border-bottom: none;
 }
-.bottom-left {
+.editor__crop-corner--bottom-left {
   cursor: nesw-resize;
   border-right: none;
   border-top: none;
 }
-.bottom-right {
+.editor__crop-corner--bottom-right {
   cursor: nwse-resize;
   border-left: none;
   border-top: none;