➡️ merge pull request #41 from devsoc-unsw/feature/eventDetailsComponent

Feature/event details component

frontend/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
       rel="stylesheet"
     />
     <title>Pyramids</title>

frontend/src/App.tsx

@@ -3,14 +3,14 @@ import NavBar from "./NavBar/NavBar";
 import { BrowserRouter, Route, Routes } from "react-router";
 import HomePage from "./HomePage/HomePage";
 import AboutPage from "./About/About";
-import Calendar from "./Calendar/Calendar"
+import Calendar from "./Calendar/Calendar";
 import LoginPage from "./Login/Login";
 import RegisterPage from "./Register/Register";
-import { Settings } from './Settings/Settings';
-import { ProfilePage } from './Settings/SettingsPage/ProfilePage/ProfilePage';
-import { EventManagementPage } from './Settings/SettingsPage/EventManagementPage/EventManagementPage';
-import { CreateNewEventPage } from './Settings/SettingsPage/EventManagementPage/CreateNewEvent/CreateNewEvent';
-import { DiscordPage } from './Settings/SettingsPage/DiscordPage/DiscordPage';
+import { Settings } from "./Settings/Settings";
+import { ProfilePage } from "./Settings/SettingsPage/ProfilePage/ProfilePage";
+import { EventManagementPage } from "./Settings/SettingsPage/EventManagementPage/EventManagementPage";
+import { CreateNewEventPage } from "./Settings/SettingsPage/EventManagementPage/CreateNewEvent/CreateNewEvent";
+import { DiscordPage } from "./Settings/SettingsPage/DiscordPage/DiscordPage";
 
 function App() {
   return (
@@ -19,7 +19,7 @@ function App() {
         <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="/about" element={<AboutPage />} />
-          <Route path="/timeline" element={<Calendar/>}/> //
+          <Route path="/timeline" element={<Calendar />} /> //
           <Route path="/login" element={<LoginPage />} />
           <Route path="/register" element={<RegisterPage />} />
           <Route path="/settings" element={<Settings />}>

frontend/src/Button/Button.module.css

@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0px;
+  padding: 16px;
   margin: 0px;
   background: none;
   outline: 2px solid white;
@@ -19,6 +19,10 @@
   cursor: pointer;
 }
 
+.stringButton {
+  padding: 12px 28px;
+}
+
 .primary {
   background: hsl(203, 88%, 27%);
   color: hsl(202, 49%, 90%);
@@ -49,11 +53,10 @@
 
 .icon {
   height: 64px;
-  padding: 16px;
 }
 
-.string {
-  padding: 12px 28px;
+.round-secondary {
+  border-radius: 50%;
 }
 
 .round-secondary {

frontend/src/Button/Button.tsx

@@ -4,6 +4,8 @@ import {
   BookmarkIcon,
   ChevronLeftIcon,
   MagnifyingGlassIcon,
+  ShareIcon,
+  XMarkIcon,
 } from '@heroicons/react/24/outline';
 import { ButtonIcons, ButtonVariants } from './ButtonTypes';
 
@@ -12,15 +14,17 @@ type ButtonProps = {
   icon?: ButtonIcons;
   variant?: ButtonVariants;
   className?: string;
-  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
 };
 
 function Button(props: ButtonProps) {
   return (
     <button
       className={`${classes.button} ${
-        props.variant ? classes[props.variant] : ''
-      } ${props.className ? props.className : ''}`}
+        props.variant ? classes[props.variant] : ""
+      } ${props.className ? props.className : ""} ${
+        props.children ? classes.stringButton : ""
+      }`}
       type={props.type}
     >
       {props.icon === ButtonIcons.Plus && (
@@ -35,9 +39,13 @@ function Button(props: ButtonProps) {
       {props.icon === ButtonIcons.Back && (
         <ChevronLeftIcon className={classes.icon}></ChevronLeftIcon>
       )}
-      {props.children && (
-        <span className={classes.string}>{props.children}</span>
+      {props.icon === ButtonIcons.Share && (
+        <ShareIcon className={classes.icon}></ShareIcon>
       )}
+      {props.icon === ButtonIcons.Cross && (
+        <XMarkIcon className={classes.icon}></XMarkIcon>
+      )}
+      {props.children && <span>{props.children}</span>}
     </button>
   );
 }

frontend/src/Button/ButtonTypes.tsx

@@ -1,12 +1,14 @@
 export enum ButtonIcons {
-  Plus = 'plus',
-  Bookmark = 'bookmark',
-  Search = 'search',
-  Back = 'back',
+  Plus = "plus",
+  Bookmark = "bookmark",
+  Search = "search",
+  Back = "back",
+  Share = "share",
+  Cross = "cross",
 }
 
 export enum ButtonVariants {
-  Primary = 'primary',
-  Secondary = 'secondary',
-  RoundSecondary = 'round-secondary',
+  Primary = "primary",
+  Secondary = "secondary",
+  RoundSecondary = "round-secondary",
 }

frontend/src/Event/Event.tsx

@@ -1,4 +1,4 @@
-import classes from './Event.module.css';
+import classes from "./Event.module.css";
 
 type EventProps = {
   image: string;

frontend/src/EventDetails/EventDetails.module.css

@@ -0,0 +1,116 @@
+.container {
+  background: hsl(0, 0%, 100%);
+  border-radius: 16px;
+  padding-bottom: 40px;
+  width: 76vw;
+  min-height: fit-content;
+  height: 90vh;
+  box-shadow: 0px 0px 16px hsla(0, 0%, 0%, 0.25);
+}
+
+.picture {
+  width: 100%;
+  border-radius: 16px 16px 0px 0px;
+  height: 280px;
+  background-size: cover;
+  position: relative;
+}
+
+.exitIcon {
+  height: 48px;
+  width: 48px;
+  padding: 12px;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  background-color: hsl(0, 0%, 100%);
+  color: hsl(0, 0%, 0%);
+  box-shadow: none;
+  border-radius: 0px 8px 0px 0px;
+}
+
+.info {
+  display: flex;
+  padding-left: 40px;
+  padding-right: 40px;
+  min-height: fit-content;
+  height: 360px;
+}
+
+.name {
+  font-size: 3rem;
+  font-weight: 750;
+  margin: 0px;
+  margin-bottom: 12px;
+}
+
+.details {
+  width: 40vw;
+  margin-top: 24px;
+  font-size: 1.2rem;
+  font-weight: 500;
+  height: auto;
+  display: flex;
+  align-items: start;
+  flex-direction: column;
+}
+
+.icon {
+  width: 24px;
+}
+
+.locationLink {
+  height: 18px;
+  margin-top: 2px;
+  color: hsl(0, 0%, 35%);
+  transition: color 0.2s linear; 
+}
+
+.locationLink:hover {
+  color: hsl(0, 0%, 84%);
+}
+
+.detail {
+  display: flex;
+  height: 24px;
+  margin-bottom: 12px;
+  width: 30vw;
+  gap: 8px;
+  color: hsl(0, 0%, 20%);
+}
+
+.detailInfo {
+  margin: 0px;
+}
+
+.attending {
+  color: hsl(0, 0%, 40%);
+}
+
+.actions {
+  display: flex;
+  height: fit-content;
+  gap: 12px;
+  margin-top: auto;
+}
+
+button.actionIcon {
+  height: 48px;
+  width: 48px;
+  padding: 10px;
+}
+
+.description {
+  width: 40vw;
+  margin-top: 24px;
+  padding-left: 24px;
+  line-height: 1.8;
+  height: auto;
+}
+
+.keywords {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 12px;
+  gap: 12px;
+}