3 files changed, 20 insertions, 15 deletions
diff --git a/FrontEnd/src/components/BlobImage.tsx b/FrontEnd/src/components/BlobImage.tsx
index cccf2f74..047a13b4 100644
--- a/FrontEnd/src/components/BlobImage.tsx
+++ b/FrontEnd/src/components/BlobImage.tsx
@@ -1,7 +1,13 @@
-import { ComponentPropsWithoutRef, useState, useEffect, useMemo } from "react";
+import {
+  useState,
+  useEffect,
+  useMemo,
+  Ref,
+  ComponentPropsWithoutRef,
+} from "react";
 
 type BlobImageProps = Omit<ComponentPropsWithoutRef<"img">, "src"> & {
-  imgRef?: React.Ref<HTMLImageElement>;
+  imgRef?: Ref<HTMLImageElement>;
   src?: Blob | string | null;
   keyBySrc?: boolean;
 };
diff --git a/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx b/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx
index 96ae971b..0df10411 100644
--- a/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx
@@ -109,7 +109,6 @@ export default function ChangeAvatarDialog() {
 
   const cancelButton = {
     key: "cancel",
-    action: "secondary",
     text: "operationDialog.cancel",
     onClick: close,
   } as const;
@@ -117,7 +116,6 @@ export default function ChangeAvatarDialog() {
   const createPreviousButton = (onClick: () => void) =>
     ({
       key: "previous",
-      action: "secondary",
       text: "operationDialog.previousStep",
       onClick,
     }) as const;
@@ -130,7 +128,7 @@ export default function ChangeAvatarDialog() {
       cancelButton,
       {
         key: "next",
-        action: "primary",
+        action: "major",
         text: "operationDialog.nextStep",
         onClick: () => setState("crop"),
         disabled: file == null,
@@ -141,7 +139,7 @@ export default function ChangeAvatarDialog() {
       createPreviousButton(onCropPrevious),
       {
         key: "next",
-        action: "primary",
+        action: "major",
         text: "operationDialog.nextStep",
         onClick: onCropNext,
         disabled: !canCrop,
@@ -153,7 +151,7 @@ export default function ChangeAvatarDialog() {
       createPreviousButton(onPreviewPrevious),
       {
         key: "upload",
-        action: "primary",
+        action: "major",
         text: "settings.dialogChangeAvatar.upload",
         onClick: upload,
       },
@@ -171,7 +169,7 @@ export default function ChangeAvatarDialog() {
       cancelButton,
       {
         key: "retry",
-        action: "primary",
+        action: "major",
         text: "operationDialog.retry",
         onClick: upload,
       },
diff --git a/FrontEnd/src/utilities/geometry.ts b/FrontEnd/src/utilities/geometry.ts
index 12dd4bbb..60a8d3d4 100644
--- a/FrontEnd/src/utilities/geometry.ts
+++ b/FrontEnd/src/utilities/geometry.ts
@@ -49,7 +49,7 @@ export class Rect {
   }
 
   set right(value: number) {
-    this.width = this.left + value;
+    this.width = value - this.left;
   }
 
   get bottom(): number {
@@ -57,7 +57,7 @@ export class Rect {
   }
 
   set bottom(value: number) {
-    this.height = this.top + value;
+    this.height = value - this.top;
   }
 
   get ratio(): number {
@@ -218,15 +218,16 @@ export function adjustRectToContainer(
         : clamp(rect.top, container.top - rect.height, container.bottom);
   } else if (mode === "resize") {
     const noFlip = options?.resizeNoFlip;
-    rect.right = clamp(
+    const newRight = clamp(
       rect.right,
-      noFlip ? 0 : container.left,
-      container.right,
+      rect.width > 0 && noFlip ? rect.left : container.left,
+      rect.width < 0 && noFlip ? rect.left : container.right,
     );
+    rect.right = newRight;
     rect.bottom = clamp(
       rect.bottom,
-      noFlip ? 0 : container.top,
-      container.bottom,
+      rect.height > 0 && noFlip ? rect.top : container.top,
+      rect.height < 0 && noFlip ? rect.top : container.bottom,
     );
   } else {
     rect.left = clamp(rect.left, container.left, container.right);