From 096cdef3b8e3b924f2fc0ceccf2675fcbb21ec67 Mon Sep 17 00:00:00 2001 From: Sumit Akhuli Date: Sat, 14 Feb 2026 07:06:55 +0530 Subject: [PATCH 1/2] feat: improve library page layout with timeline and switch --- src/pages/LibraryPage.jsx | 317 +++++++++++++++++--------------------- 1 file changed, 145 insertions(+), 172 deletions(-) diff --git a/src/pages/LibraryPage.jsx b/src/pages/LibraryPage.jsx index 1065de2..1521253 100644 --- a/src/pages/LibraryPage.jsx +++ b/src/pages/LibraryPage.jsx @@ -36,218 +36,191 @@ */ -import { Flex, Box, Text, Button, useColorModeValue,Switch } from "@chakra-ui/react"; +import { Flex, Box, Text, Button, useColorModeValue, Switch, VStack, HStack, Icon, Badge } from "@chakra-ui/react"; import i18n from "../i18n"; -import { TimeIcon, PhoneIcon } from "@chakra-ui/icons"; +import { TimeIcon, PhoneIcon, CalendarIcon } from "@chakra-ui/icons"; import { useState } from "react"; import { LIBRARY_OPENING_HOURS, LIBRARY_PHONE_LIST } from "../assets/data/Library"; + export default function LibraryPage() { const [isExamPeriod, setisExamPeriod] = useState(false); const currentPeriod = isExamPeriod ? "InExams" : "InSemester"; + // Get current day index (0 = Sunday, 1 = Monday, ..., 6 = Saturday) + const currentDayIndex = new Date().getDay(); + + // Helper to check if a specific schedule corresponds to today + const isToday = (dayType) => { + if (dayType === 'weekdays' && currentDayIndex >= 1 && currentDayIndex <= 5) return true; + if (dayType === 'saturday' && currentDayIndex === 6) return true; + if (dayType === 'sunday' && currentDayIndex === 0) return true; + return false; + }; + + const ScheduleRow = ({ label, time, dayType }) => { + const active = isToday(dayType); + const isOpen = time && time.start; + + return ( + + + + {label} + + {isOpen ? ( + + {time.start} - {time.end} + + ) : ( + + {i18n.t("kleista")} + + )} + + ); + }; + + const allowedDaysIcons = { + weekdays: CalendarIcon, // Placeholder, usually a calendar looks good + saturday: TimeIcon, + sunday: TimeIcon + }; + return ( {/* Wrapper container */} - {/* Ωράριο */} + {/* Ωράριο Card */} - - - - - {i18n.t("orario")}{" "} - ({isExamPeriod ? i18n.t("exams_period") : i18n.t("semester_period") }) - - - - - - {i18n.t("defPar")} - {" "} -
- {LIBRARY_OPENING_HOURS[currentPeriod].on_weekdays.start}- - {LIBRARY_OPENING_HOURS[currentPeriod].on_weekdays.end} - - - - - {i18n.t("savvato")} - {" "} -
- - {LIBRARY_OPENING_HOURS[currentPeriod].on_saturday.start - ? `${LIBRARY_OPENING_HOURS[currentPeriod].on_saturday.start}-${LIBRARY_OPENING_HOURS[currentPeriod].on_saturday.end}` - : i18n.t("kleista")} - - - - {i18n.t("kyriaki")} - {" "} -
- {LIBRARY_OPENING_HOURS[currentPeriod].on_sunday.start - ? `${LIBRARY_OPENING_HOURS[currentPeriod].on_sunday.start}-${LIBRARY_OPENING_HOURS[currentPeriod].on_sunday.end}` - : i18n.t("kleista")} - + + + + + {isExamPeriod ? i18n.t("exams_period") : i18n.t("semester_period")} + + setisExamPeriod(e.target.checked)} + colorScheme="blue" + size="lg" + /> -
- - + + + + + + - {/* Επικοινωνία */} + + {/* Επικοινωνία Card */} - - - - - {i18n.t("epikoinonia")} - - + - - - {LIBRARY_PHONE_LIST[0]}
- {LIBRARY_PHONE_LIST[1]} - - - {" "} - {LIBRARY_PHONE_LIST[2]}
{LIBRARY_PHONE_LIST[3]}{" "} - - {i18n.t("imiorofos")} - - + + + {i18n.t("imiorofos")}: + + {LIBRARY_PHONE_LIST.map((phone, index) => ( + {phone} + ))} + + + + ); } + +const HeadingWithIcon = ({ icon, title, mb }) => ( + + + + + + {title} + + +); From 80509ec0d04d78306c06eb3c9dbca2abd560e207 Mon Sep 17 00:00:00 2001 From: Sumit Akhuli Date: Sat, 14 Feb 2026 07:11:46 +0530 Subject: [PATCH 2/2] fix(styles): align library page design with website blue theme --- src/pages/LibraryPage.jsx | 134 +++++++++++++++++++++++++------------- 1 file changed, 90 insertions(+), 44 deletions(-) diff --git a/src/pages/LibraryPage.jsx b/src/pages/LibraryPage.jsx index 1521253..6382432 100644 --- a/src/pages/LibraryPage.jsx +++ b/src/pages/LibraryPage.jsx @@ -46,10 +46,16 @@ export default function LibraryPage() { const [isExamPeriod, setisExamPeriod] = useState(false); const currentPeriod = isExamPeriod ? "InExams" : "InSemester"; - // Get current day index (0 = Sunday, 1 = Monday, ..., 6 = Saturday) + // Theme colors + const cardBg = useColorModeValue("#0050e0", "#f3f3f3"); + const cardBorder = useColorModeValue("#0050e0", "#f3f3f3"); + const textColor = useColorModeValue("#f3f3f3", "black"); + const highlightBg = useColorModeValue("whiteAlpha.200", "blackAlpha.100"); + const iconColor = useColorModeValue("#f3f3f3", "black"); + + // Get current day index const currentDayIndex = new Date().getDay(); - // Helper to check if a specific schedule corresponds to today const isToday = (dayType) => { if (dayType === 'weekdays' && currentDayIndex >= 1 && currentDayIndex <= 5) return true; if (dayType === 'saturday' && currentDayIndex === 6) return true; @@ -66,21 +72,34 @@ export default function LibraryPage() { w="100%" justify="space-between" p={2} - bg={active ? useColorModeValue("blue.50", "whiteAlpha.200") : "transparent"} + bg={active ? highlightBg : "transparent"} borderRadius="md" borderLeft={active ? "4px solid" : "none"} - borderColor={useColorModeValue("blue.500", "blue.200")} + borderColor={useColorModeValue("white", "black")} > - - - {label} + + + {label} {isOpen ? ( - + {time.start} - {time.end} ) : ( - + {i18n.t("kleista")} )} @@ -89,7 +108,7 @@ export default function LibraryPage() { }; const allowedDaysIcons = { - weekdays: CalendarIcon, // Placeholder, usually a calendar looks good + weekdays: CalendarIcon, saturday: TimeIcon, sunday: TimeIcon }; @@ -101,6 +120,7 @@ export default function LibraryPage() { flexDirection="column" alignItems="center" fontFamily="Syne" + color={textColor} > {/* Wrapper container */} - - + + - + {isExamPeriod ? i18n.t("exams_period") : i18n.t("semester_period")} setisExamPeriod(e.target.checked)} - colorScheme="blue" + colorScheme="whiteAlpha" size="lg" + sx={{ + 'span.chakra-switch__track': { + bg: useColorModeValue('whiteAlpha.400', 'blackAlpha.300'), + }, + 'span.chakra-switch__track[data-checked]': { + bg: useColorModeValue('white', 'black'), + }, + 'span.chakra-switch__thumb': { + bg: useColorModeValue('#0050e0', '#f3f3f3'), + } + }} /> @@ -163,25 +193,24 @@ export default function LibraryPage() { {/* Επικοινωνία Card */} - + - - - {i18n.t("imiorofos")}: - + + + {i18n.t("imiorofos")}: + {LIBRARY_PHONE_LIST.map((phone, index) => ( - {phone} + {phone} ))} @@ -191,11 +220,35 @@ export default function LibraryPage() {