button links styled

Author: the-duckchild

package-lock.json

@@ -8,6 +8,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.5",
+    "history": "^5.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.0",

package.json

@@ -15,13 +15,25 @@
 .homeButton  {
     display: flex;
     flex-direction: column;
-    justify-items: center;
+    align-items: center;
 }
 
 .profilePageButton {
     display: flex;
     flex-direction: column;
-    justify-items: center;
+    align-items: center;
+  
+}
+
+#astroButton {
+    width: 5vw;
+    min-width: 40px;
+
+}
+
+#earthButton {
+    width: 5vw;
+    min-width: 40px;
 }
 
 a {

src/Components/AddNavBar/Images/Astro.avif

@@ -1,12 +1,20 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import NavBar from "./NavBar";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import { createMemoryHistory } from "history";
+import {BrowserRouter} from "react-router-dom";
+import { createBrowserHistory } from "history";
 
 describe(NavBar, () => {
   it("Should change current location to profile when link is clicked", () => {
-    const history = createMemoryHistory({ initialEntries: ["/"] });
+    const history = createBrowserHistory({ window });
+    render(
+      <BrowserRouter>
+        <NavBar />
+      </BrowserRouter>,
+    );
+    const linkProfile = screen.getByText("Profile");
+    userEvent.click(linkProfile);
   });
 });

src/Components/AddNavBar/Images/Earth.avif

@@ -1,7 +1,8 @@
 import React from "react";
 import "./NavBar.scss";
 import { Link } from "react-router";
-
+import imageAstro from "./Images/astronautcartoon.png";
+import imageEarth from "./Images/cartoon earth.png";
 
 export default function NavBar() {
   return (
@@ -10,15 +11,16 @@ export default function NavBar() {
         <nav className="navBarContainer">
           <div>
             <Link to="/" className="homeButton" id="homeLink">
-              <img src="./Images/Earth.avif" alt="cartoon earth illustration" />
+              <img src={imageEarth} alt="imageEarth" id="earthButton" />
               Home
             </Link>
           </div>
           <div>
             <Link to="profile" className="profilePageButton" id="profileLink">
               <img
-                src="./Images/Astro.avif"
+                src={imageAstro}
                 alt="cartoon astronaut illustration"
+                id="astroButton"
               />
               Profile
             </Link>

src/Components/AddNavBar/Images/astronautcartoon.png

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}