aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/settings
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/views/settings')
-rw-r--r--FrontEnd/src/views/settings/ChangeAvatarDialog.tsx133
-rw-r--r--FrontEnd/src/views/settings/index.tsx33
2 files changed, 99 insertions, 67 deletions
diff --git a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx
index c4f6f492..1baab1cc 100644
--- a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx
+++ b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { AxiosError } from "axios";
-import { Modal, Row, Button } from "react-bootstrap";
import { UiLogicError } from "@/common";
@@ -10,6 +9,7 @@ import { useUserLoggedIn } from "@/services/user";
import { getHttpUserClient } from "@/http/user";
import ImageCropper, { Clip, applyClipToImage } from "../common/ImageCropper";
+import Button from "../common/button/Button";
export interface ChangeAvatarDialogProps {
open: boolean;
@@ -148,13 +148,13 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
throw new UiLogicError();
}
return (
- <Row className="justify-content-center">
+ <div className="row justify-content-center">
<img
className="change-avatar-img"
src={resultUrl}
alt={t("settings.dialogChangeAvatar.previewImgAlt")}
/>
- </Row>
+ </div>
);
};
@@ -168,15 +168,19 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
return (
<>
<Modal.Body className="container">
- <Row>{t("settings.dialogChangeAvatar.prompt.select")}</Row>
- <Row>
+ <div className="row">
+ {t("settings.dialogChangeAvatar.prompt.select")}
+ </div>
+ <div className="row">
<input type="file" accept="image/*" onChange={onSelectFile} />
- </Row>
+ </div>
</Modal.Body>
<Modal.Footer>
- <Button variant="secondary" onClick={close}>
- {t("operationDialog.cancel")}
- </Button>
+ <Button
+ text="operationDialog.cancel"
+ color="secondary"
+ onClick={close}
+ />
</Modal.Footer>
</>
);
@@ -187,32 +191,37 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
return (
<>
<Modal.Body className="container">
- <Row className="justify-content-center">
+ <div className="row justify-content-center">
<ImageCropper
clip={clip}
onChange={setClip}
imageUrl={fileUrl}
imageElementCallback={setCropImgElement}
/>
- </Row>
- <Row>{t("settings.dialogChangeAvatar.prompt.crop")}</Row>
+ </div>
+ <div className="row">
+ {t("settings.dialogChangeAvatar.prompt.crop")}
+ </div>
</Modal.Body>
<Modal.Footer>
- <Button variant="secondary" onClick={close}>
- {t("operationDialog.cancel")}
- </Button>
- <Button variant="secondary" onClick={onCropPrevious}>
- {t("operationDialog.previousStep")}
- </Button>
<Button
+ text="operationDialog.cancel"
+ color="secondary"
+ onClick={close}
+ />
+ <Button
+ text="operationDialog.previousStep"
+ color="secondary"
+ onClick={onCropPrevious}
+ />
+ <Button
+ text="operationDialog.nextStep"
color="primary"
onClick={onCropNext}
disabled={
cropImgElement == null || clip == null || clip.width === 0
}
- >
- {t("operationDialog.nextStep")}
- </Button>
+ />
</Modal.Footer>
</>
);
@@ -220,17 +229,21 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
return (
<>
<Modal.Body className="container">
- <Row>
+ <div className="row">
{t("settings.dialogChangeAvatar.prompt.processingCrop")}
- </Row>
+ </div>
</Modal.Body>
<Modal.Footer>
- <Button variant="secondary" onClick={close}>
- {t("operationDialog.cancel")}
- </Button>
- <Button variant="secondary" onClick={onPreviewPrevious}>
- {t("operationDialog.previousStep")}
- </Button>
+ <Button
+ text="operationDialog.cancel"
+ color="secondary"
+ onClick={close}
+ />
+ <Button
+ text="operationDialog.previousStep"
+ color="secondary"
+ onClick={onPreviewPrevious}
+ />
</Modal.Footer>
</>
);
@@ -239,18 +252,26 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
<>
<Modal.Body className="container">
{createPreviewRow()}
- <Row>{t("settings.dialogChangeAvatar.prompt.preview")}</Row>
+ <div className="row">
+ {t("settings.dialogChangeAvatar.prompt.preview")}
+ </div>
</Modal.Body>
<Modal.Footer>
- <Button variant="secondary" onClick={close}>
- {t("operationDialog.cancel")}
- </Button>
- <Button variant="secondary" onClick={onPreviewPrevious}>
- {t("operationDialog.previousStep")}
- </Button>
- <Button variant="primary" onClick={upload}>
- {t("settings.dialogChangeAvatar.upload")}
- </Button>
+ <Button
+ text="operationDialog.cancel"
+ color="secondary"
+ onClick={close}
+ />
+ <Button
+ text="operationDialog.previousStep"
+ color="secondary"
+ onClick={onPreviewPrevious}
+ />
+ <Button
+ text="settings.dialogChangeAvatar.upload"
+ color="primary"
+ onClick={upload}
+ />
</Modal.Footer>
</>
);
@@ -259,7 +280,9 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
<>
<Modal.Body className="container">
{createPreviewRow()}
- <Row>{t("settings.dialogChangeAvatar.prompt.uploading")}</Row>
+ <div className="row">
+ {t("settings.dialogChangeAvatar.prompt.uploading")}
+ </div>
</Modal.Body>
<Modal.Footer></Modal.Footer>
</>
@@ -268,14 +291,16 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
return (
<>
<Modal.Body className="container">
- <Row className="p-4 text-success">
+ <div className="row p-4 text-success">
{t("operationDialog.success")}
- </Row>
+ </div>
</Modal.Body>
<Modal.Footer>
- <Button variant="success" onClick={close}>
- {t("operationDialog.ok")}
- </Button>
+ <Button
+ text="operationDialog.ok"
+ color="success"
+ onClick={close}
+ />
</Modal.Footer>
</>
);
@@ -284,15 +309,19 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
<>
<Modal.Body className="container">
{createPreviewRow()}
- <Row className="text-danger">{trueMessage}</Row>
+ <div className="row text-danger">{trueMessage}</div>
</Modal.Body>
<Modal.Footer>
- <Button variant="secondary" onClick={close}>
- {t("operationDialog.cancel")}
- </Button>
- <Button variant="primary" onClick={upload}>
- {t("operationDialog.retry")}
- </Button>
+ <Button
+ text="operationDialog.cancel"
+ color="secondary"
+ onClick={close}
+ />
+ <Button
+ text="operationDialog.retry"
+ color="primary"
+ onClick={upload}
+ />
</Modal.Footer>
</>
);
diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index 840bb7e8..b78e071a 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -1,7 +1,6 @@
import React, { useState } from "react";
import { useHistory } from "react-router";
import { useTranslation } from "react-i18next";
-import { Container, Form, Row, Col, Button, Modal } from "react-bootstrap";
import { useUser, userService } from "@/services/user";
@@ -27,12 +26,16 @@ const ConfirmLogoutDialog: React.FC<{
</Modal.Header>
<Modal.Body>{t("settings.dialogConfirmLogout.prompt")}</Modal.Body>
<Modal.Footer>
- <Button variant="secondary" onClick={onClose}>
- {t("operationDialog.cancel")}
- </Button>
- <Button variant="danger" onClick={onConfirm}>
- {t("operationDialog.confirm")}
- </Button>
+ <Button
+ text="operationDialog.cancel"
+ color="secondary"
+ onClick={onClose}
+ />
+ <Button
+ text="operationDialog.confirm"
+ variant="danger"
+ onClick={onConfirm}
+ />
</Modal.Footer>
</Modal>
);
@@ -51,7 +54,7 @@ const SettingsPage: React.FC = (_) => {
return (
<>
- <Container>
+ <div className="container">
{user ? (
<Card className="my-3 py-3">
<h3 className="px-3 mb-3 text-primary">
@@ -89,14 +92,14 @@ const SettingsPage: React.FC = (_) => {
<h3 className="px-3 mb-3 text-primary">
{t("settings.subheaders.customization")}
</h3>
- <Row className="settings-item first mx-0">
- <Col xs="12" sm="auto">
+ <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">
{t("settings.languageSecondary")}
</small>
- </Col>
- <Col xs="auto" className="ms-auto">
+ </div>
+ <div className="col col-12 col-sm-auto">
<Form.Control
as="select"
value={language}
@@ -107,10 +110,10 @@ const SettingsPage: React.FC = (_) => {
<option value="zh">中文</option>
<option value="en">English</option>
</Form.Control>
- </Col>
- </Row>
+ </div>
+ </div>
</Card>
- </Container>
+ </div>
{(() => {
switch (dialog) {
case "changepassword":
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 19:18:48 +0000