Merge pull request #96 from code4rena-dev/nlf/fix-paths

chore: make all image references use relative paths

Author: nlf

.storybook/manager-header.html

@@ -1,2 +1,2 @@
 <link rel="shortcut icon" href="/favicon.ico">
-<link rel="icon" type="image/png" href="/logos/apple-touch-icon.png" sizes="192x192">
+<link rel="icon" type="image/png" href="./logos/apple-touch-icon.png" sizes="192x192">

.storybook/theme.ts

@@ -4,7 +4,7 @@ export default create({
   base: "dark",
   brandUrl: "https://code4rena.com",
   brandTitle: "Code4rena Storybook",
-  brandImage: "/logos/c4-logo.svg",
+  brandImage: "./logos/c4-logo.svg",
   brandTarget: "_blank",
 
   // UI

src/lib/Avatar/Avatar.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof Avatar>;
 
 export const ImageAvatar: Story = (args) => <Avatar {...args} />;
 ImageAvatar.args = {
-  imgElement: <img src="/images/default-avatar.png" alt="Placeholder" />,
+  imgElement: <img src="./images/default-avatar.png" alt="Placeholder" />,
   name: "0xJohnWithALongName",
   size: 50,
   round: 25,

src/lib/Avatar/Avatar.test.tsx

@@ -12,11 +12,11 @@ const defaultArgs = {
 describe("========== Avatar Component - RUNNING TESTS ==========", () => {
   test("Renders with image avatar", () => {
     const imgElement = (
-      <img src="/images/default-avatar.png" alt="Placeholder" />
+      <img src="./images/default-avatar.png" alt="Placeholder" />
     );
     render(<Avatar imgElement={imgElement} {...defaultArgs} />);
     const avatar = screen.getByRole("img");
-    expect(avatar).toHaveAttribute("src", "/images/default-avatar.png");
+    expect(avatar).toHaveAttribute("src", "./images/default-avatar.png");
   });
 
   test("Renders with initials avatar", () => {
@@ -27,7 +27,7 @@ describe("========== Avatar Component - RUNNING TESTS ==========", () => {
 
   test("Sets alt text for image avatar", () => {
     const imgElement = (
-      <img src="/images/default-avatar.png" alt="User avatar" />
+      <img src="./images/default-avatar.png" alt="User avatar" />
     );
     render(<Avatar imgElement={imgElement} {...defaultArgs} />);
     const avatar = screen.getByAltText("User avatar");

src/lib/Card/Card.stories.tsx

@@ -32,7 +32,7 @@ SampleComponent.args = {
   children: <div>Team lead</div>,
   title: "MangoBurger",
   imageSize: CardImageSize.MEDIUM,
-  image: <img src="/images/default-avatar.png" />,
+  image: <img src="./images/default-avatar.png" />,
   imageBorderRadius: CardImageBorderRadius.CIRCLE,
   cta: { text: "Follow", onClick: () => console.log("follow") },
   variants: [

src/lib/ContestTile/ContestTile.stories.tsx

@@ -53,7 +53,7 @@ const defaultArgs = {
     endDate: "2030-07-21T18:00:00.000Z",
   },
   variant: ContestTileVariant.DARK,
-  sponsorImage: "/logos/apple-touch-icon.png",
+  sponsorImage: "./logos/apple-touch-icon.png",
   sponsorUrl: "https://twitter.com/axelarcore",
   title: "Axelar Network",
   description: "Decentralized interoperability network.",
@@ -342,7 +342,7 @@ BountyTile.args = {
     languages: ["Rust"] as CodingLanguage[],
   },
   variant: ContestTileVariant.LIGHT,
-  sponsorImage: "/logos/apple-touch-icon.png",
+  sponsorImage: "./logos/apple-touch-icon.png",
   sponsorUrl: "https://twitter.com/axelarcore",
   title: "Axelar Network",
   description: "Decentralized interoperability network."

src/lib/NavBar/NavBar.stories.tsx

@@ -32,7 +32,7 @@ SampleComponent.args = {
   className: "",
   isLoggedIn: false,
   hideConnectWalletDropdown: false,
-  userImage: "/logos/apple-touch-icon.png",
+  userImage: "./logos/apple-touch-icon.png",
   username: "TestUser",
   navLinks: [
     { label: "How it works", href: "/how-it-works" },