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

18 files changed, 37 insertions, 37 deletions

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>