...

17 files changed, 40 insertions, 40 deletions

diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json
index 43cd2ac6..c58f8eef 100644
--- a/FrontEnd/package-lock.json
+++ b/FrontEnd/package-lock.json
@@ -19,7 +19,7 @@
         "lodash": "^4.17.21",
         "pepjs": "^0.5.3",
         "react": "^17.0.1",
-        "react-bootstrap": "^1.5.2",
+        "react-bootstrap": "^2.0.0-alpha.1",
         "react-dom": "^17.0.2",
         "react-i18next": "^11.8.15",
         "react-inlinesvg": "^2.3.0",
@@ -10910,9 +10910,9 @@
       }
     },
     "node_modules/react-bootstrap": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz",
-      "integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==",
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-zoIGDzgcBoGiKd/0Rgh5SRyvqgH5OJPMEtXp+1v4Ek8gZDVSPZf58Oy4yhXs30pw4HKBS0s4yzJZcGMFKq3Yuw==",
       "dependencies": {
         "@babel/runtime": "^7.13.8",
         "@restart/context": "^2.1.4",
@@ -10920,7 +10920,7 @@
         "@types/classnames": "^2.2.10",
         "@types/invariant": "^2.2.33",
         "@types/prop-types": "^15.7.3",
-        "@types/react": ">=16.9.35",
+        "@types/react": ">=16.14.4",
         "@types/react-transition-group": "^4.4.1",
         "@types/warning": "^3.0.0",
         "classnames": "^2.2.6",
@@ -10934,8 +10934,8 @@
         "warning": "^4.0.3"
       },
       "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
       }
     },
     "node_modules/react-dom": {
@@ -22135,9 +22135,9 @@
       }
     },
     "react-bootstrap": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz",
-      "integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==",
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-zoIGDzgcBoGiKd/0Rgh5SRyvqgH5OJPMEtXp+1v4Ek8gZDVSPZf58Oy4yhXs30pw4HKBS0s4yzJZcGMFKq3Yuw==",
       "requires": {
         "@babel/runtime": "^7.13.8",
         "@restart/context": "^2.1.4",
@@ -22145,7 +22145,7 @@
         "@types/classnames": "^2.2.10",
         "@types/invariant": "^2.2.33",
         "@types/prop-types": "^15.7.3",
-        "@types/react": ">=16.9.35",
+        "@types/react": ">=16.14.4",
         "@types/react-transition-group": "^4.4.1",
         "@types/warning": "^3.0.0",
         "classnames": "^2.2.6",
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index eb851d3a..dd1fb6c0 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -17,7 +17,7 @@
     "lodash": "^4.17.21",

     "pepjs": "^0.5.3",

     "react": "^17.0.1",

-    "react-bootstrap": "^1.5.2",

+    "react-bootstrap": "^2.0.0-alpha.1",

     "react-dom": "^17.0.2",

     "react-i18next": "^11.8.15",

     "react-inlinesvg": "^2.3.0",

diff --git a/FrontEnd/src/app/views/center/TimelineBoard.tsx b/FrontEnd/src/app/views/center/TimelineBoard.tsx
index e0511422..35249f66 100644
--- a/FrontEnd/src/app/views/center/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/center/TimelineBoard.tsx
@@ -47,7 +47,7 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
         <TimelineLogo className="icon" />
       )}
       <span className="title">{title}</span>
-      <small className="ml-2 text-secondary">{name}</small>
+      <small className="ms-2 text-secondary">{name}</small>
       <span className="flex-grow-1"></span>
       {actions != null ? (
         <div className="right">
diff --git a/FrontEnd/src/app/views/center/center.sass b/FrontEnd/src/app/views/center/center.sass
index 4b86f241..c0dfb9c0 100644
--- a/FrontEnd/src/app/views/center/center.sass
+++ b/FrontEnd/src/app/views/center/center.sass
@@ -23,7 +23,7 @@
   .icon

     height: 1.3em

     color: black

-    @extend .mr-2

+    @extend .me-2

   &:hover

     background: $gray-300

   .right

diff --git a/FrontEnd/src/app/views/common/AppBar.tsx b/FrontEnd/src/app/views/common/AppBar.tsx
index 4b165427..939f0175 100644
--- a/FrontEnd/src/app/views/common/AppBar.tsx
+++ b/FrontEnd/src/app/views/common/AppBar.tsx
@@ -38,7 +38,7 @@ const AppBar: React.FC = (_) => {
       <Navbar.Toggle onClick={toggleExpand} />
 
       <Navbar.Collapse>
-        <Nav className="mr-auto">
+        <Nav className="me-auto">
           <NavLink
             to="/settings"
             className="nav-link"
@@ -67,12 +67,12 @@ const AppBar: React.FC = (_) => {
             </NavLink>
           )}
         </Nav>
-        <Nav className="ml-auto md-mr-2">
+        <Nav className="ms-auto md-me-2">
           {user != null ? (
             <LinkContainer to="/">
               <UserAvatar
                 username={user.username}
-                className="avatar small rounded-circle bg-white cursor-pointer ml-auto"
+                className="avatar small rounded-circle bg-white cursor-pointer ms-auto"
               />
             </LinkContainer>
           ) : (
diff --git a/FrontEnd/src/app/views/common/FullPage.tsx b/FrontEnd/src/app/views/common/FullPage.tsx
index 4048895a..1b59045a 100644
--- a/FrontEnd/src/app/views/common/FullPage.tsx
+++ b/FrontEnd/src/app/views/common/FullPage.tsx
@@ -20,7 +20,7 @@ const FullPage: React.FC<FullPageProps> = ({
     >
       <div className="cru-full-page-top-bar">
         <i
-          className="icon-button bi-arrow-left text-white ml-3"
+          className="icon-button bi-arrow-left text-white ms-3"
           onClick={onBack}
         />
       </div>
diff --git a/FrontEnd/src/app/views/common/LoadingButton.tsx b/FrontEnd/src/app/views/common/LoadingButton.tsx
index 154334a7..cd9f1adc 100644
--- a/FrontEnd/src/app/views/common/LoadingButton.tsx
+++ b/FrontEnd/src/app/views/common/LoadingButton.tsx
@@ -16,7 +16,7 @@ const LoadingButton: React.FC<{ loading?: boolean } & ButtonProps> = ({
       {otherProps.children}
       {loading ? (
         <Spinner
-          className="ml-1"
+          className="ms-1"
           variant={variant}
           animation="grow"
           size="sm"
diff --git a/FrontEnd/src/app/views/common/SearchInput.tsx b/FrontEnd/src/app/views/common/SearchInput.tsx
index 76e7884c..63fa02c9 100644
--- a/FrontEnd/src/app/views/common/SearchInput.tsx
+++ b/FrontEnd/src/app/views/common/SearchInput.tsx
@@ -46,20 +46,20 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
       )}
     >
       <Form.Control
-        className="mr-sm-2 flex-grow-1"
+        className="me-sm-2 flex-grow-1"
         value={props.value}
         onChange={onInputChange}
         onKeyPress={onInputKeyPress}
         placeholder={props.placeholder}
       />
       {props.additionalButton ? (
-        <div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ml-sm-2">
+        <div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ms-sm-2">
           {props.additionalButton}
         </div>
       ) : null}
       <div
         className={classnames(
-          alwaysOneline ? "mt-0 ml-2" : "mt-2 mt-sm-0 ml-auto ml-sm-0",
+          alwaysOneline ? "mt-0 ms-2" : "mt-2 mt-sm-0 ms-auto ms-sm-0",
           "flex-shrink-0"
         )}
       >
diff --git a/FrontEnd/src/app/views/common/TabPages.tsx b/FrontEnd/src/app/views/common/TabPages.tsx
index 424e769f..2b1d91cb 100644
--- a/FrontEnd/src/app/views/common/TabPages.tsx
+++ b/FrontEnd/src/app/views/common/TabPages.tsx
@@ -61,7 +61,7 @@ const TabPages: React.FC<TabPagesProps> = ({
           </Nav.Item>
         ))}
         {actions != null && (
-          <div className="ml-auto cru-tab-pages-action-area">{actions}</div>
+          <div className="ms-auto cru-tab-pages-action-area">{actions}</div>
         )}
       </Nav>
       <div className={pageContainerClassName} style={pageContainerStyle}>
diff --git a/FrontEnd/src/app/views/home/TimelineListView.tsx b/FrontEnd/src/app/views/home/TimelineListView.tsx
index 819e2322..95c3c367 100644
--- a/FrontEnd/src/app/views/home/TimelineListView.tsx
+++ b/FrontEnd/src/app/views/home/TimelineListView.tsx
@@ -35,7 +35,7 @@ const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => {
         </div>
       </div>
       <Link to={url}>
-        <i className="icon-button bi-arrow-right ml-3" />
+        <i className="icon-button bi-arrow-right ms-3" />
       </Link>
     </div>
   );
diff --git a/FrontEnd/src/app/views/search/index.tsx b/FrontEnd/src/app/views/search/index.tsx
index 8401f26c..966ca666 100644
--- a/FrontEnd/src/app/views/search/index.tsx
+++ b/FrontEnd/src/app/views/search/index.tsx
@@ -23,16 +23,16 @@ const TimelineSearchResultItemView: React.FC<{
       <h4>
         <Link to={link} className="mb-2 text-primary">
           {timeline.title}
-          <small className="ml-3 text-secondary">{timeline.name}</small>
+          <small className="ms-3 text-secondary">{timeline.name}</small>
         </Link>
       </h4>
       <div>
         <UserAvatar
           username={timeline.owner.username}
-          className="timeline-search-result-item-avatar mr-2"
+          className="timeline-search-result-item-avatar me-2"
         />
         {timeline.owner.nickname}
-        <small className="ml-3 text-secondary">
+        <small className="ms-3 text-secondary">
           @{timeline.owner.username}
         </small>
       </div>
diff --git a/FrontEnd/src/app/views/settings/index.tsx b/FrontEnd/src/app/views/settings/index.tsx
index bc3b55a4..04a2777a 100644
--- a/FrontEnd/src/app/views/settings/index.tsx
+++ b/FrontEnd/src/app/views/settings/index.tsx
@@ -93,7 +93,7 @@ const SettingsPage: React.FC = (_) => {
                 {t("settings.languageSecondary")}
               </small>
             </Col>
-            <Col xs="auto" className="ml-auto">
+            <Col xs="auto" className="ms-auto">
               <Form.Control
                 as="select"
                 value={language}
diff --git a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
index f293bb21..d81d18b7 100644
--- a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
@@ -108,7 +108,7 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
           ) : (
             <>
               <FlatButton
-                className="mr-2"
+                className="me-2"
                 variant="danger"
                 onClick={() => {
                   if (canLeave) {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
index ad9b7ede..be0c536b 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -54,7 +54,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
         <i
           className={classnames(
             timeline.isHighlight ? "bi-star-fill" : "bi-star",
-            "icon-button text-yellow mr-3"
+            "icon-button text-yellow me-3"
           )}
           onClick={
             user?.hasHighlightTimelineAdministrationPermission
@@ -77,7 +77,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
           <i
             className={classnames(
               timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
-              "icon-button text-yellow mr-3"
+              "icon-button text-yellow me-3"
             )}
             onClick={() => {
               getHttpBookmarkClient()
@@ -94,7 +94,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
           />
         ) : null}
         <i
-          className={"icon-button bi-people text-primary mr-3"}
+          className={"icon-button bi-people text-primary me-3"}
           onClick={() => setDialog("member")}
         />
         {manageItems != null ? (
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
index 295ee3b9..e9c75de7 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -63,15 +63,15 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
           />
         ) : null}
         <div className="timeline-item-header">
-          <span className="mr-2">
+          <span className="me-2">
             <span>
               <Link to={"/users/" + props.post.author.username}>
                 <UserAvatar
                   username={post.author.username}
-                  className="timeline-avatar mr-1"
+                  className="timeline-avatar me-1"
                 />
               </Link>
-              <small className="text-dark mr-2">{post.author.nickname}</small>
+              <small className="text-dark me-2">{post.author.nickname}</small>
               <small className="text-secondary white-space-no-wrap">
                 {new Date(post.time).toLocaleTimeString()}
               </small>
diff --git a/FrontEnd/src/app/views/timeline/TimelineCard.tsx b/FrontEnd/src/app/views/timeline/TimelineCard.tsx
index 2a9bcfc8..f2aca579 100644
--- a/FrontEnd/src/app/views/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineCard.tsx
@@ -20,15 +20,15 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
           <>
             <h3 className="text-primary d-inline-block align-middle">
               {timeline.title}
-              <small className="ml-3 text-secondary">{timeline.name}</small>
+              <small className="ms-3 text-secondary">{timeline.name}</small>
             </h3>
             <div className="align-middle">
               <UserAvatar
                 username={timeline.owner.username}
-                className="avatar small rounded-circle mr-3"
+                className="avatar small rounded-circle me-3"
               />
               {timeline.owner.nickname}
-              <small className="ml-3 text-secondary">
+              <small className="ms-3 text-secondary">
                 @{timeline.owner.username}
               </small>
             </div>
diff --git a/FrontEnd/src/app/views/user/UserCard.tsx b/FrontEnd/src/app/views/user/UserCard.tsx
index 552f5ced..067366e0 100644
--- a/FrontEnd/src/app/views/user/UserCard.tsx
+++ b/FrontEnd/src/app/views/user/UserCard.tsx
@@ -18,12 +18,12 @@ const UserCard: React.FC<TimelinePageCardProps> = (props) => {
           <>
             <h3 className="text-primary d-inline-block align-middle">
               {timeline.title}
-              <small className="ml-3 text-secondary">{timeline.name}</small>
+              <small className="ms-3 text-secondary">{timeline.name}</small>
             </h3>
             <div className="align-middle">
               <UserAvatar
                 username={timeline.owner.username}
-                className="avatar small rounded-circle mr-3"
+                className="avatar small rounded-circle me-3"
               />
               {timeline.owner.nickname}
             </div>