From fa540c046d126449f77e46edd379bbc84e02d05d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Jun 2021 00:00:54 +0800
Subject: ...

---
 FrontEnd/src/views/settings/ChangeAvatarDialog.tsx | 133 +++++++++++++--------
 FrontEnd/src/views/settings/index.tsx              |  33 ++---
 2 files changed, 99 insertions(+), 67 deletions(-)

(limited to 'FrontEnd/src/views/settings')

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