#356: updated bootstrap margin classes to newer version

fabric-testbed · Oct 30, 2024 · 704da96 · 704da96
1 parent bae7ffd
commit 704da96
Show file tree

Hide file tree

Showing 71 changed files with 198 additions and 207 deletions.
diff --git a/src/components/Experiment/ArtifactManager.jsx b/src/components/Experiment/ArtifactManager.jsx
@@ -27,7 +27,7 @@ class ArtifactManager extends React.Component {
             target="_blank"
             rel="noreferrer"
           >
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Open Artifact Manager
           </a>
         </div>

diff --git a/src/components/Experiment/Slices.jsx b/src/components/Experiment/Slices.jsx
@@ -169,7 +169,7 @@ class Slices extends React.Component {
           this.props.parent === "Projects" &&
           this.props.isProjectExpired && 
           <div className="alert alert-warning mt-3" role="alert">
-            <i className="fa fa-exclamation-triangle mr-2"></i>
+            <i className="fa fa-exclamation-triangle me-2"></i>
             This project is expired and no operations are allowed. Please renew the project if you need create slice.
           </div>
         }
@@ -218,7 +218,7 @@ class Slices extends React.Component {
           !this.props.isProjectExpired &&
             <div>
               <div className="d-flex flex-row">
-                <Link to={`/new-slice/${this.props.projectId}`} className="btn btn-primary mr-4">
+                <Link to={`/new-slice/${this.props.projectId}`} className="btn btn-primary me-4">
                   Create Slice in Portal
                 </Link>
                 <a

diff --git a/src/components/Experiment/Tokens.jsx b/src/components/Experiment/Tokens.jsx
@@ -25,7 +25,7 @@ class Tokens extends React.Component {
             target="_blank"
             rel="noreferrer"
           >
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Open FABRIC Credential Manager
           </a>
         </div>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -70,7 +70,7 @@ class Footer extends React.Component {
               src={trustedciBadge}
               width="175"
               height="175"
-              className="d-inline-block align-top mr-2"
+              className="d-inline-block align-top me-2"
               alt=""
             />
           </Col>
@@ -87,7 +87,7 @@ class Footer extends React.Component {
                 src={nsfLogo}
                 width="45"
                 height="45"
-                className="d-inline-block align-top mr-2"
+                className="d-inline-block align-top me-2"
                 alt=""
               />
               <u className="text-sm-size">FABRIC is funded by NSF grants CNS-1935966, CNS-2029176, CNS-2029200, CNS-2029235, CNS-2029260, CNS-2029261 and CNS-2330891.</u>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -287,7 +287,7 @@ const Header = (props) => {
         </Nav>
         {
         props.userStatus === "active" && !window.location.href.includes("/search-results") &&
-        <form className="form-inline my-2 mr-2 my-lg-0">
+        <form className="form-inline d-flex flex-row align-items-center">
           <input
             className="form-control"
             type="search"
@@ -298,7 +298,7 @@ const Header = (props) => {
           />
            <div className="input-group-append">
               <button
-                className="btn btn-outline-secondary"
+                className="btn btn-sm btn-outline-secondary"
                 type="button"
                 onClick={handleSearch}
               >
@@ -308,24 +308,24 @@ const Header = (props) => {
          </form>
       }
       { props.userStatus !== "active" ? 
-        <form className="form-inline my-2 my-lg-0">
+        <form className="form-inline">
           <NavLink to="/login">
             <button
               onClick={handleLogin}
-              className="btn btn-outline-success my-2 my-sm-0 mr-2"
+              className="btn btn-outline-success"
             >
               Log in
             </button>
           </NavLink>
           <NavLink to="/signup/1">
             <button
-              className="btn btn-outline-primary my-2 my-sm-0"
+              className="btn btn-outline-primary"
             >
               Sign up
             </button>
           </NavLink>
         </form> :
-        <form className="form-inline my-2 my-lg-0">
+        <form className="form-inline">
           <ProfileModal userName={props.userName} userEmail={props.userEmail} />
         </form>
       }

diff --git a/src/components/Home/CapabilityIcons.jsx b/src/components/Home/CapabilityIcons.jsx
@@ -83,17 +83,17 @@ const CapabilityIcons = () => {
       <div className="fabric-capability-button">
         <Link to="/about/about-fabric">
           <button className="btn btn-lg homepage-icon-btn">
-            <i className="fa fa-sign-in mr-2"></i>About FABRIC
+            <i className="fa fa-sign-in me-2"></i>About FABRIC
           </button>
         </Link>
         <a href={portalData.knowledgeBaseLink} target="_blank" rel="noopener noreferrer">
           <button className="btn btn-lg homepage-icon-btn">
-            <i className="fa fa-sign-in mr-2"></i>Knowledge Base
+            <i className="fa fa-sign-in me-2"></i>Knowledge Base
           </button>
         </a>
         <Link to="/community/publications">
           <button className="btn btn-lg homepage-icon-btn">
-            <i className="fa fa-sign-in mr-2"></i>Cite FABRIC
+            <i className="fa fa-sign-in me-2"></i>Cite FABRIC
           </button>
         </Link>
       </div>

diff --git a/src/components/Home/DynamicMetrics.jsx b/src/components/Home/DynamicMetrics.jsx
@@ -82,7 +82,7 @@ class DynamicMetrics extends React.Component {
     return (
       <div className="w-100 home-metrix">
         <div className="d-flex flex-column align-item-center justify-content-center px-5 mb-2">
-          <div className="mr-5 align-self-center">
+          <div className="me-5 align-self-center">
             <img
               src={FABRICLogo}
               height="100"
@@ -123,7 +123,7 @@ class DynamicMetrics extends React.Component {
                     {i.name}
                     {
                       i.link && <Link to={i.link}>
-                        <i className="fa fa-sign-in ml-2"></i>
+                        <i className="fa fa-sign-in ms-2"></i>
                       </Link>
                     }
                   </div>

diff --git a/src/components/Home/FacilityUpdates.jsx b/src/components/Home/FacilityUpdates.jsx
@@ -32,7 +32,7 @@ class FacilityUpdates extends React.Component {
     return (
       <div>
         {
-          updates.length === 0 ? <div className="mt-3 ml-4">No Facility Update available.</div> : 
+          updates.length === 0 ? <div className="mt-3 ms-4">No Facility Update available.</div> : 
           <FacilityUpdateCard showSpinner={showSpinner} updates={updates} />
         }
       </div>

diff --git a/src/components/Home/Partners.jsx b/src/components/Home/Partners.jsx
@@ -62,7 +62,7 @@ const Partners = () => {
           src={RENCI}
           key={`partners-logo-renci`}
           height="95"
-          className="d-inline-block align-top mr-4"
+          className="d-inline-block align-top me-4"
           alt=""
         />
         {

diff --git a/src/components/Home/RecentNews.jsx b/src/components/Home/RecentNews.jsx
@@ -32,7 +32,7 @@ class RecentNews extends React.Component {
     return (
       <div>
         {
-          news.length === 0 ? <div className="mt-3 ml-4">No recent news available.</div> : 
+          news.length === 0 ? <div className="mt-3 ms-4">No recent news available.</div> : 
           <NewsCard showSpinner={showSpinner} news={news} />
         }
       </div>

diff --git a/src/components/ProfileModal.jsx b/src/components/ProfileModal.jsx
@@ -52,7 +52,7 @@ function ProfileModal(props) {
           <div className="divider div-transparent"></div>
           <div className="d-flex justify-content-center">
               <button
-                className="btn btn-sm btn-outline-primary mr-3"
+                className="btn btn-sm btn-outline-primary me-3"
                 onClick={toggleModal}
               >
                 <NavLink to="/user">

diff --git a/src/components/Project/Community/CommunityTags.jsx b/src/components/Project/Community/CommunityTags.jsx
@@ -87,19 +87,19 @@ class Community extends React.Component {
           </div>
         </div>
         }
-        <div className="ml-1">
+        <div className="ms-1">
             <ul className="input-tag__tags">
               {
                 communities.length > 0 &&
                 communities.map((community, index) => 
                 <li
                   key={`community-to-add-${index}`}
-                  className="mr-2 my-2"
+                  className="me-2 my-2"
                 >
                   {community}
                   {
                     canUpdate &&          <i
-                    className="fa fa-times ml-2"
+                    className="fa fa-times ms-2"
                     onClick={() => {
                       this.props.onCommunityUpdate("remove", community);
                     }}

diff --git a/src/components/Project/Community/Funding.jsx b/src/components/Project/Community/Funding.jsx
@@ -158,20 +158,20 @@ class Funding extends React.Component {
           </div>
         </div>
         }
-        <div className="ml-1">
+        <div className="ms-1">
             <ul className="input-tag__tags">
               {
                 fundings.length > 0 &&
                 fundings.map((funding, index) => 
                 <li
                   key={`funding-to-add-${index}`}
-                  className="mr-2 my-2"
+                  className="me-2 my-2"
                 >
                   { this.parseFundingStr(funding) }
                   {
                     canUpdate && 
                     <i
-                      className="fa fa-times ml-2"
+                      className="fa fa-times ms-2"
                       onClick={() => {this.props.onFundingUpdate("remove", funding);}}
                     ></i>
                   }

diff --git a/src/components/Project/NewProjectForm.jsx b/src/components/Project/NewProjectForm.jsx
@@ -9,7 +9,7 @@ import { createProject } from "../../services/projectService";
 import { default as portalData } from "../../services/portalData.json";
 
 const ToastMessageWithLink = ({newProject}) => (
-  <div className="ml-2">
+  <div className="ms-2">
     <p className="text-white">Project created successfully.</p>
     <Link to={`/projects/${newProject.uuid}`}>
       <button className="btn btn-sm btn-outline-light">
@@ -237,7 +237,7 @@ class NewProjectForm extends Form {
                           <div className="mt-1">{user.name}</div>
                         }
                         <button
-                          className="btn btn-sm btn-outline-primary ml-2"
+                          className="btn btn-sm btn-outline-primary ms-2"
                           onClick={() => this.handleAddUser(user)}
                         >
                           <i className="fa fa-plus"></i>
@@ -255,11 +255,11 @@ class NewProjectForm extends Form {
               usersToAdd.map((user, index) => 
               <li
                 key={`user-to-add-${index}`}
-                className="mr-2 my-2"
+                className="me-2 my-2"
               >
                 {user.email ? `${user.name}(${user.email})` : user.name}
               <i
-                className="fa fa-times ml-2"
+                className="fa fa-times ms-2"
                 onClick={() => {
                   this.handleDeleteUser(user.name);
                 }}

diff --git a/src/components/Project/Personnel/AddPersonnel.jsx b/src/components/Project/Personnel/AddPersonnel.jsx
@@ -193,7 +193,7 @@ class AddPersonnel extends Component {
                             <div className="mt-1">{user.name}</div>
                           }
                           <button
-                            className="btn btn-sm btn-outline-primary ml-2"
+                            className="btn btn-sm btn-outline-primary ms-2"
                             onClick={() => this.handleAddUser(user)}
                           >
                             <i className="fa fa-plus"></i>
@@ -246,7 +246,7 @@ class AddPersonnel extends Component {
                               <div className="mt-1">{user.name}</div>
                             }
                             <button
-                              className="btn btn-sm btn-outline-primary ml-2"
+                              className="btn btn-sm btn-outline-primary ms-2"
                               onClick={() => this.handleAddUser(user)}
                             >
                               <i className="fa fa-plus"></i>
@@ -276,10 +276,10 @@ class AddPersonnel extends Component {
                   {
                     usersFailedToFind.length > 0 &&
                     <div className="alert alert-warning max-height-overflow-scroll">
-                      <i className="fa fa-exclamation-triangle mr-2"></i>
+                      <i className="fa fa-exclamation-triangle me-2"></i>
                       We couldn't find the users below. Please make sure:  1. email is the first column of the CSV file; 2. name and email information 
                       are correct; 3. users have sucessfully enrolled as active FABRIC users.
-                      <ul className="list-group mt-2 ml-4">
+                      <ul className="list-group mt-2 ms-4">
                         {
                           usersFailedToFind.map((memberStr, index) => {
                             return (
@@ -300,7 +300,7 @@ class AddPersonnel extends Component {
             {
               searchCompleted && !showSpinner &&
               <div className="alert alert-success my-2" role="alert">
-                <i className="fa fa-check mr-2"></i>
+                <i className="fa fa-check me-2"></i>
                 Users below are uploaded successfully! Please click the <b>Add</b> button to complete adding to project members.
               </div>
             }
@@ -310,11 +310,11 @@ class AddPersonnel extends Component {
                 usersToAdd.map((user, index) => 
                 <li
                   key={`user-to-add-${index}`}
-                  className="mr-2 my-2"
+                  className="me-2 my-2"
                 >
                   {user.email ? `${user.name}(${user.email})` : user.name}
                 <i
-                  className="fa fa-times ml-2"
+                  className="fa fa-times ms-2"
                   onClick={() => {
                     this.handleDeleteUser(user.name);
                   }}
@@ -323,7 +323,7 @@ class AddPersonnel extends Component {
               }
             </ul>
             <button
-              className="btn btn-sm btn-outline-primary mr-3 mt-1"
+              className="btn btn-sm btn-outline-primary me-3 mt-1"
               onClick={() => this.props.onUpdateUsers(personnelType, this.getIDs(usersToAdd), "add")}
               disabled={ usersToAdd.length === 0}
             >

diff --git a/src/components/Project/Personnel/ProjectTokenHolders.jsx b/src/components/Project/Personnel/ProjectTokenHolders.jsx
@@ -100,13 +100,13 @@ class ProjectTokenHolders extends Component {
           </div>
         {
           !isTokenHolder && !isFO && !projectExpired && <button
-            className="btn btn-sm btn-outline-success mr-2 my-3"
+            className="btn btn-sm btn-outline-success me-2 my-3"
             onClick={() => window.open(
               `${portalData.jiraLinks.longlivedTokenRequest}?${urlSuffix}`,
               "_blank")
             }
           >
-            <i className="fa fa-sign-in mr-2"></i>
+            <i className="fa fa-sign-in me-2"></i>
             Request Long-lived Token Access
           </button>
         }

diff --git a/src/components/Project/ProjectBasicInfoTable.jsx b/src/components/Project/ProjectBasicInfoTable.jsx
@@ -85,7 +85,7 @@ class ProjectBasicInfoTable extends Component {
                 delay={{ show: 100, hide: 300 }}
                 overlay={this.renderTooltip("fabrix-matrix", fabricMatrixTooltip)}
               >
-                <i className="fa fa-question-circle text-secondary ml-2"></i>
+                <i className="fa fa-question-circle text-secondary ms-2"></i>
               </OverlayTrigger>
           </label>
           <input
@@ -128,7 +128,7 @@ class ProjectBasicInfoTable extends Component {
                 <tr>
                   <td>Project ID</td>
                   <td>
-                    <span className="mr-2">{ project.uuid }</span>
+                    <span className="me-2">{ project.uuid }</span>
                     <CopyButton
                       id={project.uuid}
                       text=""
@@ -141,7 +141,7 @@ class ProjectBasicInfoTable extends Component {
                   <td>
                     Project Permissions <a
                     href={`${portalData.learnArticles.guideToProjectPermissions}#project-permissions`}
-                    target="_blank" rel="noreferrer" className="ml-1">
+                    target="_blank" rel="noreferrer" className="ms-1">
                       <i className="fa fa-question-circle mx-2"></i>
                     </a>
                   </td>

diff --git a/src/components/Project/ProjectProfile.jsx b/src/components/Project/ProjectProfile.jsx
@@ -51,7 +51,7 @@ class ProjectProfile extends Component {
             <button
               className="btn btn-sm btn-outline-primary my-3"
             >
-              <i className="fa fa-sign-in mr-2"></i>
+              <i className="fa fa-sign-in me-2"></i>
               Back to Project List
             </button>
           </Link>
@@ -61,7 +61,7 @@ class ProjectProfile extends Component {
             <tr>
               <td>Project ID</td>
               <td>
-                <span className="mr-2">{ project.uuid }</span>
+                <span className="me-2">{ project.uuid }</span>
                 <CopyButton
                   id={project.uuid}
                   text=""
@@ -163,7 +163,7 @@ class ProjectProfile extends Component {
               {
                 project.communities && project.communities.length > 0 && project.communities.map((community, index) => {
                   return (<span
-                      className="badge badge-pill badge-primary mr-1"
+                      className="badge badge-pill badge-primary me-1"
                       key={`project-community-${index}`}
                     >
                       {community}

diff --git a/src/components/Project/ProjectTags.jsx b/src/components/Project/ProjectTags.jsx
@@ -37,7 +37,7 @@ class ProjectTags extends React.Component {
             tags.map(tag => <li key={`project-tag-${tag}`}>
               {tag}
             <i
-              className="fa fa-times ml-2"
+              className="fa fa-times ms-2"
               onClick={() => {
                 this.handleTagDelete(tag);
               }}