diff options
Diffstat (limited to 'FrontEnd/src')
| -rw-r--r-- | FrontEnd/src/app/views/settings/index.tsx | 106 |
1 files changed, 54 insertions, 52 deletions
diff --git a/FrontEnd/src/app/views/settings/index.tsx b/FrontEnd/src/app/views/settings/index.tsx index cbdae8ac..0a85df83 100644 --- a/FrontEnd/src/app/views/settings/index.tsx +++ b/FrontEnd/src/app/views/settings/index.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { useHistory } from "react-router"; import { useTranslation } from "react-i18next"; -import { Form, Row, Col, Button, Modal } from "react-bootstrap"; +import { Container, Form, Row, Col, Button, Modal } from "react-bootstrap"; import { useUser, userService } from "@/services/user"; import OperationDialog from "../common/OperationDialog"; @@ -106,60 +106,62 @@ const SettingsPage: React.FC = (_) => { return ( <> - {user ? ( - <div className="cru-card m-3 py-3"> + <Container> + {user ? ( + <div className="cru-card my-3 py-3"> + <h3 className="px-3 mb-3 text-primary"> + {t("settings.subheaders.account")} + </h3> + <div + className="settings-item clickable first" + onClick={() => { + history.push(`/users/${user.username}`); + }} + > + {t("settings.gotoSelf")} + </div> + <div + className="settings-item clickable text-danger" + onClick={() => setDialog("changepassword")} + > + {t("settings.changePassword")} + </div> + <div + className="settings-item clickable text-danger" + onClick={() => { + setDialog("logout"); + }} + > + {t("settings.logout")} + </div> + </div> + ) : null} + <div className="cru-card my-3 py-3"> <h3 className="px-3 mb-3 text-primary"> - {t("settings.subheaders.account")} + {t("settings.subheaders.customization")} </h3> - <div - className="settings-item clickable first" - onClick={() => { - history.push(`/users/${user.username}`); - }} - > - {t("settings.gotoSelf")} - </div> - <div - className="settings-item clickable text-danger" - onClick={() => setDialog("changepassword")} - > - {t("settings.changePassword")} - </div> - <div - className="settings-item clickable text-danger" - onClick={() => { - setDialog("logout"); - }} - > - {t("settings.logout")} - </div> + <Row className="settings-item first mx-0"> + <Col xs="12" sm="auto"> + <div>{t("settings.languagePrimary")}</div> + <small className="d-block text-secondary"> + {t("settings.languageSecondary")} + </small> + </Col> + <Col xs="auto" className="ml-auto"> + <Form.Control + as="select" + value={language} + onChange={(e) => { + void i18n.changeLanguage(e.target.value); + }} + > + <option value="zh">中文</option> + <option value="en">English</option> + </Form.Control> + </Col> + </Row> </div> - ) : null} - <div className="cru-card m-3 py-3"> - <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>{t("settings.languagePrimary")}</div> - <small className="d-block text-secondary"> - {t("settings.languageSecondary")} - </small> - </Col> - <Col xs="auto" className="ml-auto"> - <Form.Control - as="select" - value={language} - onChange={(e) => { - void i18n.changeLanguage(e.target.value); - }} - > - <option value="zh">中文</option> - <option value="en">English</option> - </Form.Control> - </Col> - </Row> - </div> + </Container> {(() => { switch (dialog) { case "changepassword": |