Migrate bootstrap - #1809

nova-components/ClientIdAndSecretModal/resources/js/components/ClientIdAndSecretModal.vue

@@ -53,12 +53,12 @@
             </div>
           </div>
             <ModalFooter>
-                <div class="flex items-center ml-auto">
+                <div class="flex items-center ms-auto">
                     <CancelButton
                         component="button"
                         type="button"
                         dusk="cancel-action-button"
-                        class="ml-auto mr-3"
+                        class="ms-auto me-3"
                         @click="$emit('close')"
                     >
                         Close

nova-components/PersonalAccessTokenModal/resources/js/components/PersonalAccessTokenModal.vue

@@ -18,12 +18,12 @@
               />
             </ModalContent>
             <ModalFooter>
-                <div class="flex items-center ml-auto">
+                <div class="flex items-center ms-auto">
                     <CancelButton
                         component="button"
                         type="button"
                         dusk="cancel-action-button"
-                        class="ml-auto mr-3"
+                        class="ms-auto me-3"
                         @click="$emit('close')"
                     >
                         Close

package.json

@@ -16,7 +16,7 @@
     "devDependencies": {
         "@sentry/webpack-plugin": "1.21.0",
         "alex": "11.0.1",
-        "bootstrap": "4.6.2",
+        "bootstrap": "5.3.3",
         "cross-env": "5.2.1",
         "laravel-mix": "6.0.49",
         "lodash": "4.17.21",
@@ -26,17 +26,16 @@
         "vue-loader": "15.11.1"
     },
     "dependencies": {
+        "@popperjs/core": "2.11.8",
         "@sentry/vue": "8.42.0",
         "axios": "1.7.9",
         "caniuse-lite": "1.0.30001688",
         "chartist": "0.11.4",
         "chartist-plugin-legend": "0.6.2",
         "chartist-plugin-pointlabels": "0.0.6",
-        "jquery": "3.7.1",
         "moment": "2.30.1",
-        "popper.js": "1.16.1",
         "sweetalert2": "11.14.5",
-        "vue": "2.7.16",
+        "vue": "^2.7.16",
         "vue-flatpickr-component": "8.1.8",
         "vue-moment": "4.1.0",
         "vue-select": "3.20.3",

resources/js/bootstrap.js

@@ -9,8 +9,7 @@ window._ = require('lodash');
  */
 
 try {
-    window.$ = window.jQuery = require('jquery');
-    window.Popper = require('popper.js').default;
+    window.Popper = require('@popperjs/core').default;
     require('bootstrap');
 } catch (e) {
 }

resources/js/components/ResumeUploadForm.vue

@@ -8,20 +8,13 @@
         to ensure they're always accurate.</p>
       <p>Your resume must be a one page PDF. The maximum file size is 1MB.</p>
 
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label">Resume</label>
-        <div class="col-sm-10 col-lg-4">
-          <div class="input-group mb-3">
-            <div class="custom-file">
-              <input type="file" class="custom-file-input" id="resume" name="resume" accept="application/pdf"
+      <div class="mb-3 row">
+        <label for="resume" class="col-sm-2 col-form-label">Resume</label>
+          <input type="file" class="form-control" id="resume" name="resume" accept="application/pdf"
                      v-on:change="fileChange">
-              <label class="custom-file-label" for="resume">{{ fileLabel }}</label>
-            </div>
-          </div>
-        </div>
       </div>
 
-      <div class="form-group">
+      <div class="mb-3">
         <button class="btn btn-primary" :disabled="uploading || !selectedFile" v-on:click="onSubmit">{{ uploading ? "Uploading file..." : "Upload" }}</button>
       </div>
     </div>

resources/js/components/UserEditForm.vue

@@ -5,7 +5,7 @@
           <h3>GT Directory Info</h3>
           <p>Information obtained via GT Single Sign-On. Update at <a href="https://passport.gatech.edu">Passport</a>.</p>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-name" class="col-sm-2 col-form-label">Name</label>
             <div class="col-sm-10 col-lg-4">
               <input v-model="user.full_name" type="text" readonly class="form-control" id="user-name">
@@ -17,7 +17,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-gtemail" class="col-sm-2 col-form-label">GT Email</label>
             <div class="col-sm-10 col-lg-4">
               <input v-model="user.gt_email" type="text" readonly class="form-control" id="user-gtemail">
@@ -26,7 +26,7 @@
 
           <h3>Additional Information</h3>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-preferredname" class="col-sm-2 col-form-label">Preferred First Name</label>
             <div class="col-sm-10 col-lg-4">
               <input
@@ -39,7 +39,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-phone" class="col-sm-2 col-form-label">Phone Number</label>
             <div class="col-sm-10 col-lg-4">
               <input
@@ -56,7 +56,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-shirtsize" class="col-sm-2 col-form-label">Shirt Size</label>
             <div class="col-sm-10 col-lg-4">
               <custom-radio-buttons
@@ -68,7 +68,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-polosize" class="col-sm-2 col-form-label">Polo Size</label>
             <div class="col-sm-10 col-lg-4">
               <custom-radio-buttons
@@ -83,7 +83,7 @@
           <div v-if="graduationInfoRequired">
             <h3>Graduation Information</h3>
 
-            <div class="form-group row">
+            <div class="mb-3 row">
               <label for="graduationInformation" class="col-sm-2 col-form-label">Graduation Date</label>
               <div class="col-sm-10 col-lg-4">
                 <term-input
@@ -102,7 +102,7 @@
           <h3>Emergency Contact</h3>
           <p>Emergency contact information is required for all trips off campus.</p>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-emergencyname" class="col-sm-2 col-form-label">Contact Name</label>
             <div class="col-sm-10 col-lg-4">
               <input
@@ -117,7 +117,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-emergencyphone" class="col-sm-2 col-form-label">Contact Phone Number</label>
             <div class="col-sm-10 col-lg-4">
               <input
@@ -138,31 +138,31 @@
           <h3>Air Travel Information</h3>
           <p>Legal name, legal gender, and date of birth are required for booking air travel for you to attend competitions and will not be used for any other purpose. This information must exactly match your government-issued identification to comply with TSA Secure Flight requirements. Please see <a href="https://pro.delta.com/content/agency/us/en/news/news-archive/2022/october-2022/non-binary-gender-identifiers-now-available.html">Delta Air Lines guidance on gender identifiers</a> if needed.</p>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="legal-first-name" class="col-sm-2 col-form-label">Legal First Name</label>
             <div class="col-sm-10 col-lg-4">
               <input id="legal-first-name" type="text" v-model="user.first_name" class="form-control" readonly>
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="legal-middle-name" class="col-sm-2 col-form-label">Legal Middle Name</label>
             <div class="col-sm-10 col-lg-4">
               <input id="legal-middle-name" type="text" v-model="user.legal_middle_name" class="form-control">
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="legal-last-name" class="col-sm-2 col-form-label">Legal Last Name</label>
             <div class="col-sm-10 col-lg-4">
               <input id="legal-last-name" type="text" v-model="user.last_name" class="form-control" readonly>
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="legal-gender" class="col-sm-2 col-form-label">Legal Gender</label>
             <div class="col-sm-10 col-lg-4">
-              <select id="legal-gender" v-model="user.legal_gender" class="custom-select">
+              <select id="legal-gender" v-model="user.legal_gender" class="form-select">
                 <option value="M">Male (M)</option>
                 <option value="F">Female (F)</option>
                 <option value="X">Unspecified (X)</option>
@@ -171,14 +171,14 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="date-of-birth" class="col-sm-2 col-form-label">Date of Birth</label>
             <div id="date-of-birth" class="col-sm-10 col-lg-4">
               <input id="date-of-birth" type="date" v-model="user.date_of_birth" class="form-control">
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="delta-skymiles-number" class="col-sm-2 col-form-label">Delta SkyMiles Number</label>
             <div id="delta-skymiles-number" class="col-sm-10 col-lg-4">
               <input id="delta-skymiles-number" type="text" v-model="user.delta_skymiles_number" class="form-control">
@@ -187,7 +187,7 @@
 
           <h3>Linked Accounts</h3>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-github" class="col-sm-2 col-form-label">GitHub</label>
             <div class="col-sm-10 col-lg-4">
               <div class="input-group">
@@ -199,7 +199,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-google" class="col-sm-2 col-form-label">Google</label>
             <div class="col-sm-10 col-lg-4">
               <div class="input-group">
@@ -211,7 +211,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-sums" class="col-sm-2 col-form-label">SUMS</label>
             <div class="col-sm-10 col-lg-4">
               <div class="input-group">
@@ -228,7 +228,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-clickup" class="col-sm-2 col-form-label">ClickUp</label>
             <div class="col-sm-10 col-lg-4">
               <div class="input-group">
@@ -250,7 +250,7 @@
             </div>
           </div>
 
-          <div class="form-group">
+          <div class="mb-3">
             <button type="submit" class="btn btn-primary">Save Changes</button>
             <em><span v-bind:class="{ 'text-danger': hasError}"> {{feedback}} </span></em>
           </div>