From 31b4ba0644fe03a64877c0c3b0ed734ace68f036 Mon Sep 17 00:00:00 2001
From: Hugo Veiga <hugoveiga10@gmail.com>
Date: Fri, 3 Nov 2023 15:58:57 +0100
Subject: [PATCH] Fix new images in NavigationBar and CharacterCard

---
 src/components/CharacterCard/CharacterCard.tsx      | 6 +++---
 src/components/NavigationBar/NavigationBar.test.tsx | 8 ++++----
 src/components/NavigationBar/NavigationBar.tsx      | 4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/CharacterCard/CharacterCard.tsx b/src/components/CharacterCard/CharacterCard.tsx
index 8e3b13c..5b46edd 100644
--- a/src/components/CharacterCard/CharacterCard.tsx
+++ b/src/components/CharacterCard/CharacterCard.tsx
@@ -26,7 +26,7 @@ const CharacterCard = ({
       <div className="character-card__icon-container">
         <NavLink to={`/`}>
           <img
-            src={"images/button-info.webp"}
+            src={"images/button-info.svg"}
             alt="Go to character details"
             width="48"
             height="48"
@@ -35,7 +35,7 @@ const CharacterCard = ({
         </NavLink>
         <button>
           <img
-            src={"images/button-trash.webp"}
+            src={"images/button-trash.svg"}
             alt="Eliminate character"
             width="48"
             height="48"
@@ -44,7 +44,7 @@ const CharacterCard = ({
         </button>
         <NavLink to={`/`} end>
           <img
-            src={"images/button-edit.webp"}
+            src={"images/button-edit.svg"}
             alt="Go to edit character"
             width="48"
             height="48"
diff --git a/src/components/NavigationBar/NavigationBar.test.tsx b/src/components/NavigationBar/NavigationBar.test.tsx
index 96015a1..367c003 100644
--- a/src/components/NavigationBar/NavigationBar.test.tsx
+++ b/src/components/NavigationBar/NavigationBar.test.tsx
@@ -8,7 +8,7 @@ describe("Given a NavigationBar component", () => {
   describe("When is rendered", () => {
     test("Then it should show the image `button-home`", () => {
       const expectedAltText = "Home button";
-      const expectedImageSrc = "images/button-home.webp";
+      const expectedImageSrc = "images/button-home.svg";
 
       render(
         <BrowserRouter>
@@ -24,7 +24,7 @@ describe("Given a NavigationBar component", () => {
 
     test("Then it should show the image `button-plus`", () => {
       const expectedAltText = "Add character button";
-      const expectedImageSrc = "images/button-plus.webp";
+      const expectedImageSrc = "images/button-plus.svg";
 
       render(
         <BrowserRouter>
@@ -40,7 +40,7 @@ describe("Given a NavigationBar component", () => {
   });
 
   describe("When is rendered and we are at `/home`", () => {
-    test("Then it should show the image `button-plus.webp` with the className `navigation__icon--active`", () => {
+    test("Then it should show the image `button-plus.svg` with the className `navigation__icon--active`", () => {
       const expectedAltText = "Home button";
       const expectedImageClassName = "navigation__icon--active";
 
@@ -58,7 +58,7 @@ describe("Given a NavigationBar component", () => {
   });
 
   describe("When is rendered and we are at `/addCharacter`", () => {
-    test("Then it should show the image `button-plus.webp` with the className `navigation__icon`", () => {
+    test("Then it should show the image `button-plus.svg` with the className `navigation__icon`", () => {
       const expectedAltText = "Home button";
       const expectedImageClassName = "navigation__icon";
 
diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx
index 4237230..d3cf36c 100644
--- a/src/components/NavigationBar/NavigationBar.tsx
+++ b/src/components/NavigationBar/NavigationBar.tsx
@@ -17,7 +17,7 @@ const NavigationBar = (): React.ReactElement => {
                   ? "navigation__icon--active"
                   : "navigation__icon"
               }
-              src="images/button-home.webp"
+              src="images/button-home.svg"
               alt="Home button"
               width={48}
               height={48}
@@ -32,7 +32,7 @@ const NavigationBar = (): React.ReactElement => {
                   ? "navigation__icon--active"
                   : "navigation__icon"
               }
-              src="images/button-plus.webp"
+              src="images/button-plus.svg"
               alt="Add character button"
               width={48}
               height={48}