some changes in the view pages - Bootstrap 5

Author: glaucia86

client/package-lock.json

@@ -9,11 +9,11 @@
     "lint-fix": "npm run lint --fix"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/vue-fontawesome": "^2.0.8",
     "axios": "^0.21.1",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^5.2.0",
     "chokidar": "^3.5.3",
     "core-js": "^3.24.1",
     "date-fns": "^2.29.2",

client/package.json

@@ -1,16 +1,23 @@
 <template>
   <div id="app">
     <!-- BEGIN NAVBAR -->
-    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
-      <a class="navbar-brand order-md-last">Full Stack App - Azure SQL + Prisma</a>
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-          <router-link class="nav-link" to="/">Create New Employee</router-link>
-        </li>
-        <li class="nav-item">
-          <router-link class="nav-link" to="/list-employees">List All Employees</router-link>
-        </li>
-      </ul>
+    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
+      <div class="container-fluid">
+        <a class="navbar-brand">Full Stack App - Azure SQL + Prisma</a>
+
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <router-link class="nav-link" to="/"
+              >Create New Employee</router-link
+            >
+          </li>
+          <li class="nav-item">
+            <router-link class="nav-link" to="/list-employees"
+              >List All Employees</router-link
+            >
+          </li>
+        </ul>
+      </div>
     </nav>
     <!-- END NAVBAR -->
 

client/src/App.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="container">
-    <div class="card">
+    <div class="card border-secondary mb-3">
       <div class="card-header">
         <h3>Add Employee</h3>
       </div>
       <div class="card-body">
         <form v-on:submit.prevent="handleSubmitForm()">
           <!-- INÍCIO BLOCO: Employee Name -->
-          <div class="form-group">
-            <label class="font-weight-bold">Employee Name</label>
+          <div class="mb-3 mt-3">
+            <label class="form-label fw-bold">Employee Name</label>
             <input
               type="text"
               id="name"
@@ -30,8 +30,8 @@
           <!-- FIM BLOCO: Employee Name -->
 
           <!-- INÍCIO BLOCO: Job Role -->
-          <div class="form-group">
-            <label class="font-weight-bold">Job Role</label>
+          <div class="mb-3 mt-3">
+            <label class="form-label fw-bold">Job Role</label>
             <input
               type="text"
               id="job_role"
@@ -53,8 +53,8 @@
           <!-- FIM BLOCO: Job Role -->
 
           <!-- INÍCIO BLOCO: Salary -->
-          <div class="form-group">
-            <label class="font-weight-bold">Salary</label>
+          <div class="mb-3 mt-3">
+            <label class="form-label fw-bold">Salary</label>
             <input
               type="number"
               id="salary"
@@ -76,8 +76,8 @@
           <!-- FIM BLOCO: Salary -->
 
           <!-- INÍCIO BLOCO: Employee Registration -->
-          <div class="form-group">
-            <label class="font-weight-bold">Employee Registration</label>
+          <div class="mb-3 mt-3">
+            <label class="form-label fw-bold">Employee Registration</label>
             <input
               type="number"
               id="employee_registration"
@@ -100,7 +100,7 @@
             </div>
           </div>
           <!-- FIM BLOCO: Employee Registration -->
-          <div class="form-group">
+          <div class="mb-3 mt-3">
             <button @click="submitNewEmployee" class="btn btn-primary">
               <font-awesome-icon :icon="['fas', 'user-plus']" /> Employee
             </button>