5 files changed, 56 insertions, 33 deletions
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css
index c6f4e184..16572817 100644
--- a/FrontEnd/src/views/common/AppBar.css
+++ b/FrontEnd/src/views/common/AppBar.css
@@ -10,6 +10,11 @@
   background-color: var(--tl-primary-color);
   transition: background-color 1s;
 }
+
+.app-bar .cru-avatar {
+  background-color: white;
+}
+
 .app-bar a {
   color: var(--tl-text-on-primary-r1-color);
   text-decoration: none;
diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/views/common/AppBar.tsx
index 7ec0a5eb..5d62a88d 100644
--- a/FrontEnd/src/views/common/AppBar.tsx
+++ b/FrontEnd/src/views/common/AppBar.tsx
@@ -68,7 +68,7 @@ const AppBar: React.FC = (_) => {
                 "/",
                 <UserAvatar
                   username={user.username}
-                  className="avatar small rounded-circle bg-white cursor-pointer ml-auto"
+                  className="cru-avatar small cru-round cursor-pointer ml-auto"
                 />,
                 "app-bar-avatar"
               )
diff --git a/FrontEnd/src/views/common/ImageCropper.css b/FrontEnd/src/views/common/ImageCropper.css
new file mode 100644
index 00000000..2c4d0a8c
--- /dev/null
+++ b/FrontEnd/src/views/common/ImageCropper.css
@@ -0,0 +1,38 @@
+.image-cropper-container {
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.image-cropper-container img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.image-cropper-mask-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.image-cropper-mask {
+  position: absolute;
+  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 0.8);
+  touch-action: none;
+}
+
+.image-cropper-handler {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border: black solid 2px;
+  border-radius: 50%;
+  background: white;
+  touch-action: none;
+}
diff --git a/FrontEnd/src/views/common/ImageCropper.tsx b/FrontEnd/src/views/common/ImageCropper.tsx
index 2ef5b7ed..be44200a 100644
--- a/FrontEnd/src/views/common/ImageCropper.tsx
+++ b/FrontEnd/src/views/common/ImageCropper.tsx
@@ -3,6 +3,8 @@ import classnames from "classnames";
 
 import { UiLogicError } from "@/common";
 
+import "./ImageCropper.css";
+
 export interface Clip {
   left: number;
   top: number;
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index f580c781..aaaaad58 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -1,40 +1,20 @@
-.image-cropper-container {
-  position: relative;
-  box-sizing: border-box;
-  user-select: none;
+.cru-avatar {
+  width: 60px;
+  height: 60px;
 }
 
-.image-cropper-container img {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.image-cropper-mask-container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
+.cru-avatar.large {
+  width: 100px;
+  height: 100px;
 }
 
-.image-cropper-mask {
-  position: absolute;
-  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 0.8);
-  touch-action: none;
+.cru-avatar.small {
+  width: 40px;
+  height: 40px;
 }
 
-.image-cropper-handler {
-  position: absolute;
-  width: 26px;
-  height: 26px;
-  border: black solid 2px;
+.cru-round {
   border-radius: 50%;
-  background: white;
-  touch-action: none;
 }
 
 .cru-skeleton {
@@ -157,8 +137,6 @@
   align-items: center;
 }
 
-
-
 .alert-container {
   position: fixed;
   z-index: 1070;