Merge branch 'dependabot/npm_and_yarn/FrontEnd/bootstrap-5.0.0'

20 files changed, 58 insertions, 88 deletions

diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json
index d55b4ef3..319ad6b3 100644
--- a/FrontEnd/package-lock.json
+++ b/FrontEnd/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.3.0",
       "dependencies": {
         "axios": "^0.21.1",
-        "bootstrap": "^4.5.3",
+        "bootstrap": "^5.0.0",
         "bootstrap-icons": "^1.4.1",
         "classnames": "^2.3.1",
         "core-js": "^3.11.2",
@@ -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",
@@ -3754,16 +3754,15 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0.tgz",
+      "integrity": "sha512-tmhPET9B9qCl8dCofvHeiIhi49iBt0EehmIsziZib65k1erBW1rHhj2s/2JsuQh5Pq+xz2E9bEbzp9B7xHG+VA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/bootstrap"
       },
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.9.2"
       }
     },
     "node_modules/bootstrap-icons": {
@@ -7492,12 +7491,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "peer": true
-    },
     "node_modules/js-base64": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.6.0.tgz",
@@ -8802,17 +8795,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -10928,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",
@@ -10938,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",
@@ -10952,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": {
@@ -16750,9 +16732,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0.tgz",
+      "integrity": "sha512-tmhPET9B9qCl8dCofvHeiIhi49iBt0EehmIsziZib65k1erBW1rHhj2s/2JsuQh5Pq+xz2E9bEbzp9B7xHG+VA==",
       "requires": {}
     },
     "bootstrap-icons": {
@@ -19606,12 +19588,6 @@
         }
       }
     },
-    "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "peer": true
-    },
     "js-base64": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.6.0.tgz",
@@ -20622,12 +20598,6 @@
       "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
       "dev": true
     },
-    "popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "peer": true
-    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -22179,9 +22149,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",
@@ -22189,7 +22159,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 ef86526c..314550ee 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -7,7 +7,7 @@
   "description": "Timeline app.",

   "dependencies": {

     "axios": "^0.21.1",

-    "bootstrap": "^4.5.3",

+    "bootstrap": "^5.0.0",

     "bootstrap-icons": "^1.4.1",

     "classnames": "^2.3.1",

     "core-js": "^3.11.2",

@@ -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/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index 74b3503f..61140bb1 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -205,7 +205,7 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
   return (
     <ListGroup.Item className="admin-user-item">
       <i
-        className="bi-pencil-square float-right icon-button text-warning"
+        className="bi-pencil-square float-end icon-button text-warning"
         onClick={() => setEditMaskVisible(true)}
       />
       <h4 className="text-primary">{user.username}</h4>
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..c2234cb9 100644
--- a/FrontEnd/src/app/views/common/SearchInput.tsx
+++ b/FrontEnd/src/app/views/common/SearchInput.tsx
@@ -39,27 +39,27 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
 
   return (
     <Form
-      inline
       className={classnames(
+        "d-flex",
         alwaysOneline ? "flex-nowrap" : "flex-sm-nowrap",
         props.className
       )}
     >
       <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/home/index.tsx b/FrontEnd/src/app/views/home/index.tsx
index 519d59f8..0eca23ee 100644
--- a/FrontEnd/src/app/views/home/index.tsx
+++ b/FrontEnd/src/app/views/home/index.tsx
@@ -54,7 +54,7 @@ const HomeV2: React.FC = () => {
   return (
     <>
       <SearchInput
-        className="mx-2 my-3 float-sm-right"
+        className="mx-2 my-3 float-sm-end"
         value={navText}
         onChange={setNavText}
         onButtonClick={() => {
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..2e569b7c 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) {
@@ -166,8 +166,8 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
                     />
                   </div>
                 ))}
-                <Form.File
-                  label={t("chooseImage")}
+                <Form.Control
+                  type="file"
                   accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                     const { files } = event.currentTarget;
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
index ad9b7ede..d8ad04af 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 ? (
@@ -112,7 +112,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
         className={classnames("cru-card p-2 clearfix", className)}
         style={{ zIndex: collapse ? 1029 : 1031 }}
       >
-        <div className="float-right d-flex align-items-center">
+        <div className="float-end d-flex align-items-center">
           <CollapseButton collapse={collapse} onClick={toggleCollapse} />
         </div>
         {isSmallScreen ? (
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
index db2dc23d..5c379a9a 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -77,8 +77,8 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
 
   return (
     <>
-      <Form.File
-        label={t("chooseImage")}
+      <Form.Control
+        type="file"
         onChange={onInputChange}
         accept="image/*"
         disabled={disabled}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
index 295ee3b9..6bd6ea98 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -55,7 +55,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
       <div ref={cardRef} className="timeline-item-card" style={cardStyle}>
         {post.editable ? (
           <i
-            className="bi-chevron-down text-info icon-button float-right"
+            className="bi-chevron-down text-info icon-button float-end"
             onClick={(e) => {
               setOperationMaskVisible(true);
               e.stopPropagation();
@@ -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>