fix(html): update ImageEditor button icons and checkbox label

Author: TeyaVes

packages/html/src/imageeditor/templates/imageeditor-crop.tsx

@@ -1,7 +1,7 @@
 import { ImageEditor } from "..";
 import { ButtonGroup, ToolbarItem, ToolbarSeparator } from "../..";
 import { Button } from "../../button";
-import { Checkbox } from "../../checkbox";
+import { CheckboxWithLabelAfter } from "../../checkbox";
 import { DropdownList } from "../../dropdownlist";
 import { FormNormal, Fieldset, FormField } from "../../form";
 import { NumericTextbox } from "../../numerictextbox";
@@ -26,8 +26,8 @@ export const ImageEditorCrop = (props: any) => (
         actionPane={
             <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                 <>
-                    <Button themeColor="primary">Confirm</Button>
-                    <Button>Cancel</Button>
+                    <Button themeColor="primary" icon="check">Confirm</Button>
+                    <Button icon="cancel-outline">Cancel</Button>
                 </>
             }>
                 <Fieldset layout="grid" legend="Crop Image" cols={2} gapX={2}>
@@ -58,8 +58,7 @@ export const ImageEditorCrop = (props: any) => (
                     />
                     <FormField
                         colSpan="2"
-                        label="Lock aspect ratio:"
-                        editor={ <Checkbox /> }
+                        editor={ <CheckboxWithLabelAfter>Lock aspect ratio</CheckboxWithLabelAfter> }
                     />
                 </Fieldset>
             </FormNormal>

packages/html/src/imageeditor/templates/imageeditor-resize.tsx

@@ -1,6 +1,6 @@
 import { ImageEditor } from "..";
 import { Button } from "../../button";
-import { Checkbox } from "../../checkbox";
+import { CheckboxWithLabelAfter } from "../../checkbox";
 import { DropdownList } from "../../dropdownlist";
 import { FormNormal, Fieldset, FormField } from "../../form";
 import { NumericTextbox } from "../../numerictextbox";
@@ -26,8 +26,8 @@ export const ImageEditorResize = (props: any) => (
         actionPane={
             <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                 <>
-                    <Button themeColor="primary">Confirm</Button>
-                    <Button>Cancel</Button>
+                    <Button themeColor="primary" icon="check">Confirm</Button>
+                    <Button icon="cancel-outline">Cancel</Button>
                 </>
             }>
                 <Fieldset layout="grid" legend="Resize Image" cols={2} gapX={2}>
@@ -53,8 +53,7 @@ export const ImageEditorResize = (props: any) => (
                     />
                     <FormField
                         colSpan="2"
-                        label="Lock aspect ratio:"
-                        editor={ <Checkbox /> }
+                        editor={ <CheckboxWithLabelAfter>Lock aspect ratio</CheckboxWithLabelAfter> }
                     />
                 </Fieldset>
             </FormNormal>