From 32ca502652a19dd6a58f1812b9d2c14f8a8483f8 Mon Sep 17 00:00:00 2001
From: Selin <sakk842@aucklanduni.ac.nz>
Date: Fri, 26 Jul 2024 13:23:54 +1200
Subject: [PATCH] Adding button text for filter

---
 web/src/pages/events/index.astro | 13 ++++++-------
 web/src/pages/events/styles.css  | 12 ++++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 web/src/pages/events/styles.css

diff --git a/web/src/pages/events/index.astro b/web/src/pages/events/index.astro
index a48440f..3410274 100644
--- a/web/src/pages/events/index.astro
+++ b/web/src/pages/events/index.astro
@@ -10,11 +10,10 @@ import Layout from "@/layouts/layout.astro";
       We aim to help students develop practical skills that can be used in the workforce.
       We host social events to help students network among peers and with industry people.
     </p>
-    <button
-      class="mt-6 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-      onClick={handleFilterClick}
-    >
-      Filter
-    </button>
+
+    <!-- filter button -->
+    <div class="my-4">
+    <button class="filter-button">Filter By</button>
+    </div>
   </section>
-</Layout>
+</Layout>
\ No newline at end of file
diff --git a/web/src/pages/events/styles.css b/web/src/pages/events/styles.css
new file mode 100644
index 0000000..75c6214
--- /dev/null
+++ b/web/src/pages/events/styles.css
@@ -0,0 +1,12 @@
+.filter-button {
+  background-color: #b3e5fc; /* Light blue */
+  border: none;
+  padding: 10px 20px;
+  border-radius: 25px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.filter-button:focus {
+  outline: none;
+}