From b767c7d23d031c58c594570d55933e40065495ae Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Jun 2021 20:03:40 +0800
Subject: ...

---
 FrontEnd/src/index.css                     | 41 ++++++++++-------------------
 FrontEnd/src/views/about/index.tsx         | 10 +++----
 FrontEnd/src/views/common/AppBar.css       |  5 ++++
 FrontEnd/src/views/common/AppBar.tsx       |  2 +-
 FrontEnd/src/views/common/ImageCropper.css | 38 +++++++++++++++++++++++++++
 FrontEnd/src/views/common/ImageCropper.tsx |  2 ++
 FrontEnd/src/views/common/index.css        | 42 +++++++-----------------------
 7 files changed, 75 insertions(+), 65 deletions(-)
 create mode 100644 FrontEnd/src/views/common/ImageCropper.css

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;
-- 
cgit v1.2.3