6 files changed, 61 insertions, 38 deletions
diff --git a/FrontEnd/src/views/about/index.tsx b/FrontEnd/src/views/about/index.tsx
index 7a72d5ec..8a358014 100644
--- a/FrontEnd/src/views/about/index.tsx
+++ b/FrontEnd/src/views/about/index.tsx
@@ -72,16 +72,16 @@ const AboutPage: React.FC = () => {
           <div className="d-flex">
             <img
               src={authorAvatarUrl}
-              className="align-self-start avatar large rounded-circle"
+              className="align-self-start cru-avatar large cru-round"
             />
             <div>
               <p>
                 <small>{t("about.author.fullname")}</small>
-                <span className="text-primary">杨宇千</span>
+                <span className="tl-color-primary">杨宇千</span>
               </p>
               <p>
                 <small>{t("about.author.nickname")}</small>
-                <span className="text-primary">crupest</span>
+                <span className="tl-color-primary">crupest</span>
               </p>
               <p>
                 <small>{t("about.author.introduction")}</small>
@@ -96,7 +96,7 @@ const AboutPage: React.FC = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <img src={githubLogoUrl} className="about-link-icon text-body" />
+              <img src={githubLogoUrl} className="about-link-icon" />
             </a>
           </p>
         </div>
@@ -105,7 +105,7 @@ const AboutPage: React.FC = () => {
         <h4>{t("about.site.title")}</h4>
         <p>
           <Trans i18nKey="about.site.content">
-            0<span className="text-primary">1</span>2<b>3</b>4
+            0<span className="tl-color-primary">1</span>2<b>3</b>4
             <a href="#author-info">5</a>6
           </Trans>
         </p>
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;