added header, logo, and explore

hcp-uw · Jan 21, 2025 · 18b4835 · 18b4835
1 parent 2e7775c
commit 18b4835
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 5 deletions.
diff --git a/client/src/components/AddEventModal/AddEventModal.tsx b/client/src/components/AddEventModal/AddEventModal.tsx
@@ -83,7 +83,7 @@ const AddEventModal = (props: AddEventModalProps) => {
   };
 
   return (
-    <dialog ref={addEventRef} className="card">
+    <dialog ref={addEventRef} className="card" >
       <div className="add-event-modal">
         <h2>Add event</h2>
         <input

diff --git a/client/src/components/Header/Header.css b/client/src/components/Header/Header.css
@@ -0,0 +1,18 @@
+.logo {
+    width: 70px;
+}
+
+.alignment {
+    display: flex;
+    justify-content: left;
+    padding-top: 10px;
+}
+
+.body {
+    padding-bottom: 10px;
+
+}
+
+.name {
+    padding-top: 9px;
+}
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
@@ -2,8 +2,11 @@ import './Header.css';
 
 const Header = () => {
   return (
-    <header>
-      <h1>Header</h1>
+    <header className = "body">
+      <div className = "alignment">
+        <img src= "src/components/Header/calendub-transparent.png" alt= "logo" className = "logo"></img>
+        <h1 className = "name"> CalenDub</h1>
+        </div>
     </header>
   );
 };

diff --git a/client/src/components/Header/calendub-transparent.png b/client/src/components/Header/calendub-transparent.png
diff --git a/client/src/components/PageHeader/PageHeader.css b/client/src/components/PageHeader/PageHeader.css
@@ -2,4 +2,24 @@
   display: block;
   width: 20rem;
   padding: 1rem;
+  padding-top: 10px;
 }
+
+.block {
+  padding-top: 32px;
+}
+
+.filter {
+  border: none;
+  border-radius: 12px;
+  padding: 10px 30px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 12px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.divide {
+  width: 5px;
+}
diff --git a/client/src/components/PageHeader/PageHeader.tsx b/client/src/components/PageHeader/PageHeader.tsx
@@ -2,8 +2,19 @@ import './PageHeader.css';
 
 const PageHeader = () => {
   return (
-    <div className="page-header card">
-      <h2>Page Header</h2>
+    <div className = "block">
+      <div className = "page-header card">
+        <h2>Explore</h2>
+        <p> Discover the most liked and anticipated events of the month!</p>
+        <br></br>
+        <p> Popular tags</p>
+        <div>
+          <button className = "filter"> testing </button>
+
+          <button className = "filter"> testing2 </button>
+          <button className = "filter"> testing3 </button>
+        </div>
+      </div>
     </div>
   );
 };