From 788b05d6f4786170a8e4d0a0786ff3b67457fa93 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Thu, 15 Jan 2026 11:51:19 +0300
Subject: [PATCH] enhance openening times UI styles

---
 .../OpeningTimesBottomSheet.tsx               | 240 ++++++++++++------
 1 file changed, 169 insertions(+), 71 deletions(-)

diff --git a/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx b/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx
index 5ddf76a..844fb86 100644
--- a/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { Card } from "antd";
 import { useTranslation } from "react-i18next";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
 import ProText from "components/ProText";
@@ -6,28 +6,13 @@ import ProTitle from "components/ProTitle";
 import { useAppSelector } from "redux/hooks";
 import { useGetOpeningTimesQuery } from "redux/api/others";
 import { useMemo } from "react";
+import TimeIcon from "components/Icons/order/TimeIcon";
 
 interface OpeningTimesBottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
-const dayTextStyle: React.CSSProperties = {
-  fontWeight: 400,
-  fontStyle: "Regular",
-  fontSize: 14,
-  lineHeight: "140%",
-  letterSpacing: "0%",
-};
-
-const todayTextStyle: React.CSSProperties = {
-  fontWeight: 700,
-  fontStyle: "Bold",
-  fontSize: 14,
-  lineHeight: "140%",
-  letterSpacing: "0%",
-};
-
 // Helper function to format time (HH:mm to 12h format)
 const formatTime = (time: string | null | undefined): string => {
   if (!time) return "";
@@ -107,87 +92,200 @@ export function OpeningTimesBottomSheet({
       title={t("menu.openingTimes")}
       showCloseButton={false}
       initialSnap={1}
-      height={500}
-      snapPoints={[500]}
+      height={600}
+      snapPoints={[600]}
     >
       <div
         style={{
           display: "flex",
           flexDirection: "column",
-          padding: "20px 20px 0",
-          gap: 24,
+          padding: "20px 0",
+          gap: 20,
+          maxHeight: "calc(600px - 120px)",
+          overflowY: "auto",
         }}
       >
         {/* Address Section */}
-        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-          <ProTitle level={5} style={{ marginBottom: 0 }}>
-            {t("menu.address")}
-          </ProTitle>
-          <ProText
-            type="secondary"
-            style={{ fontSize: 14, lineHeight: "20px" }}
-          >
-            {isRTL ? restaurant?.addressAR : restaurant?.address}
-          </ProText>
-        </div>
-
-        {/* Opening Times Section */}
-        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-          <ProTitle level={5} style={{ marginBottom: 0 }}>
-            {t("menu.openingTimes")}
-          </ProTitle>
+        <Card
+          bordered={false}
+          style={{
+            backgroundColor: "#f8f9fa",
+            borderRadius: 12,
+            boxShadow: "none",
+          }}
+          bodyStyle={{ padding: "16px" }}
+        >
           <div
             style={{
               display: "flex",
               flexDirection: "column",
-              gap: 12,
+              gap: 8,
+            }}
+          >
+            <ProTitle
+              level={5}
+              style={{
+                marginBottom: 0,
+                fontSize: 16,
+                fontWeight: 600,
+                color: "#333",
+              }}
+            >
+              {t("menu.address")}
+            </ProTitle>
+            <ProText
+              type="secondary"
+              style={{
+                fontSize: 14,
+                lineHeight: "20px",
+                color: "#666",
+              }}
+            >
+              {isRTL ? restaurant?.addressAR : restaurant?.address}
+            </ProText>
+          </div>
+        </Card>
+
+        {/* Opening Times Section */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              marginBottom: 4,
+            }}
+          >
+            <TimeIcon color="#333" />
+            <ProTitle
+              level={5}
+              style={{
+                marginBottom: 0,
+                fontSize: 16,
+                fontWeight: 600,
+                color: "#333",
+              }}
+            >
+              {t("menu.openingTimes")}
+            </ProTitle>
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 8,
             }}
           >
             {days.map((day, index) => {
               const isToday = index === todayIndex;
               const { shift1, shift2 } = dayTimes[index];
               const hasShifts = shift1 || shift2;
-              const timeDisplay = shift2
-                ? `${shift1}, ${shift2}`
-                : shift1 || t("menu.closed");
 
               return (
-                <div
+                <Card
                   key={day}
+                  bordered
                   style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "flex-start",
-                    padding: isToday ? "8px 12px" : "4px 0",
-                    backgroundColor: isToday
-                      ? "rgba(0, 0, 0, 0.02)"
-                      : "transparent",
-                    borderRadius: 8,
-                    transition: "background-color 0.2s ease",
+                    borderRadius: 12,
+                    borderColor: isToday ? "#1890ff" : "#e8e8e8",
+                    borderWidth: isToday ? 2 : 1,
+                    backgroundColor: isToday ? "#f0f8ff" : "#ffffff",
+                    boxShadow: isToday
+                      ? "0 2px 8px rgba(24, 144, 255, 0.15)"
+                      : "0 1px 2px rgba(0, 0, 0, 0.05)",
+                    transition: "all 0.2s ease",
                   }}
+                  bodyStyle={{ padding: "14px 16px" }}
                 >
-                  <ProText
-                    type={isToday ? undefined : "secondary"}
+                  <div
                     style={{
-                      ...(isToday ? todayTextStyle : dayTextStyle),
-                      textTransform: "capitalize",
-                      flex: 1,
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      gap: 16,
                     }}
                   >
-                    {t(`menu.${day}`)}
-                  </ProText>
-                  <ProText
-                    type={isToday ? undefined : "secondary"}
-                    style={{
-                      ...(isToday ? todayTextStyle : dayTextStyle),
-                      textAlign: isRTL ? "left" : "right",
-                      flex: 1,
-                      color: !hasShifts ? "#999" : undefined,
-                    }}
-                  >
-                    {timeDisplay}
-                  </ProText>
-                </div>
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 12,
+                        flex: 1,
+                      }}
+                    >
+                      {isToday && (
+                        <div
+                          style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: "50%",
+                            backgroundColor: "#1890ff",
+                            flexShrink: 0,
+                          }}
+                        />
+                      )}
+                      <ProText
+                        style={{
+                          fontSize: 15,
+                          fontWeight: isToday ? 600 : 500,
+                          color: isToday ? "#1890ff" : "#333",
+                          textTransform: "capitalize",
+                        }}
+                      >
+                        {t(`menu.${day}`)}
+                      </ProText>
+                    </div>
+
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: isRTL ? "flex-start" : "flex-end",
+                        gap: shift2 ? 4 : 0,
+                        flex: 1,
+                      }}
+                    >
+                      {hasShifts ? (
+                        <>
+                          <ProText
+                            style={{
+                              fontSize: 14,
+                              fontWeight: isToday ? 500 : 400,
+                              color: isToday ? "#1890ff" : "#666",
+                              lineHeight: "20px",
+                            }}
+                          >
+                            {shift1}
+                          </ProText>
+                          {shift2 && (
+                            <ProText
+                              style={{
+                                fontSize: 14,
+                                fontWeight: isToday ? 500 : 400,
+                                color: isToday ? "#1890ff" : "#666",
+                                lineHeight: "20px",
+                              }}
+                            >
+                              {shift2}
+                            </ProText>
+                          )}
+                        </>
+                      ) : (
+                        <ProText
+                          type="secondary"
+                          style={{
+                            fontSize: 14,
+                            color: "#999",
+                            fontStyle: "italic",
+                          }}
+                        >
+                          {t("menu.closed")}
+                        </ProText>
+                      )}
+                    </div>
+                  </div>
+                </Card>
               );
             })}
           </div>