enhance openening times UI styles
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user