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