Refresh UI for improved user experience

.github/workflows/recruiting_ci.yml

@@ -19,10 +19,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🏗 Setup repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v5
 
       - name: 🏗 Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v5
         with:
           node-version: 18.x
 
@@ -40,10 +40,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🏗 Setup repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v5
 
       - name: 🏗 Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v5
         with:
           node-version: 20.x
 

src/app/components/Departments.tsx

@@ -6,32 +6,64 @@ import {
 import { departments_data } from "@data/departments_data";
 import DepartmentInfoCard from "@/app/genericComponents/DepartmentInfoCard";
 import styled from "styled-components";
-import { SpacingM } from "@/app/genericComponents/tokens";
+import { useState } from "react";
+import {
+  BodyTextMedium,
+  MobileBodyTextMedium,
+  MobileBreakpoint,
+  SpacingM,
+  SpacingS,
+} from "@/app/genericComponents/tokens";
+
+const DepartmentsDescription = styled(SectionDescription)`
+  max-width: 70ch;
+  font-size: ${BodyTextMedium};
+  white-space: pre-line;
+
+  @media (max-width: ${MobileBreakpoint}) {
+    font-size: ${MobileBodyTextMedium};
+  }
+`;
 
-const DepartmentsCards = styled.div`
+const DepartmentsAccordion = styled.div`
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  gap: ${SpacingM};
+  flex-direction: column;
   margin-top: ${SpacingM};
+
+  @media (max-width: ${MobileBreakpoint}) {
+    margin-top: ${SpacingS};
+  }
 `;
 
 export default function Departments() {
+  const [openDepartment, setOpenDepartment] = useState<string | null>(null);
+
   return (
     <SectionContainer id={"departments"}>
       <SectionTitle>{departments_data.title}</SectionTitle>
-      <SectionDescription>{departments_data.description}</SectionDescription>
-      <DepartmentsCards>
-        {departments_data.departments.map((department) => (
-          <DepartmentInfoCard
-            key={department.name}
-            name={department.name}
-            question={department.question}
-            information={department.information}
-            icon={department.icon}
-          />
-        ))}
-      </DepartmentsCards>
+      <DepartmentsDescription>
+        {departments_data.description}
+      </DepartmentsDescription>
+      <DepartmentsAccordion>
+        {departments_data.departments.map((department) => {
+          const isOpen = openDepartment === department.name;
+
+          return (
+            <DepartmentInfoCard
+              key={department.name}
+              name={department.name}
+              question={department.question}
+              information={department.information}
+              boldInformationPhrases={department.boldInformationPhrases}
+              icon={department.icon}
+              active={isOpen}
+              onToggle={() =>
+                setOpenDepartment(isOpen ? null : department.name)
+              }
+            />
+          );
+        })}
+      </DepartmentsAccordion>
     </SectionContainer>
   );
 }

src/app/components/Footer.tsx

@@ -39,18 +39,18 @@ export default function Footer() {
           href={"https://legal.hackersatupc.org/hackupc/legal_notice"}
           target={"_blank"}
         >
-          Legal notice
+          ⚖️ Legal notice
         </LinkText>{" "}
         |{" "}
         <LinkText
           href={"https://legal.hackersatupc.org/hackupc/privacy_and_cookies"}
           target={"_blank"}
         >
-          Privacy and cookies
+          🔐 Privacy and cookies
         </LinkText>
       </div>
       <SecondLine>
-        <b>Made</b> with ❤ by{" "}
+        <b>✨ Made</b> with ❤ by{" "}
         <LinkText href={"https://hackersatupc.org/"} target={"_blank"}>
           Hackers@UPC
         </LinkText>

src/app/components/Hackers.tsx

@@ -51,6 +51,11 @@ const CardsForHackers = styled(CardWithBackground)`
 
 const ButtonContainer = styled.div`
   display: flex;
+
+  svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
 `;
 
 export default function Hackers() {