...

4 files changed, 32 insertions, 31 deletions

diff --git a/FrontEnd/src/views/timeline-common/TimelineMember.tsx b/FrontEnd/src/views/timeline-common/TimelineMember.tsx
index 299d6a53..830ecd45 100644
--- a/FrontEnd/src/views/timeline-common/TimelineMember.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelineMember.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Container, ListGroup, Modal, Row, Col, Button } from "react-bootstrap";
 
 import { convertI18nText, I18nText } from "@/common";
 
@@ -10,6 +9,7 @@ import { getHttpSearchClient } from "@/http/search";
 import SearchInput from "../common/SearchInput";
 import UserAvatar from "../common/user/UserAvatar";
 import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
+import Button from "../common/button/Button";
 
 const TimelineMemberItem: React.FC<{
   user: HttpUser;
@@ -20,29 +20,28 @@ const TimelineMemberItem: React.FC<{
 
   return (
     <ListGroup.Item className="container">
-      <Row>
-        <Col xs="auto">
+      <div className="row">
+        <div className="col col-auto">
           <UserAvatar username={user.username} className="avatar small" />
-        </Col>
-        <Col>
-          <Row>{user.nickname}</Row>
-          <Row>
+        </div>
+        <div className="col">
+          <div className="row">{user.nickname}</div>
+          <div className="row">
             <small>{"@" + user.username}</small>
-          </Row>
-        </Col>
+          </div>
+        </div>
         {onAction ? (
-          <Col xs="auto">
+          <div className="col col-auto">
             <Button
-              variant={add ? "success" : "danger"}
+              text={`timeline.member.${add ? "add" : "remove"}`}
+              color={add ? "success" : "danger"}
               onClick={() => {
                 onAction(user.username);
               }}
-            >
-              {t(`timeline.member.${add ? "add" : "remove"}`)}
-            </Button>
-          </Col>
+            />
+          </div>
         ) : null}
-      </Row>
+      </div>
     </ListGroup.Item>
   );
 };
@@ -152,7 +151,7 @@ const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
   const members = [timeline.owner, ...timeline.members];
 
   return (
-    <Container className="px-4 py-3">
+    <div className="container px-4 py-3">
       <ListGroup>
         {members.map((member, index) => (
           <TimelineMemberItem
@@ -173,7 +172,7 @@ const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
       {timeline.manageable ? (
         <TimelineMemberUserSearch timeline={timeline} onChange={onChange} />
       ) : null}
-    </Container>
+    </div>
   );
 };
 
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx
index 6f032eae..d05f18d4 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx
@@ -75,7 +75,7 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
           connectionStatus={connectionStatus}
         />
       ) : null}
-      <Container>
+      <div className="container">
         <Timeline
           timelineName={timelineName}
           reloadKey={reloadKey}
@@ -83,7 +83,7 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
           onTimelineLoaded={(t) => setTimeline(t)}
           onConnectionStateChanged={setConnectionStatus}
         />
-      </Container>
+      </div>
     </>
   );
 };
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx b/FrontEnd/src/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx
index b2c7a470..e04bb7e1 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
+import Button from "../common/button/Button";
+
 const TimelinePostDeleteConfirmDialog: React.FC<{
   onClose: () => void;
   onConfirm: () => void;
@@ -17,9 +18,11 @@ const TimelinePostDeleteConfirmDialog: React.FC<{
       </Modal.Header>
       <Modal.Body>{t("timeline.post.deleteDialog.prompt")}</Modal.Body>
       <Modal.Footer>
-        <Button variant="secondary" onClick={onClose}>
-          {t("operationDialog.cancel")}
-        </Button>
+        <Button
+          text="operationDialog.cancel"
+          color="secondary"
+          onClick={onClose}
+        />
         <Button
           variant="danger"
           onClick={() => {
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
index 14cd50d4..b522f288 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";
-import { Row, Col, Form } from "react-bootstrap";
 
 import { UiLogicError } from "@/common";
 
@@ -212,8 +211,8 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
             onPostError={onPostError}
           />
         ) : (
-          <Row>
-            <Col className="px-1 py-1">
+          <div className="row">
+            <div className="col px-1 py-1">
               {(() => {
                 if (kind === "text") {
                   return (
@@ -239,8 +238,8 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
                   );
                 }
               })()}
-            </Col>
-            <Col xs="auto" className="align-self-end m-1">
+            </div>
+            <div className="col col-auto align-self-end m-1">
               <div className="d-block text-center mt-1 mb-2">
                 <PopupMenu
                   items={(["text", "image", "markdown"] as const).map(
@@ -274,8 +273,8 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
               >
                 {t("timeline.send")}
               </LoadingButton>
-            </Col>
-          </Row>
+            </div>
+          </div>
         )}
       </Card>
     </div>