aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd')
-rw-r--r--FrontEnd/src/index.css10
-rw-r--r--FrontEnd/src/views/about/index.tsx14
-rw-r--r--FrontEnd/src/views/center/TimelineBoard.tsx5
-rw-r--r--FrontEnd/src/views/common/Card.css11
-rw-r--r--FrontEnd/src/views/common/Card.tsx22
-rw-r--r--FrontEnd/src/views/settings/index.tsx9
-rw-r--r--FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx7
7 files changed, 53 insertions, 25 deletions
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 (
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 20:55:58 +0000