From 1f242271a98900ca0a72a13ab05efbf65090df0d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Jun 2021 17:04:25 +0800
Subject: ...

---
 FrontEnd/src/index.css                             | 10 ----------
 FrontEnd/src/views/about/index.tsx                 | 14 ++++++++------
 FrontEnd/src/views/center/TimelineBoard.tsx        |  5 +++--
 FrontEnd/src/views/common/Card.css                 | 11 +++++++++++
 FrontEnd/src/views/common/Card.tsx                 | 22 ++++++++++++++++++++++
 FrontEnd/src/views/settings/index.tsx              |  9 +++++----
 .../timeline-common/TimelinePageCardTemplate.tsx   |  7 ++++---
 7 files changed, 53 insertions(+), 25 deletions(-)
 create mode 100644 FrontEnd/src/views/common/Card.css
 create mode 100644 FrontEnd/src/views/common/Card.tsx

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css
index ff8c1866..8d428774 100644
--- a/FrontEnd/src/index.css
+++ b/FrontEnd/src/index.css
@@ -53,16 +53,6 @@ textarea {
   white-space: nowrap;
 }
 
-.cru-card {
-  border: 1px solid;
-  border-color: #e9ecef;
-  background: #f8f9fa;
-  transition: all 0.3s;
-}
-
-.cru-card:hover {
-  border-color: var(--tl-primary-color);
-}
 
 .full-viewport-center-child {
   position: fixed;
diff --git a/FrontEnd/src/views/about/index.tsx b/FrontEnd/src/views/about/index.tsx
index db4814c4..7b0e50b0 100644
--- a/FrontEnd/src/views/about/index.tsx
+++ b/FrontEnd/src/views/about/index.tsx
@@ -4,6 +4,8 @@ import { useTranslation, Trans } from "react-i18next";
 import authorAvatarUrl from "./author-avatar.png";
 import githubLogoUrl from "./github.png";
 
+import Card from "../common/Card";
+
 import "./index.css";
 
 const frontendCredits: {
@@ -68,7 +70,7 @@ const AboutPage: React.FC = () => {
 
   return (
     <div className="px-2 mb-4">
-      <div className="container mt-4 py-3 cru-card">
+      <Card className="container mt-4 py-3">
         <h4 id="author-info">{t("about.author.title")}</h4>
         <div>
           <div className="d-flex">
@@ -102,8 +104,8 @@ const AboutPage: React.FC = () => {
             </a>
           </p>
         </div>
-      </div>
-      <div className="container mt-4 py-3 cru-card">
+      </Card>
+      <Card className="container mt-4 py-3">
         <h4>{t("about.site.title")}</h4>
         <p>
           <Trans i18nKey="about.site.content">
@@ -120,8 +122,8 @@ const AboutPage: React.FC = () => {
             {t("about.site.repo")}
           </a>
         </p>
-      </div>
-      <div className="container mt-4 py-3 cru-card">
+      </Card>
+      <Card className="container mt-4 py-3">
         <h4>{t("about.credits.title")}</h4>
         <p>{t("about.credits.content")}</p>
         <p>{t("about.credits.frontend")}</p>
@@ -150,7 +152,7 @@ const AboutPage: React.FC = () => {
           })}
           <li>...</li>
         </ul>
-      </div>
+      </Card>
     </div>
   );
 };
diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx
index e0a2d80e..7b9981e5 100644
--- a/FrontEnd/src/views/center/TimelineBoard.tsx
+++ b/FrontEnd/src/views/center/TimelineBoard.tsx
@@ -9,6 +9,7 @@ import TimelineLogo from "../common/TimelineLogo";
 import UserTimelineLogo from "../common/UserTimelineLogo";
 import LoadFailReload from "../common/LoadFailReload";
 import FlatButton from "../common/button/FlatButton";
+import Card from "../common/Card";
 
 interface TimelineBoardItemProps {
   timeline: HttpTimelineInfo;
@@ -224,7 +225,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
   const [editing, setEditing] = React.useState<boolean>(false);
 
   return (
-    <div className={classnames("timeline-board", className)}>
+    <Card className={classnames("timeline-board", className)}>
       <div className="timeline-board-header">
         {title != null && <h3>{title}</h3>}
         {editable &&
@@ -280,7 +281,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
           );
         }
       })()}
-    </div>
+    </Card>
   );
 };
 
diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
new file mode 100644
index 00000000..daf4e12b
--- /dev/null
+++ b/FrontEnd/src/views/common/Card.css
@@ -0,0 +1,11 @@
+.cru-card {
+  border: 1px solid;
+  border-color: #e9ecef;
+  border-radius: 8px;
+  background: #f8f9fa;
+  transition: all 0.3s;
+}
+
+.cru-card:hover {
+  border-color: var(--tl-primary-color);
+}
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx
new file mode 100644
index 00000000..da2a1b68
--- /dev/null
+++ b/FrontEnd/src/views/common/Card.tsx
@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import React from "react";
+
+import "./Card.css";
+
+function _Card(
+  {
+    className,
+    children,
+  }: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>,
+  ref: React.ForwardedRef<HTMLDivElement>
+): React.ReactElement | null {
+  return (
+    <div ref={ref} className={classNames("cru-card", className)}>
+      {children}
+    </div>
+  );
+}
+
+const Card = React.forwardRef(_Card);
+
+export default Card;
diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index f0bed222..840bb7e8 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -8,6 +8,7 @@ import { useUser, userService } from "@/services/user";
 import ChangePasswordDialog from "./ChangePasswordDialog";
 import ChangeAvatarDialog from "./ChangeAvatarDialog";
 import ChangeNicknameDialog from "./ChangeNicknameDialog";
+import Card from "../common/Card";
 
 import "./index.css";
 
@@ -52,7 +53,7 @@ const SettingsPage: React.FC = (_) => {
     <>
       <Container>
         {user ? (
-          <div className="cru-card my-3 py-3">
+          <Card className="my-3 py-3">
             <h3 className="px-3 mb-3 text-primary">
               {t("settings.subheaders.account")}
             </h3>
@@ -82,9 +83,9 @@ const SettingsPage: React.FC = (_) => {
             >
               {t("settings.logout")}
             </div>
-          </div>
+          </Card>
         ) : null}
-        <div className="cru-card my-3 py-3">
+        <Card className="my-3 py-3">
           <h3 className="px-3 mb-3 text-primary">
             {t("settings.subheaders.customization")}
           </h3>
@@ -108,7 +109,7 @@ const SettingsPage: React.FC = (_) => {
               </Form.Control>
             </Col>
           </Row>
-        </div>
+        </Card>
       </Container>
       {(() => {
         switch (dialog) {
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
index 623d643f..851dfa55 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -19,6 +19,7 @@ import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
 import ConnectionStatusBadge from "./ConnectionStatusBadge";
 import { MenuItems, PopupMenu } from "../common/Menu";
 import FullPage from "../common/FullPage";
+import Card from "../common/Card";
 
 export interface TimelineCardTemplateProps extends TimelinePageCardProps {
   infoArea: React.ReactElement;
@@ -110,8 +111,8 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
 
   return (
     <>
-      <div
-        className={classnames("cru-card p-2 clearfix", className)}
+      <Card
+        className={classnames("p-2 clearfix", className)}
         style={{ zIndex: collapse ? 1029 : 1031 }}
       >
         <div className="float-end d-flex align-items-center">
@@ -129,7 +130,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
         ) : (
           <div style={{ display: collapse ? "none" : "block" }}>{content}</div>
         )}
-      </div>
+      </Card>
       {(() => {
         if (dialog === "member") {
           return (
-- 
cgit v1.2.3