...

7 files changed, 75 insertions, 65 deletions

diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css
index d4efabed..4adc1844 100644
--- a/FrontEnd/src/index.css
+++ b/FrontEnd/src/index.css
@@ -2,6 +2,8 @@
 @import "bootstrap/dist/css/bootstrap-grid.css";

 @import "bootstrap-icons/font/bootstrap-icons.css";

 

+@import "./views/common/index.css";

+

 :root {

   --tl-background-color: #f8f9fa;

 

@@ -98,18 +100,26 @@
   --tl-success-r3-color: rgb(0, 243, 0);

 }

 

-body {

-  background: var(--tl-background-color);

-}

-

 .tl-color-primary {

   color: var(--tl-primary-color);

 }

 

+.tl-color-secondary {

+  color: var(--tl-secondary-color);

+}

+

+.tl-color-success {

+  color: var(--tl-success-color);

+}

+

 .tl-color-danger {

   color: var(--tl-danger-color);

 }

 

+body {

+  background: var(--tl-background-color);

+}

+

 small {

   line-height: 1.2;

 }

@@ -119,21 +129,6 @@ small {
   flex-shrink: 0;

 }

 

-.avatar {

-  width: 60px;

-  height: 60px;

-}

-

-.avatar.large {

-  width: 100px;

-  height: 100px;

-}

-

-.avatar.small {

-  width: 40px;

-  height: 40px;

-}

-

 .icon-button {

   font-size: 1.4rem;

   cursor: pointer;

@@ -168,14 +163,6 @@ textarea {
   align-items: center;

 }

 

-.text-orange {

-  color: #fd7e14;

-}

-

-.text-yellow {

-  color: #ffc107;

-}

-

 .touch-action-none {

   touch-action: none;

 }

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;