switch to just .svg

acmcsufoss · Sep 25, 2024 · 0bafe08 · 0bafe08
1 parent 735d0ff
commit 0bafe08
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 16 deletions.
diff --git a/src/components/CloseIcon.svelte → public/closeIcon.svg b/src/components/CloseIcon.svelte → public/closeIcon.svg
diff --git a/src/components/DiagonalArrow.astro → public/diagonalArrow.svg b/src/components/DiagonalArrow.astro → public/diagonalArrow.svg
diff --git a/src/components/ContributorPopup.svelte b/src/components/ContributorPopup.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { fade, fly } from "svelte/transition";
-  import CloseIcon from "./CloseIcon.svelte";
   import type { Fa2024MarkdownEntry } from "../types";
 
   export let isOpen = false;
@@ -28,7 +27,7 @@
     out:fly={{ y: 40, duration: 150 }}
   >
     <button class="custom-close-btn" on:click={toggleContainer}>
-      <CloseIcon />
+      <img src="/1st/closeIcon.svg" alt="Close Icon" />
     </button>
 
     <h2>{name}</h2>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,4 @@
 ---
-import DiagonalArrow from "../components/DiagonalArrow.astro";
 import FloatingBoxes from "../components/FloatingBoxes.astro";
 import Layout from "../layouts/Layout.astro";
 ---
@@ -20,11 +19,11 @@ import Layout from "../layouts/Layout.astro";
     <div class="semester-links">
       <a class="arrow-link" href="/1st/fa24">
         <span> Fall 2024 Contributors </span>
-        <DiagonalArrow />
+        <img src="/1st/diagonalArrow.svg" alt="Link Icon" class="arrow-icon" />
       </a>
       <a class="arrow-link" href="/1st/sp24">
         <span> Spring 2024 Contributors </span>
-        <DiagonalArrow />
+        <img src="/1st/diagonalArrow.svg" alt="Link Icon" class="arrow-icon" />
       </a>
     </div>
   </main>
@@ -68,6 +67,14 @@ import Layout from "../layouts/Layout.astro";
     color: white;
   }
 
+  .arrow-link:hover .arrow-icon {
+    transform: translate(2px, -2px);
+  }
+
+  .arrow-icon {
+    transition: transform 0.3s ease;
+  }
+
   @media screen and (min-width: 768px) {
     main {
       padding: 1rem 1.25rem;