Merge pull request #649 from crupest/drop-bootstrap

Drop bootstrap!!!

4 files changed, 44 insertions, 45 deletions

diff --git a/FrontEnd/src/views/center/CenterBoards.tsx b/FrontEnd/src/views/center/CenterBoards.tsx
index f5200415..392c2d08 100644
--- a/FrontEnd/src/views/center/CenterBoards.tsx
+++ b/FrontEnd/src/views/center/CenterBoards.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
 import { pushAlert } from "@/services/alert";
@@ -18,10 +17,10 @@ const CenterBoards: React.FC = () => {
 
   return (
     <>
-      <Row className="justify-content-center">
-        <Col xs="12" md="6">
-          <Row>
-            <Col xs="12" className="my-2">
+      <div className="row justify-content-center">
+        <div className="col col-12 col-md-6">
+          <div className="row">
+            <div className="col col-12 my-2">
               <TimelineBoard
                 title={t("home.bookmarkTimeline")}
                 load={() => getHttpBookmarkClient().list()}
@@ -52,8 +51,8 @@ const CenterBoards: React.FC = () => {
                   },
                 }}
               />
-            </Col>
-            <Col xs="12" className="my-2">
+            </div>
+            <div className="col col-12 my-2">
               <TimelineBoard
                 title={t("home.highlightTimeline")}
                 load={() => getHttpHighlightClient().list()}
@@ -88,18 +87,18 @@ const CenterBoards: React.FC = () => {
                     : undefined
                 }
               />
-            </Col>
-          </Row>
-        </Col>
-        <Col xs="12" md="6" className="my-2">
+            </div>
+          </div>
+        </div>
+        <div className="col-12 col-md-6 my-2">
           <TimelineBoard
             title={t("home.relatedTimeline")}
             load={() =>
               getHttpTimelineClient().listTimeline({ relate: user.username })
             }
           />
-        </Col>
-      </Row>
+        </div>
+      </div>
     </>
   );
 };
diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx
index d6f6228d..8c1f5fac 100644
--- a/FrontEnd/src/views/center/TimelineBoard.tsx
+++ b/FrontEnd/src/views/center/TimelineBoard.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import classnames from "classnames";
 import { Link } from "react-router-dom";
-import { Spinner } from "react-bootstrap";
 
 import { HttpTimelineInfo } from "@/http/timeline";
 
@@ -10,6 +9,7 @@ import UserTimelineLogo from "../common/UserTimelineLogo";
 import LoadFailReload from "../common/LoadFailReload";
 import FlatButton from "../common/button/FlatButton";
 import Card from "../common/Card";
+import Spinner from "../common/Spinner";
 
 interface TimelineBoardItemProps {
   timeline: HttpTimelineInfo;
@@ -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);
@@ -208,7 +208,8 @@ const TimelineBoardItemContainer: React.FC<TimelineBoardItemContainerProps> = ({
 
 interface TimelineBoardUIProps {
   title?: string;
-  timelines: HttpTimelineInfo[] | "offline" | "loading";
+  state: "offline" | "loading" | "loaded";
+  timelines: HttpTimelineInfo[];
   onReload: () => void;
   className?: string;
   editHandler?: {
@@ -218,7 +219,7 @@ interface TimelineBoardUIProps {
 }
 
 const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
-  const { title, timelines, className, editHandler } = props;
+  const { title, state, timelines, className, editHandler } = props;
 
   const editable = editHandler != null;
 
@@ -246,13 +247,13 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
           ))}
       </div>
       {(() => {
-        if (timelines === "loading") {
+        if (state === "loading") {
           return (
             <div className="d-flex flex-grow-1 justify-content-center align-items-center">
-              <Spinner variant="primary" animation="border" />
+              <Spinner />
             </div>
           );
-        } else if (timelines === "offline") {
+        } else if (state === "offline") {
           return (
             <div className="d-flex flex-grow-1 justify-content-center align-items-center">
               <LoadFailReload onReload={props.onReload} />
@@ -301,36 +302,39 @@ const TimelineBoard: React.FC<TimelineBoardProps> = ({
   load,
   editHandler,
 }) => {
-  const [timelines, setTimelines] = React.useState<
-    HttpTimelineInfo[] | "offline" | "loading"
-  >("loading");
+  const [state, setState] = React.useState<"offline" | "loading" | "loaded">(
+    "loading"
+  );
+  const [timelines, setTimelines] = React.useState<HttpTimelineInfo[]>([]);
 
   React.useEffect(() => {
     let subscribe = true;
-    if (timelines === "loading") {
+    if (state === "loading") {
       void load().then(
         (timelines) => {
           if (subscribe) {
+            setState("loaded");
             setTimelines(timelines);
           }
         },
         () => {
-          setTimelines("offline");
+          setState("offline");
         }
       );
     }
     return () => {
       subscribe = false;
     };
-  }, [load, timelines]);
+  }, [load, state]);
 
   return (
     <TimelineBoardUI
       title={title}
       className={className}
+      state={state}
       timelines={timelines}
       onReload={() => {
-        setTimelines("loading");
+        setState("loaded");
       }}
       editHandler={
         typeof timelines === "object" && editHandler != null
diff --git a/FrontEnd/src/views/center/TimelineCreateDialog.tsx b/FrontEnd/src/views/center/TimelineCreateDialog.tsx
index b4e25ba1..4871a5e0 100644
--- a/FrontEnd/src/views/center/TimelineCreateDialog.tsx
+++ b/FrontEnd/src/views/center/TimelineCreateDialog.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useHistory } from "react-router";
 
 import { validateTimelineName } from "@/services/timeline";
-import OperationDialog from "../common/OperationDialog";
+import OperationDialog from "../common/dailog/OperationDialog";
 import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
 
 interface TimelineCreateDialogProps {
@@ -16,7 +16,7 @@ const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => {
   return (
     <OperationDialog
       open={props.open}
-      close={props.close}
+      onClose={props.close}
       themeColor="success"
       title="home.createDialog.title"
       inputScheme={
diff --git a/FrontEnd/src/views/center/index.tsx b/FrontEnd/src/views/center/index.tsx
index 28d8b372..77bb6ec8 100644
--- a/FrontEnd/src/views/center/index.tsx
+++ b/FrontEnd/src/views/center/index.tsx
@@ -1,11 +1,10 @@
 import React from "react";
 import { useHistory } from "react-router";
-import { useTranslation } from "react-i18next";
-import { Row, Container, Button, Col } from "react-bootstrap";
 
 import { useUserLoggedIn } from "@/services/user";
 
 import SearchInput from "../common/SearchInput";
+import Button from "../common/button/Button";
 import CenterBoards from "./CenterBoards";
 import TimelineCreateDialog from "./TimelineCreateDialog";
 
@@ -14,8 +13,6 @@ import "./index.css";
 const HomePage: React.FC = () => {
   const history = useHistory();
 
-  const { t } = useTranslation();
-
   const user = useUserLoggedIn();
 
   const [navText, setNavText] = React.useState<string>("");
@@ -24,9 +21,9 @@ const HomePage: React.FC = () => {
 
   return (
     <>
-      <Container>
-        <Row className="my-3 justify-content-center">
-          <Col xs={12} sm={8} lg={6}>
+      <div className="container">
+        <div className="row my-3 justify-content-center">
+          <div className="col col-12 col-sm-8 col-lg-6">
             <SearchInput
               className="justify-content-center"
               value={navText}
@@ -37,20 +34,19 @@ const HomePage: React.FC = () => {
               additionalButton={
                 user != null && (
                   <Button
-                    variant="outline-success"
+                    text="home.createButton"
+                    color="success"
                     onClick={() => {
                       setDialog("create");
                     }}
-                  >
-                    {t("home.createButton")}
-                  </Button>
+                  />
                 )
               }
             />
-          </Col>
-        </Row>
+          </div>
+        </div>
         <CenterBoards />
-      </Container>
+      </div>
       {dialog === "create" && (
         <TimelineCreateDialog
           open