enhance openening times UI styles

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}
+      height={600}
-      snapPoints={[500]}
+      snapPoints={[600]}
     >
       <div
         style={{
           display: "flex",
           flexDirection: "column",
-          padding: "20px 20px 0",
+          padding: "20px 0",
-          gap: 24,
+          gap: 20,
+          maxHeight: "calc(600px - 120px)",
+          overflowY: "auto",
         }}
       >
         {/* Address Section */}
-        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <Card
-          <ProTitle level={5} style={{ marginBottom: 0 }}>
+          bordered={false}
+          style={{
+            backgroundColor: "#f8f9fa",
+            borderRadius: 12,
+            boxShadow: "none",
+          }}
+          bodyStyle={{ padding: "16px" }}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              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" }}
+              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: 12 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-          <ProTitle level={5} style={{ marginBottom: 0 }}>
+          <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: 12,
+              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={{
+                    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" }}
+                >
+                  <div
                     style={{
                       display: "flex",
                       justifyContent: "space-between",
-                    alignItems: "flex-start",
+                      alignItems: "center",
-                    padding: isToday ? "8px 12px" : "4px 0",
+                      gap: 16,
-                    backgroundColor: isToday
-                      ? "rgba(0, 0, 0, 0.02)"
-                      : "transparent",
-                    borderRadius: 8,
-                    transition: "background-color 0.2s ease",
                     }}
                   >
-                  <ProText
+                    <div
-                    type={isToday ? undefined : "secondary"}
                       style={{
-                      ...(isToday ? todayTextStyle : dayTextStyle),
+                        display: "flex",
-                      textTransform: "capitalize",
+                        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>
-                  <ProText
+                    </div>
-                    type={isToday ? undefined : "secondary"}
+
+                    <div
                       style={{
-                      ...(isToday ? todayTextStyle : dayTextStyle),
+                        display: "flex",
-                      textAlign: isRTL ? "left" : "right",
+                        flexDirection: "column",
+                        alignItems: isRTL ? "flex-start" : "flex-end",
+                        gap: shift2 ? 4 : 0,
                         flex: 1,
-                      color: !hasShifts ? "#999" : undefined,
                       }}
                     >
-                    {timeDisplay}
+                      {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>