Added consistent colors

Author: tanja04

src/assets/images/event/Images.js

@@ -4,17 +4,17 @@ import Images2023 from "./2023/Images2023";
 
 let Images = [
     {
-        name: "2025",
+        year: 2025,
         subtitle: "Medical Edition",
         items: Object.values(images)
     },
     {
-        name: "2024",
+        year: 2024,
         subtitle: "tomorrow's reality, today's vision. smart cities edition.",
         items: Images2024
     },
     {
-        name: "2023",
+        year: 2023,
         subtitle: "about://building-trust-in-digital-state",
         items: Images2023
     }

src/components/Features/Features.jsx

@@ -1,13 +1,15 @@
 import { Box, Card, Container, Grid, Typography } from "@mui/material";
 import { EmojiEvents, MoneyOff } from "@mui/icons-material";
 import React from "react";
+import colorYears from "../Theme/HackHpiColors";
 
 export function IconContainer(props) {
+  const colors = colorYears[props.year] ?? colorYears.default;
   return (
     <Card
       sx={{
         background:
-          "radial-gradient(ellipse 160% 110% at 0% 110%,  rgba(58,12,163,1) 30%, rgba(63,253,106,1) 100%), #110320",
+          `radial-gradient(ellipse 160% 110% at 0% 110%, ${colors.primary} 30%, ${colors.secondary} 100%), #110320`,
         //background: "linear-gradient(45deg, rgba(58,12,163,1) 0%, rgba(63,253,106,1) 100%)",
         backgroundPosition: "center",
         backgroundSize: "contain",

src/components/Gallery/Gallery.jsx

@@ -63,7 +63,7 @@ export function Gallery() {
             <Container sx={{display: "flex", justifyContent: "flex-end"}}>
                 <Button variant="contained" color={"primary"} sx={{mt: 3}} onClick={() => setIsGalleryOpen(true)}>View full Gallery</Button>
             </Container>
-            <GalleryDialog isOpen={isGalleryOpen} onClose={() => setIsGalleryOpen(false)}/>
+            <GalleryDialog isOpen={isGalleryOpen} onClose={() => setIsGalleryOpen(false)} year={images[galleryTab].year}/>
         </Box>
     )
 

src/components/Gallery/GalleryDialog/GalleryDialog.jsx

@@ -16,6 +16,7 @@ import {
 import {Close, KeyboardArrowLeft, KeyboardArrowRight} from "@mui/icons-material";
 import React, {useCallback, useEffect, useState} from "react";
 import images from "../../../assets/images/event/Images";
+import colorYears from "../../Theme/HackHpiColors";
 
 const Transition = React.forwardRef(function Transition(
     props,
@@ -78,6 +79,8 @@ export function GalleryDialog(props) {
         element.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'})
     }
 
+    const colors = colorYears[props.year] ?? colorYears.default;
+
     return (
         <Dialog
             fullScreen
@@ -152,7 +155,7 @@ export function GalleryDialog(props) {
                                                 (selectedImage === index) ? (
                                                     <Box sx={{
                                                         height: ".4rem",
-                                                        background: "linear-gradient(90deg, rgba(58,12,163,1) 0%, rgba(114,9,183,1) 100%)",
+                                                        background: `linear-gradient(90deg, ${colors.primary} 0%, ${colors.primary} 100%)`,
                                                         width: "100%"
                                                     }}/>
                                                 ) : undefined

src/components/Jury/Jury.jsx

@@ -160,6 +160,7 @@ function Jury() {
                 elevation={5}
                 key={judge.name}
                 is2024={currentIndex !== 0}
+                year={juryYears[currentIndex].year}
               >
                 <Grid container spacing={5}>
                   <Grid item xs={12} md={3}>

src/components/Speakers/Speakers.jsx

@@ -96,7 +96,7 @@ function Speakers() {
         <Grid item xs={12} md={12}>
           <Stack spacing={3}>
             {speakerYears[currentIndex].speaker.map((speaker) => (
-              <WindowCard elevation={5} key={speaker.name} is2024>
+              <WindowCard elevation={5} key={speaker.name} is2024 year={speakerYears[currentIndex].year}>
                 <Grid container spacing={5}>
                   <Grid item xs={12} md={3}>
                     <Paper

src/components/Theme/HackHpiColors.js

@@ -0,0 +1,33 @@
+/* primary and secondary: used for gradient and window cards etc.
+ * third_gradient: used for gradient
+ * dark_background: used for gradient and overall background
+ */
+
+const colorYears = {
+  2024: {
+    primary: "rgb(58, 12, 163, 1)",
+    secondary: "rgb(114, 9, 183, 1)",
+    third_gradient: "rgb(114, 9, 183, 1)",
+    dark_background: "rgba(19,16,27,1)"
+  },
+  2025: {
+    primary: "rgba(58,12,163,1)",
+    secondary: "rgba(76,201,240,1)",
+    third_gradient: "rgba(61,164,171,1)",
+    dark_background: "rgba(19,16,27,1)"
+  },
+  2026: {
+    primary: "rgba(11,157,106,1)",
+    secondary: "rgba(63,253,106,1)",
+    third_gradient: "rgba(63,88,252,1)",
+    dark_background: "rgba(17,3,32,1)"
+  },
+  default: {
+    primary: "rgba(11,157,106,1)",
+    secondary: "rgba(63,253,106,1)",
+    third_gradient: "rgba(63,88,252,1)",
+    dark_background: "rgba(17,3,32,1)"
+  }
+}
+
+export default colorYears;

src/components/TimeTable/TimeTable.jsx

@@ -15,6 +15,7 @@ import {
 import * as React from "react";
 import {useState} from "react";
 import {IconContainer} from "../Features/Features";
+import colorYears from "../Theme/HackHpiColors";
 
 const dayOneYears = [
   {
@@ -251,11 +252,12 @@ const dayTwoYears = [
 ]
 
 export function Table(props) {
+    const colors = colorYears[props.year] ?? colorYears.default;
     return (
         <Card>
             <Box sx={{
                 height: "5rem",
-                background: "linear-gradient(150deg, rgba(58,12,163,1) 0%, rgba(114,9,183,1) 100%)",
+                background: `linear-gradient(150deg, ${colors.primary} 0%, ${colors.secondary} 100%)`,
                 display: "flex",
                 alignItems: "center",
                 pl: 3
@@ -278,7 +280,7 @@ export function Table(props) {
                                         alignContent: "center",
                                         alignItems: "center"
                                     }}>
-                                        <IconContainer icon={item.icon}/>
+                                        <IconContainer icon={item.icon} year={props.year}/>
                                     </Grid>
                                     <Grid item xs={8} sx={{display: "flex", alignItems: "center"}}>
                                         <Box>
@@ -344,11 +346,13 @@ export function TimeTable() {
               <Grid container spacing={5}>
                   <Grid item md={6} xs={12}>
                       <Table data={dayOneYears[currentIndex].dayOne} title={"Day 1"}
-                             subtitle={dayOneYears[currentIndex].subtitle}/>
+                             subtitle={dayOneYears[currentIndex].subtitle}
+                             year={dayOneYears[currentIndex].year}/>
                   </Grid>
                   <Grid item md={6} xs={12}>
                       <Table data={dayTwoYears[currentIndex].dayTwo} title={"Day 2"}
-                             subtitle={dayTwoYears[currentIndex].subtitle}/>
+                             subtitle={dayTwoYears[currentIndex].subtitle}
+                             year={dayTwoYears[currentIndex].year}/>
                   </Grid>
               </Grid>
             )}

src/components/WindowCard/WindowCard.jsx

@@ -1,36 +1,9 @@
 import {Box, Card, Stack} from "@mui/material";
+import colorYears from "../Theme/HackHpiColors";
 
 export function WindowCard(props) {
-
-  function getSecondaryColor(year) {
-
-
-    switch (props.year) {
-      case 2024:
-        return "rgba(114,9,183,1)"
-      case 2025:
-        return "rgba(76,201,240,1)"
-      case 2026:
-        return "rgba(63,253,106,1)"
-      default:
-        return "rgba(63,253,106,1)"
-    }
-  }
-  function getPrimaryColor(year) {
-
-
-    switch (props.year) {
-      case 2024:
-      case 2025:
-        return "rgba(167,252,63,1)"
-      case 2026:
-        return "rgba(167,252,63,1)"
-      default:
-        return "rgba(167,252,63,1)"
-    }
-  }
-    let backgroundSecondColor = getSecondaryColor(props.year);
-    const backgroundGradient = `linear-gradient(90deg, rgba(167,252,63,1) 0%, ${backgroundSecondColor} 100%)`;
+    const colors = colorYears[props.year] ?? colorYears.default;
+    const backgroundGradient = `linear-gradient(90deg, ${colors.primary} 0%, ${colors.secondary} 100%)`;
     return (
         <Card elevation={7}>
             <Box sx={{