From 8bc2d25b4f9160680be3194af38c3ce610ce9928 Mon Sep 17 00:00:00 2001
From: Sumit Akhuli <sumitakhuli5022@gmail.com>
Date: Mon, 16 Feb 2026 03:19:59 +0530
Subject: [PATCH] feat(menu): improve visual structure with cards, icons and
 timeline

---
 src/components/restaurant/MenuTable.jsx      | 148 ++++++----
 src/components/restaurant/RestaurantMenu.jsx | 280 ++++++++-----------
 2 files changed, 203 insertions(+), 225 deletions(-)

diff --git a/src/components/restaurant/MenuTable.jsx b/src/components/restaurant/MenuTable.jsx
index 79068c1..66b6b0d 100644
--- a/src/components/restaurant/MenuTable.jsx
+++ b/src/components/restaurant/MenuTable.jsx
@@ -5,113 +5,143 @@ import {
   UnorderedList,
   useColorModeValue,
   Button,
+  Box,
+  Text,
+  Icon,
+  Collapse
 } from "@chakra-ui/react";
+import { SunIcon, MoonIcon, InfoIcon, CheckCircleIcon } from "@chakra-ui/icons";
 import i18n from "../../i18n";
 
 function MenuTable({ title, fullMenu, isActive }) {
-
   const [activeMeal, setActiveMeal] = useState(i18n.t('lunch'));
+  const [foodMenu, setFoodMenu] = useState(fullMenu.gevma.foodMenu);
+
+  const mealIcons = {
+    [i18n.t('lunch')]: SunIcon,
+    [i18n.t('dinner')]: MoonIcon
+  };
+
+  const categoryAccents = [
+    "orange.400", // Main
+    "purple.400", // Special
+    "green.400",  // Salad
+    "pink.400",   // Dessert
+    "cyan.400"    // Other
+  ];
 
-  const[foodMenu,setFoodMenu]=useState(fullMenu.gevma.foodMenu);
-  
   return (
-    <Flex flexDir="column" alignItems="center"  w={{sm: "98%", md: "98%", lg: "94%", "2xl": "78%", "3xl": "64%"}}>
-    <Flex mb={4} gap={4}>
+    <Flex flexDir="column" alignItems="center" w={{ sm: "98%", md: "98%", lg: "94%", "2xl": "78%", "3xl": "64%" }}>
+      {/* Meal Selection Cards */}
+      <Flex mb={6} gap={4} w="100%" justify="center">
         <Button
           onClick={() => {
             setFoodMenu(fullMenu.gevma.foodMenu);
             setActiveMeal(i18n.t('lunch'));
           }}
-          bg={activeMeal === i18n.t('lunch') ? "#0050E0" : "transparent"}
-          color={activeMeal === i18n.t('lunch') ? "white" : "inherit"}
+          h="auto"
+          py={4}
+          flex={1}
+          maxW="200px"
+          flexDir="column"
+          gap={2}
+          bg={activeMeal === i18n.t('lunch') ? useColorModeValue("white", "gray.700") : "transparent"}
+          color={activeMeal === i18n.t('lunch') ? useColorModeValue("#0050E0", "#f3f3f3") : "gray.500"}
           border="2px solid"
           borderColor={activeMeal === i18n.t('lunch') ? "#0050E0" : "gray.300"}
           _hover={{
-            bg: activeMeal === i18n.t('lunch') ? "#003bb8" : "gray.100",
+            borderColor: "#0050E0",
+            bg: useColorModeValue("blue.50", "whiteAlpha.100")
           }}
+          boxShadow={activeMeal === i18n.t('lunch') ? "lg" : "none"}
+          borderRadius="xl"
           transition="all 0.3s ease-in-out"
         >
-        {i18n.t('lunch')}
-      </Button>
+          <Icon as={SunIcon} boxSize={6} />
+          <Text fontSize="lg" fontWeight="bold">{i18n.t('lunch')}</Text>
+        </Button>
 
-      <Button
+        <Button
           onClick={() => {
             setFoodMenu(fullMenu.deipno.foodMenu);
             setActiveMeal(i18n.t('dinner'));
           }}
-          bg={activeMeal === i18n.t('dinner') ? "#0050E0" : "transparent"}
-          color={activeMeal === i18n.t('dinner') ? "white" : "inherit"}
+          h="auto"
+          py={4}
+          flex={1}
+          maxW="200px"
+          flexDir="column"
+          gap={2}
+          bg={activeMeal === i18n.t('dinner') ? useColorModeValue("white", "gray.700") : "transparent"}
+          color={activeMeal === i18n.t('dinner') ? useColorModeValue("#0050E0", "#f3f3f3") : "gray.500"}
           border="2px solid"
           borderColor={activeMeal === i18n.t('dinner') ? "#0050E0" : "gray.300"}
           _hover={{
-            bg: activeMeal === i18n.t('dinner') ? "#003bb8" : "gray.100",
+            borderColor: "#0050E0",
+            bg: useColorModeValue("blue.50", "whiteAlpha.100")
           }}
+          boxShadow={activeMeal === i18n.t('dinner') ? "lg" : "none"}
+          borderRadius="xl"
           transition="all 0.3s ease-in-out"
         >
-        {i18n.t('dinner')}
-      </Button>
-
+          <Icon as={MoonIcon} boxSize={6} />
+          <Text fontSize="lg" fontWeight="bold">{i18n.t('dinner')}</Text>
+        </Button>
       </Flex>
+
+      {/* Menu Content */}
       <Flex
         flexDir="column"
-        borderRadius="16px"
-        borderColor={isActive ? "#0050E0" : "black"}
-        _dark={{ borderColor: "#f3f3f3" }}
-        borderWidth="2px"
+        borderRadius="xl"
+        boxShadow="md"
+        bg={useColorModeValue("white", "gray.800")}
+        border="1px"
+        borderColor={useColorModeValue("gray.200", "gray.700")}
         overflow="hidden"
-        mx={1}
+        w="100%"
         fontFamily="Syne"
-        w={{sm: "98%", md: "98%", lg: "94%", "2xl": "78%", "3xl": "64%"}}
       >
         {Object.keys(foodMenu).map((key, index) => (
           <Flex
             key={key}
             flexDir="column"
-            alignItems="center"
-            borderTop={index === 0 ? "" : "2px"}
-            borderColor={isActive ? "#0050E0" : "black"}
-            _dark={{
-              borderColor: "#f3f3f3",
-            }}
+            borderLeftWidth="6px"
+            borderLeftColor={categoryAccents[index % categoryAccents.length]}
+            borderBottomWidth={index !== Object.keys(foodMenu).length - 1 ? "1px" : "0"}
+            borderBottomColor={useColorModeValue("gray.100", "gray.700")}
           >
             <Flex
-              py="8px"
-              px="10px"
-              w="100%"
-              bg={isActive ? "#0050E00F" : "#0000000F"}
-              _dark={{ bg: "#f3f3f30F" }}
-              fontSize={{ sm: 18, md: 20, lg: 22 }}
-              fontWeight="semibold"
+              py={3}
+              px={4}
+              bg={useColorModeValue("gray.50", "whiteAlpha.50")}
+              justify="space-between"
+              align="center"
             >
-              {i18n.t(key)}
+              <Text
+                fontSize={{ sm: 18, md: 20 }}
+                fontWeight="bold"
+                color={useColorModeValue("gray.700", "gray.200")}
+              >
+                {i18n.t(key)}
+              </Text>
             </Flex>
-            <Flex
-              flexDir="column"
-              style={{ fontVariantNumeric: "lining-nums tabular-nums" }}
-              py="8px"
-              px="10px"
-              w="100%"
-              fontSize={{ sm: 16, md: 18, lg: 20 }}
-            >
-              <UnorderedList spacing={2}>
-                {Object.values(foodMenu[key]).map((dish, index) => (
-                  <ListItem key={index}>{dish}</ListItem>
+
+            <Box px={4} py={3}>
+              <UnorderedList spacing={2} m={0} ml={4}>
+                {Object.values(foodMenu[key]).map((dish, i) => (
+                  <ListItem
+                    key={i}
+                    fontSize={{ sm: 16, md: 18 }}
+                    color={useColorModeValue("gray.600", "gray.300")}
+                  >
+                    {dish}
+                  </ListItem>
                 ))}
               </UnorderedList>
-            </Flex>
+            </Box>
           </Flex>
         ))}
       </Flex>
-      <Flex
-        fontFamily="Syne"
-        justifyContent="center"
-        color={useColorModeValue(isActive ? "#0050E0" : "black", "#f3f3f3")}
-        py={2}
-        fontWeight="semibold"
-        fontSize="22px"
-      >
-        {i18n.t(activeMeal)}
-      </Flex>
     </Flex>
   );
 }
diff --git a/src/components/restaurant/RestaurantMenu.jsx b/src/components/restaurant/RestaurantMenu.jsx
index a2c7ea0..fe7a5a9 100644
--- a/src/components/restaurant/RestaurantMenu.jsx
+++ b/src/components/restaurant/RestaurantMenu.jsx
@@ -47,191 +47,139 @@ import {
   ListItem,
   Text,
   useColorModeValue,
+  Flex,
+  Circle,
+  VStack
 } from "@chakra-ui/react";
-
+import { ChevronDownIcon } from "@chakra-ui/icons";
 import i18n from "../../i18n";
 
 function Menu({ dailyFoodMenu }) {
+  const lineColor = useColorModeValue("gray.200", "gray.600");
+  const dotColor = useColorModeValue("blue.500", "blue.300");
+  const cardBg = useColorModeValue("white", "gray.800");
+
   return (
-    <Box
-      marginBottom="1rem"
-      borderRadius="24px"
-      overflow="hidden"
-      border="2px"
-      borderColor={useColorModeValue("#0050e0", "#f3f3f3")}>
-      <AccordionItem border="none" w="100%">
-        <AccordionButton
-          // display="flex"
-          direction="row"
-          alignItems="center"
-          justifyContent="start"
-          _hover={{ bg: "transparent" }}
-          w="100%"
-          h="100%"
-          outline="none"
-          textAlign="center"
-          bgColor="transparent"
-          color={useColorModeValue("black", "white")}
-          fontFamily="Syne"
-          border="none"
-          alt="profPic"
-          overflow="hidden"
-          gap={3}>
-          <Text
-            w="100%"
-            display="flex"
-            direction="row"
-            alignItems="center"
-            justifyContent="start"
-            fontWeight="bold"
-            fontSize={{ sm: 14, md: 16, lg: 18 }}>
-            {dailyFoodMenu.day}
-          </Text>
-          <AccordionIcon />
-        </AccordionButton>
-
-        <AccordionPanel px="15px" pb="15px">
-          <Accordion allowToggle>
-            {/*Accordion gia geuma*/}
-            <Box
-              w="100%"
-              marginBottom="5"
-              borderRadius="16px"
-              overflow="hidden"
-              border="2px"
-              borderColor={useColorModeValue("#0050e0", "#f3f3f3")}>
-              <AccordionItem border="none">
+    <Flex w="100%" position="relative" pb={8}>
+      {/* Timeline Line */}
+      <Box
+        position="absolute"
+        left="19px"
+        top="40px"
+        bottom="0"
+        width="2px"
+        bg={lineColor}
+        zIndex={0}
+      />
+
+      <Box w="100%">
+        <AccordionItem border="none" w="100%">
+          {({ isExpanded }) => (
+            <>
+              <h2>
                 <AccordionButton
-                  display="flex"
-                  direction="row"
-                  alignItems="center"
-                  justifyContent="start"
+                  p={0}
                   _hover={{ bg: "transparent" }}
-                  w="100%"
-                  h="100%"
-                  outline="none"
-                  textAlign="center"
-                  bgColor="transparent"
-                  color={useColorModeValue("black", "white")}
-                  fontFamily="Syne"
-                  border="none"
-                  alt="profPic"
-                  overflow="hidden"
-                  gap={3}>
-                  <Text
-                    w="100%"
-                    display="flex"
-                    direction="row"
-                    alignItems="center"
-                    justifyContent="start"
-                    fontWeight="bold"
-                    fontFamily="Syne"
-                    fontSize={{ sm: 14, md: 16, lg: 18 }}>
-                    {i18n.t("gevma")}
-                  </Text>
-                  <AccordionIcon />
+                  _focus={{ boxShadow: "none" }}
+                  mb={isExpanded ? 4 : 0}
+                >
+                  <Flex w="100%" align="center">
+                    {/* Timeline Dot */}
+                    <Circle
+                      size="40px"
+                      bg={isExpanded ? dotColor : useColorModeValue("white", "gray.900")}
+                      border="2px solid"
+                      borderColor={dotColor}
+                      color={isExpanded ? "white" : dotColor}
+                      zIndex={1}
+                      mr={4}
+                      fontWeight="bold"
+                      fontSize="lg"
+                      boxShadow="sm"
+                    >
+                      {dailyFoodMenu.day.substring(0, 1)}
+                    </Circle>
+
+                    {/* Day Card Header */}
+                    <Box
+                      flex={1}
+                      p={4}
+                      bg={cardBg}
+                      borderRadius="xl"
+                      boxShadow="sm"
+                      border="1px"
+                      borderColor={useColorModeValue("gray.200", "gray.700")}
+                      transition="all 0.2s"
+                      _hover={{ boxShadow: "md", borderColor: "blue.400" }}
+                      textAlign="left"
+                    >
+                      <Flex justify="space-between" align="center">
+                        <Text fontWeight="bold" fontSize="lg" fontFamily="Syne">
+                          {dailyFoodMenu.day}
+                        </Text>
+                        <AccordionIcon as={ChevronDownIcon} boxSize={6} />
+                      </Flex>
+                    </Box>
+                  </Flex>
                 </AccordionButton>
-                <AccordionPanel pb={4}>
-                  <List spacing={2}>
-                    {Object.values([
+              </h2>
+
+              <AccordionPanel pb={4} pl="60px">
+                <VStack spacing={4} align="stretch">
+                  {/* Lunch Section */}
+                  <MealSection
+                    title={i18n.t("gevma")}
+                    items={[
                       ...dailyFoodMenu.gevmaKirios,
                       ...dailyFoodMenu.gevmaEidiko,
                       ...dailyFoodMenu.gevmaGarnitoura,
                       ...dailyFoodMenu.gevmaSalata,
                       ...dailyFoodMenu.gevmaEpidorpio,
-                    ]).map((val, index) =>
-                      val ? (
-                        <ListItem key={index}>
-                          <Text
-                            w="100%"
-                            display="flex"
-                            direction="row"
-                            alignItems="flex-start"
-                            justifyContent="center"
-                            fontWeight="bold"
-                            fontFamily="Syne"
-                            fontSize={{ sm: 14, md: 16, lg: 18 }}>
-                            {val}
-                          </Text>
-                        </ListItem>
-                      ) : null
-                    )}
-                  </List>
-                </AccordionPanel>
-              </AccordionItem>
-            </Box>
-            {/*Accordion gia deipno*/}
-            <Box
-              w="100%"
-              borderRadius="16px"
-              overflow="hidden"
-              border="2px"
-              borderColor={useColorModeValue("#0050e0", "#f3f3f3")}>
-              <AccordionItem border="none">
-                <AccordionButton
-                  display="flex"
-                  direction="row"
-                  alignItems="center"
-                  justifyContent="100start"
-                  _hover={{ bg: "transparent" }}
-                  w="100%"
-                  h="100%"
-                  outline="none"
-                  textAlign="center"
-                  bgColor="transparent"
-                  color={useColorModeValue("black", "white")}
-                  fontFamily="Syne"
-                  border="none"
-                  alt="profPic"
-                  overflow="hidden"
-                  gap={3}>
-                  <Text
-                    w="100%"
-                    display="flex"
-                    direction="row"
-                    alignItems="center"
-                    justifyContent="start"
-                    fontWeight="bold"
-                    fontFamily="Syne"
-                    fontSize={{ sm: 14, md: 16, lg: 18 }}>
-                    {i18n.t("deipno")}
-                  </Text>
-                  <AccordionIcon />
-                </AccordionButton>
-                <AccordionPanel pb={4}>
-                  <List spacing={2}>
-                    {Object.values([
+                    ]}
+                  />
+
+                  {/* Dinner Section */}
+                  <MealSection
+                    title={i18n.t("deipno")}
+                    items={[
                       ...dailyFoodMenu.deipnoKirios,
                       ...dailyFoodMenu.deipnoEidiko,
                       ...dailyFoodMenu.deipnoGarnitoura,
                       ...dailyFoodMenu.deipnoSalata,
                       ...dailyFoodMenu.deipnoEpidorpio,
-                    ]).map((val, index) =>
-                      val ? (
-                        <ListItem key={index}>
-                          <Text
-                            w="100%"
-                            display="flex"
-                            direction="row"
-                            alignItems="flex-start"
-                            justifyContent="center"
-                            fontWeight="bold"
-                            fontFamily="Syne"
-                            fontSize={{ sm: 14, md: 16, lg: 18 }}>
-                            {val}
-                          </Text>
-                        </ListItem>
-                      ) : null
-                    )}
-                  </List>
-                </AccordionPanel>
-              </AccordionItem>
-            </Box>
-          </Accordion>
-        </AccordionPanel>
-      </AccordionItem>
-    </Box>
+                    ]}
+                  />
+                </VStack>
+              </AccordionPanel>
+            </>
+          )}
+        </AccordionItem>
+      </Box>
+    </Flex>
   );
 }
 
+const MealSection = ({ title, items }) => (
+  <Box
+    bg={useColorModeValue("gray.50", "whiteAlpha.50")}
+    p={4}
+    borderRadius="lg"
+    borderLeft="4px solid"
+    borderColor={title === i18n.t("gevma") ? "orange.400" : "purple.400"}
+  >
+    <Text fontWeight="bold" mb={2} color={useColorModeValue("gray.700", "gray.200")}>
+      {title}
+    </Text>
+    <List spacing={1}>
+      {items.map((val, index) =>
+        val ? (
+          <ListItem key={index} fontSize="md" color={useColorModeValue("gray.600", "gray.400")}>
+            • {val}
+          </ListItem>
+        ) : null
+      )}
+    </List>
+  </Box>
+);
+
 export default Menu;