From 1bcb36b6ee3e83427847a1258c143648e39ca1cf Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 21 Jan 2021 16:22:11 +0800
Subject: feat: Fix #207.

---
 FrontEnd/src/app/views/settings/index.tsx | 106 +++++++++++++++---------------
 1 file changed, 54 insertions(+), 52 deletions(-)

(limited to 'FrontEnd/src')

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":
-- 
cgit v1.2.3