aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src')
-rw-r--r--FrontEnd/src/views/admin/UserAdmin.tsx12
-rw-r--r--FrontEnd/src/views/center/TimelineBoard.tsx6
-rw-r--r--FrontEnd/src/views/common/button/Button.css16
-rw-r--r--FrontEnd/src/views/common/dailog/ConfirmDialog.tsx7
-rw-r--r--FrontEnd/src/views/common/dailog/Dialog.css9
-rw-r--r--FrontEnd/src/views/common/dailog/OperationDialog.css0
-rw-r--r--FrontEnd/src/views/common/dailog/OperationDialog.tsx16
-rw-r--r--FrontEnd/src/views/common/index.css3
-rw-r--r--FrontEnd/src/views/common/menu/Menu.css2
-rw-r--r--FrontEnd/src/views/login/index.tsx2
-rw-r--r--FrontEnd/src/views/settings/index.tsx11
-rw-r--r--FrontEnd/src/views/timeline-common/TimelinePostView.tsx2
12 files changed, 54 insertions, 32 deletions
diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index 481db1cc..6d2760f2 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -206,23 +206,23 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
return (
<div className="admin-user-item">
<i
- className="bi-pencil-square float-end icon-button text-warning"
+ className="bi-pencil-square float-end icon-button cru-color-warning"
onClick={() => setEditMaskVisible(true)}
/>
- <h4 className="text-primary">{user.username}</h4>
- <div className="text-secondary">
+ <h4 className="cru-color-primary">{user.username}</h4>
+ <div className="cru-color-secondary">
{t("admin:user.nickname")}
{user.nickname}
</div>
- <div className="text-secondary">
+ <div className="cru-color-secondary">
{t("admin:user.uniqueId")}
{user.uniqueId}
</div>
- <div className="text-secondary">
+ <div className="cru-color-secondary">
{t("admin:user.permissions")}
{user.permissions.map((permission) => {
return (
- <span key={permission} className="text-danger">
+ <span key={permission} className="cru-color-danger">
{permission}{" "}
</span>
);
diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx
index 3961a7bc..8c1f5fac 100644
--- a/FrontEnd/src/views/center/TimelineBoard.tsx
+++ b/FrontEnd/src/views/center/TimelineBoard.tsx
@@ -48,16 +48,16 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
<TimelineLogo className="icon" />
)}
<span className="title">{title}</span>
- <small className="ms-2 text-secondary">{name}</small>
+ <small className="ms-2 cru-color-secondary">{name}</small>
<span className="flex-grow-1"></span>
{actions != null ? (
<div className="right">
<i
- className="bi-trash icon-button text-danger px-2"
+ className="bi-trash icon-button cru-color-danger px-2"
onClick={actions.onDelete}
/>
<i
- className="bi-grip-vertical icon-button text-gray px-2 touch-action-none"
+ className="bi-grip-vertical icon-button px-2 touch-action-none"
onPointerDown={(e) => {
e.currentTarget.setPointerCapture(e.pointerId);
actions.onMove.start(e);
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index ec2dd798..54127f05 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -57,7 +57,8 @@
}
.cru-button:not(.outline):disabled {
- background-color: var(--cru-button-f3-color);
+ background-color: var(--cru-disable-color);
+ cursor: auto;
}
.cru-button.outline {
@@ -67,23 +68,24 @@
padding: 0.2em 0.5em;
border-radius: 0.2em;
transition: all 0.6s;
- background-color: var(--cru-background-color);
+ background-color: white;
}
.cru-button.outline:hover {
color: var(--cru-button-f1-color);
border-color: var(--cru-button-f1-color);
- background-color: var(--cru-background-1-color);
+ background-color: var(--cru-background-color);
}
.cru-button.outline:active {
color: var(--cru-button-f2-color);
border-color: var(--cru-button-f2-color);
- background-color: var(--cru-background-2-color);
+ background-color: var(--cru-background-1-color);
}
.cru-button.outline:disabled {
- color: var(--cru-button-f3-color);
- border-color: var(--cru-button-f3-color);
- background-color: var(--cru-background-3-color);
+ color: var(--cru-disable-color);
+ border-color: var(--cru-disable-color);
+ background-color: white;
+ cursor: auto;
}
diff --git a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
index 1ad52350..c10b1cdb 100644
--- a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
@@ -16,12 +16,15 @@ const ConfirmDialog: React.FC<{
return (
<Dialog onClose={onClose} open={open}>
- <h3 className="text-danger">{convertI18nText(title, t)}</h3>
+ <h3 className="cru-color-danger">{convertI18nText(title, t)}</h3>
+ <hr />
<p>{convertI18nText(body, t)}</p>
- <div>
+ <hr />
+ <div className="cru-dialog-bottom-area">
<Button
text="operationDialog.cancel"
color="secondary"
+ outline
onClick={onClose}
/>
<Button
diff --git a/FrontEnd/src/views/common/dailog/Dialog.css b/FrontEnd/src/views/common/dailog/Dialog.css
index abce04fd..c1209d99 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.css
+++ b/FrontEnd/src/views/common/dailog/Dialog.css
@@ -20,3 +20,12 @@
padding: 1.5em;
background-color: white;
}
+
+.cru-dialog-bottom-area {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.cru-dialog-bottom-area > * {
+ margin: 0 0.5em
+}
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.css b/FrontEnd/src/views/common/dailog/OperationDialog.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/FrontEnd/src/views/common/dailog/OperationDialog.css
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.tsx b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
index 1e765276..f394a3d3 100644
--- a/FrontEnd/src/views/common/dailog/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
@@ -11,6 +11,8 @@ import Button from "../button/Button";
import LoadingButton from "../button/LoadingButton";
import Dialog from "./Dialog";
+import "./OperationDialog.css";
+
interface DefaultErrorPromptProps {
error?: string;
}
@@ -18,13 +20,13 @@ interface DefaultErrorPromptProps {
const DefaultErrorPrompt: React.FC<DefaultErrorPromptProps> = (props) => {
const { t } = useTranslation();
- let result = <p className="text-danger">{t("operationDialog.error")}</p>;
+ let result = <p className="cru-color-danger">{t("operationDialog.error")}</p>;
if (props.error != null) {
result = (
<>
{result}
- <p className="text-danger">{props.error}</p>
+ <p className="cru-color-danger">{props.error}</p>
</>
);
}
@@ -392,10 +394,12 @@ const OperationDialog = <
}
})}
</div>
- <div>
+ <hr />
+ <div className="cru-dialog-bottom-area">
<Button
text="operationDialog.cancel"
color="secondary"
+ outline
onClick={close}
/>
<LoadingButton
@@ -421,7 +425,7 @@ const OperationDialog = <
content =
props.successPrompt?.(result.data) ?? t("operationDialog.success");
if (typeof content === "string")
- content = <p className="text-success">{content}</p>;
+ content = <p className="cru-color-success">{content}</p>;
} else {
content = props.failurePrompt?.(result.data) ?? <DefaultErrorPrompt />;
if (typeof content === "string")
@@ -430,6 +434,7 @@ const OperationDialog = <
body = (
<>
<div>{content}</div>
+ <hr />
<div>
<Button text="operationDialog.ok" color="primary" onClick={close} />
</div>
@@ -446,11 +451,12 @@ const OperationDialog = <
<Dialog open={props.open} onClose={close}>
<h3
className={
- props.themeColor != null ? "text-" + props.themeColor : undefined
+ props.themeColor != null ? "cru-color-" + props.themeColor : undefined
}
>
{title}
</h3>
+ <hr />
{body}
</Dialog>
);
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 02eed6d9..62167cfc 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -2,7 +2,8 @@
--cru-background-color: #f8f9fa;
--cru-background-1-color: #e9ecef;
--cru-background-2-color: #dee2e6;
- --cru-background-3-color: #ced4da;
+
+ --cru-disable-color: #ced4da;
--cru-primary-color: rgb(0, 123, 255);
--cru-primary-l1-color: rgb(26, 136, 255);
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index c933b34f..a30eb5c6 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -22,7 +22,7 @@
}
.cru-menu-item.color-secondary:hover {
- color: var(--cru-text-on-secondary-color);
+ color: var(--cru-secondary-t-color);
background-color: var(--cru-secondary-color);
}
diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx
index 6d70c64a..782acdaa 100644
--- a/FrontEnd/src/views/login/index.tsx
+++ b/FrontEnd/src/views/login/index.tsx
@@ -122,7 +122,7 @@ const LoginPage: React.FC = (_) => {
<label>{t("user.rememberMe")}</label>
</div>
{error ? <p className="text-danger">{t(error)}</p> : null}
- <div className="text-end">
+ <div className="cru-text-end">
<LoadingButton
loading={process}
onClick={(e) => {
diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index f25911d7..69a74327 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -28,7 +28,7 @@ const SettingsPage: React.FC = (_) => {
<div className="container">
{user ? (
<Card className="my-3 py-3">
- <h3 className="px-3 mb-3 text-primary">
+ <h3 className="px-3 mb-3 cru-color-primary">
{t("settings.subheaders.account")}
</h3>
<div
@@ -44,13 +44,13 @@ const SettingsPage: React.FC = (_) => {
{t("settings.changeNickname")}
</div>
<div
- className="settings-item clickable text-danger"
+ className="settings-item clickable cru-color-danger"
onClick={() => setDialog("changepassword")}
>
{t("settings.changePassword")}
</div>
<div
- className="settings-item clickable text-danger"
+ className="settings-item clickable cru-color-danger"
onClick={() => {
setDialog("logout");
}}
@@ -60,13 +60,13 @@ const SettingsPage: React.FC = (_) => {
</Card>
) : null}
<Card className="my-3 py-3">
- <h3 className="px-3 mb-3 text-primary">
+ <h3 className="px-3 mb-3 cru-color-primary">
{t("settings.subheaders.customization")}
</h3>
<div className="row settings-item first mx-0">
<div className="col col-12 col-sm-auto">
<div>{t("settings.languagePrimary")}</div>
- <small className="d-block text-secondary">
+ <small className="d-block cru-color-secondary">
{t("settings.languageSecondary")}
</small>
</div>
@@ -94,6 +94,7 @@ const SettingsPage: React.FC = (_) => {
title="settings.dialogConfirmLogout.title"
body="settings.dialogConfirmLogout.prompt"
onClose={() => setDialog(null)}
+ open
onConfirm={() => {
void userService.logout().then(() => {
history.push("/");
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
index 995c43df..652ff9c9 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
@@ -64,7 +64,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
>
{post.editable ? (
<i
- className="bi-chevron-down icon-button primary-enhance float-end"
+ className="bi-chevron-down icon-button primary-enhance cru-float-right"
onClick={(e) => {
setOperationMaskVisible(true);
e.stopPropagation();
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 20:14:43 +0000