Upgrade bootstrap to version 5

package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "axios": "~0.26.0",
-    "bootstrap": "^4.6.1",
+    "bootstrap": "^5.1.3",
     "json-server": "~0.17.0",
     "pinia": "^2.0.11",
     "vue": "^3.2.31",

src/App.vue

@@ -25,23 +25,35 @@ watch(isAuthenticated, (value) => {
 </template>
 
 <style lang="scss">
-/* Define variables to oberwrite/add to Bootstrap theme */
+// Bootstrap's utilities functions
+@import 'node_modules/bootstrap/scss/functions';
+
+// Bootstrap's variables to be overridden
 $border-radius: 0.5rem;
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
   lg: 1000px,
-  xl: 1280px
+  xl: 1280px,
+  xxl: 1400px
 );
-$theme-colors: (
+
+// Bootstrap's utilities
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/root';
+
+// Colors to merge to Bootstrap's theme
+$custom-colors: (
   hero: #d8621e
 );
+$theme-colors: map-merge($theme-colors, $custom-colors);
 
-/* Import Bootstrap framework */
+// Bootstrap's required styles
 @import 'node_modules/bootstrap/scss/bootstrap';
 
-/* Additional custom styles */
+// Additional global styles
 html, body, #app {
   width: 100%;
   height: 100%;

src/components/BookCard.vue

@@ -32,7 +32,7 @@ const truncatedTitle = computed(() => {
         </h5>
       </div>
       <div class="card-footer">
-        <router-link :to="route" class="btn btn-hero">
+        <router-link :to="route" class="btn btn-hero my-2">
           Ver Detalhes
         </router-link>
       </div>
@@ -49,7 +49,7 @@ const truncatedTitle = computed(() => {
     flex-direction: column;
 
     height: 100%;
-    border: 1px solid var(--hero);
+    border: 1px solid var(--bs-hero);
     text-align: center;
 
     img {
@@ -60,6 +60,7 @@ const truncatedTitle = computed(() => {
 
     a {
       width: 80%;
+      color: #fff;
     }
   }
 }

src/components/Logo.vue

@@ -1,6 +1,6 @@
 <template>
-  <span id="logo" class="h1">
-    Estante<span class="badge badge-hero p-1">Virtual</span>
+  <span id="logo" class="h2">
+    Estante<span>Virtual</span>
   </span>
 </template>
 
@@ -10,5 +10,12 @@
   font-weight: bold;
   text-decoration: none;
   user-select: none;
+
+  span {
+    border-radius: 0.5rem;
+    background-color: var(--bs-hero);
+    padding: 0.25rem;
+    color: #fff;
+  }
 }
 </style>

src/components/SideBar.vue

@@ -58,18 +58,22 @@ function handleSignOut() {
   opacity: 0.95;
 
   width: 100%;
-  background: var(--light);
+  background: var(--bs-light);
   margin-bottom: 2rem;
 
+  a {
+    text-decoration: none;
+
+    &:hover, &:active {
+      text-decoration: none;
+    }
+  }
+
   .side-bar-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 2rem 1.5rem;
-
-    a:hover, a:active {
-      text-decoration: none;
-    }
   }
 
   .nav-links a {
@@ -79,15 +83,14 @@ function handleSignOut() {
     color: #616161;
     font-size: 25px;
     text-align: left;
-    text-decoration: none;
 
     &.router-link-exact-active {
       background: #d8814f;
       color: #fff;
     }
 
     &:hover, &.router-link-exact-active:hover {
-      background: var(--hero);
+      background: var(--bs-hero);
       color: #fff;
     }
   }
@@ -103,6 +106,10 @@ function handleSignOut() {
 
     font-size: 1.2rem;
     font-weight: bold;
+
+    &:hover {
+      color: #fff;
+    }
   }
 
   @media (min-width: 1000px) {

src/pages/Auth/SignIn.vue

@@ -30,16 +30,16 @@ watch(() => state.email, (newValue) => {
 <template>
   <form id="sign-in" @submit.prevent="handleSubmit">
     <div
-      role="alert"
       class="alert alert-danger border-danger"
+      role="alert"
       :style="{ visibility: auth.errors.length ? 'visible' : 'hidden' }"
     >
       <p class="text-danger" v-for="error in auth.errors" :key="error">
         {{ error }}
       </p>
     </div>
 
-    <label for="email" class="sr-only">
+    <label for="email" class="visually-hidden">
       Endereço de email
     </label>
     <input
@@ -52,7 +52,7 @@ watch(() => state.email, (newValue) => {
       v-model="state.email"
     />
 
-    <label for="password" class="sr-only">
+    <label for="password" class="visually-hidden">
       Senha de acesso
     </label>
     <input
@@ -74,15 +74,15 @@ watch(() => state.email, (newValue) => {
 
     <button
       type="submit"
-      class="mt-3 btn btn-lg btn-hero btn-block"
+      class="mt-3 btn btn-lg btn-hero btn-block text-white"
       :disabled="auth.isLoading"
     >
       Entrar
     </button>
 
     <p class="mt-1 text-center">
       Não é cadastrado?
-      <router-link :to="{ name: 'SignUp' }" class="text-hero">
+      <router-link :to="{ name: 'SignUp' }">
         Registre-se aqui
       </router-link>
     </p>

src/pages/Auth/SignUp.vue

@@ -41,7 +41,7 @@ watch(() => state.email, (newValue) => {
       </p>
     </div>
 
-    <label for="name" class="sr-only">
+    <label for="name" class="visually-hidden">
       Nome do usuário
     </label>
     <input
@@ -54,7 +54,7 @@ watch(() => state.email, (newValue) => {
       v-model="state.name"
     />
 
-    <label for="email" class="sr-only">
+    <label for="email" class="visually-hidden">
       Endereço de email
     </label>
     <input
@@ -66,7 +66,7 @@ watch(() => state.email, (newValue) => {
       v-model="state.email"
     />
 
-    <label for="password" class="sr-only">
+    <label for="password" class="visually-hidden">
       Senha de acesso
     </label>
     <input
@@ -78,7 +78,7 @@ watch(() => state.email, (newValue) => {
       v-model="state.password"
     />
 
-    <label for="password-confirmation" class="sr-only">
+    <label for="password-confirmation" class="visually-hidden">
       Confirmação da senha
     </label>
     <input
@@ -92,13 +92,13 @@ watch(() => state.email, (newValue) => {
 
     <button
       type="submit"
-      class="btn btn-lg btn-hero"
+      class="btn btn-lg btn-hero text-white"
       :disabled="auth.isLoading"
     >
       Cadastrar
     </button>
     <p class="mt-1 text-center">
-      <router-link :to="{ name: 'SignIn' }" class="text-hero">
+      <router-link :to="{ name: 'SignIn' }">
         Já sou cadastrado
       </router-link>
     </p>

src/pages/Auth/index.vue

@@ -32,7 +32,7 @@ import Logo from '@/components/Logo.vue'
     width: 100%;
     max-width: 350px;
     border-radius: 0.5rem;
-    background: var(--light);
+    background: var(--bs-light);
     padding: 1rem;
   }
 
@@ -55,7 +55,7 @@ import Logo from '@/components/Logo.vue'
   input.form-control {
     margin-bottom: -1px;
     border-radius: 0;
-    padding: 1.2rem 0.6rem;
+    padding: 0.75rem 1.25rem;
 
     line-height: 1.2rem;
     font-size: 1.0rem;
@@ -68,10 +68,10 @@ import Logo from '@/components/Logo.vue'
       box-shadow: none;
 
       outline: none;
-      border: solid 1px var(--hero);
+      border: solid 1px var(--bs-hero);
 
-      line-height: 1.0rem;
-      font-size: 1.2rem;
+      line-height: 1.1rem;
+      font-size: 1.25rem;
     }
   }
 

src/pages/Home/BookDetails.vue

@@ -251,7 +251,7 @@ onMounted(async () => {
             </button>
             <button
               type="button"
-              class="btn btn-danger mr-auto"
+              class="btn btn-danger me-auto"
               v-if="isEditing && !book.loan && owner.id === userData?.id && props.bookId !== 'novo'"
               :disabled="isLoading"
               @click="handleDelete"
@@ -322,6 +322,10 @@ onMounted(async () => {
 
     & .btn {
       margin: 1.5rem 0.5rem;
+
+      &.btn-hero {
+        color: #fff;
+      }
     }
   }
 

src/pages/Home/BooksManager.vue

@@ -24,7 +24,7 @@ const books = computed<Book[]>(() => bookStore[props.type] ?? [])
 
       <router-link
         :to="{ name: 'BookDetails', params: { bookId: 'novo' }}"
-        class="btn btn-hero"
+        class="btn btn-hero text-white"
         v-if="props.type === 'userBooks'"
       >+ Cadastrar Novo Livro</router-link>
     </header>

src/pages/Home/Bookshelves.vue

@@ -37,8 +37,8 @@ const visibleBooks = computed(() => {
       </div>
 
       <div class="filter-container col-12 col-lg-6 order-lg-1 col-xl-5">
-        <input type="radio" id="filter-1" class="sr-only" value="available" v-model="filter" />
-        <input type="radio" id="filter-2" class="sr-only" value="borrowed" v-model="filter" />
+        <input type="radio" id="filter-1" class="visually-hidden" value="available" v-model="filter" />
+        <input type="radio" id="filter-2" class="visually-hidden" value="borrowed" v-model="filter" />
         <label
           for="filter-1"
           :class="['btn', filter === 'available' ? 'btn-hero' : 'btn-outline-hero']"
@@ -70,7 +70,7 @@ const visibleBooks = computed(() => {
     margin-bottom: 1rem;
 
     input {
-      border: 1px solid var(--hero);
+      border: 1px solid var(--bs-hero);
     }
 
     img {
@@ -94,6 +94,10 @@ const visibleBooks = computed(() => {
     & > label {
       flex-grow: 1;
 
+      &:hover, &.btn-hero {
+        color: #fff;
+      }
+
       &:first-of-type {
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;

src/pages/Home/UserProfile.vue

@@ -163,7 +163,7 @@ onMounted(async () => {
         >Cancelar</button>
         <button
           type="submit"
-          class="btn btn-hero"
+          class="btn btn-hero text-white"
           :disabled="!passwordsMatch || isLoading"
           v-if="isEditing"
         >Concluído</button>

src/pages/Home/index.vue

@@ -31,7 +31,7 @@ import SideBar from '@/components/SideBar.vue'
     opacity: 0.95;
     width: calc(100% - 4rem);
     margin: 2rem;
-    background: var(--light);
+    background: var(--bs-light);
     padding: 2rem 2rem 0;
   }
 

yarn.lock

@@ -2212,10 +2212,10 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^4.6.1:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.1.tgz#bc25380c2c14192374e8dec07cf01b2742d222a2"
-  integrity sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==
+bootstrap@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
 
 boxen@^5.0.0:
   version "5.1.2"