fix colors, add icons, remove button

WISVCH · Dec 1, 2023 · 9b1f1da · 9b1f1da
1 parent 4e4043e
commit 9b1f1da
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/_variables.scss b/src/_variables.scss
@@ -1,5 +1,6 @@
 $background-color: #002E78;
-$primary-color: #389EE9;
+$primary-color: #84C1EE;
+$primary-color-darker: #389EE9;
 $secondary-color: #DB00FF;
 $tu-color: #00a6d6;
 $discord-color: #7289da;

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -1,8 +1,12 @@
 import { h, FunctionalComponent } from "preact";
+import { faCalendarDay, faLocationDot } from "@fortawesome/free-solid-svg-icons";
+
 
 import * as style from "./style.scss";
 
 import icon from "url:/static/HogeResolutieLogo.png?as=webp&width=500";
+import { Icon } from "/src/components/icon";
+
 
 /**
  * Renders the header of the site.
@@ -12,12 +16,15 @@ export const Header: FunctionalComponent = () => (
         <div class={style.container}>
             <img src={icon} alt="HackDelft" />
             <div class={style.text}>
-                <p>25 and 26 may 2024</p>
-                <p>X TU Delft</p>
+
+                <p> <Icon icon={faCalendarDay}/> 25 and 26 may 2024</p>
+                <p> <Icon icon={faLocationDot}/> X TU Delft</p>
             </div>
             <div class={style.buttons}>
-                <button>Tickets</button>
-                <button class={style.secondary}>Join Discord</button>
+                {/* TODO: uncomment when tickets are online */}
+                {/* <button>Tickets</button> */}
+                {/* <button class={style.secondary}>Join Discord</button> */}
+                <button href="https://discord.gg/rB2ucUaFnc" target="_blank">Join Discord</button>
             </div>
         </div>
 

diff --git a/src/components/header/style.scss b/src/components/header/style.scss
@@ -42,6 +42,11 @@
         font-size: 18px;
         padding: 10px 15px;
         width: 200px;
+
+        &:hover {
+            background-color: $primary-color-darker;
+            cursor: pointer;
+        }
     }
 
     button.secondary {