fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

order: enhance UI & styles

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-31 17:46:46 +03:00
parent 2416b37069
commit 1d2c1fda87
16 changed files with 470 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Ads/Ads1.tsx
View File

@@ -27,8 +27,12 @@ export default function Ads1({ className }: { className?: string }) {
>
<ProTitle
style={{
marginTop: 5,
fontSize: 14,
fontFamily: "Roboto",
fontWeight: 600,
fontStyle: "SemiBold",
fontSize: 16,
lineHeight: "100%",
letterSpacing: "2%",
}}
>
{t("home.promotion.description")}
@@ -38,6 +42,7 @@ export default function Ads1({ className }: { className?: string }) {
style={{
marginTop: 5,
fontSize: 14,
color:"#00AC17"
}}
>
{t("home.promotion.title")}

2
src/components/Ads/Ads2.module.css
View File

@@ -63,7 +63,7 @@
}
.adsCard :global(.ant-card-body) {
padding: 8px !important;
padding: 10px !important;
}
:global(.darkApp) .adsCard {

17
src/components/Ads/Ads2.tsx
View File

@@ -8,11 +8,7 @@ import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import styles from "./Ads2.module.css";
export default function Ads2({
className,
}: {
className?: string;
}) {
export default function Ads2({ className }: { className?: string }) {
const { t } = useTranslation();
const { isRTL } = useAppSelector((state) => state.locale);
@@ -26,8 +22,12 @@ export default function Ads2({
<Card className={styles.adsCard}>
<ProTitle
style={{
marginTop: 5,
fontSize: 14,
fontFamily: "Roboto",
fontWeight: 600,
fontStyle: "SemiBold",
fontSize: 16,
lineHeight: "100%",
letterSpacing: "2%",
}}
>
{t("home.promotion.description")}
@@ -37,9 +37,10 @@ export default function Ads2({
style={{
marginTop: 5,
fontSize: 14,
color: "#00AC17",
}}
>
{t("home.promotion.title")}
{t("home.showDetails")}
</ProText>
<div

15
src/components/CustomBottomSheet/CustomBottomSheet.module.css
View File

@@ -17,22 +17,7 @@
width: 100%;
}
.rateServiceCard{
width: 100%;
height: 48px;
display: flex;
justify-content: center;
padding: 12px 18px !important;
row-gap: 10px;
transition: all 0.3s ease;
border-radius: 50px;
}
.rateServiceCard :global(.ant-card-body) {
padding: 0px !important;
text-align: start;
width: 100%;
}
.serviceIcon path {
stroke: #ea1f22;

29
src/components/Icons/NoteIcon.tsx Normal file
View File

@@ -0,0 +1,29 @@
interface NoteIconType {
className?: string;
onClick?: () => void;
}
const NoteIcon = ({ className, onClick }: NoteIconType) => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
onClick={onClick}
>
<path
d="M12 16H12.008M12 8V13M3.23005 7.913L7.91005 3.23C8.06005 3.08 8.26005 3 8.48005 3H15.53C15.74 3 15.95 3.08 16.1 3.23L20.77 7.903C20.92 8.053 21 8.253 21 8.473V15.527C21 15.737 20.92 15.947 20.77 16.097L16.1 20.77C15.95 20.92 15.75 21 15.53 21H8.47005C8.36456 21.0011 8.2599 20.9814 8.16208 20.9419C8.06425 20.9025 7.9752 20.844 7.90005 20.77L3.23005 16.097C3.15602 16.0218 3.09759 15.9328 3.05812 15.835C3.01865 15.7371 2.99891 15.6325 3.00005 15.527V8.473C3.00005 8.263 3.08005 8.053 3.23005 7.903V7.913Z"
stroke="#3D3B4A"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);
};
export default NoteIcon;

33
src/components/Icons/SuccessIcon.tsx Normal file
View File

@@ -0,0 +1,33 @@
interface SuccessIconType {
className?: string;
onClick?: () => void;
}
const SuccessIcon = ({ className, onClick }: SuccessIconType) => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
onClick={onClick}
>
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
stroke="#32AD6D"
strokeWidth="1.5"
/>
<path
d="M8.5 12.5L10.5 14.5L15.5 9.5"
stroke="#32AD6D"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default SuccessIcon;

26
src/components/Icons/order/NewRateIcon.tsx Normal file
View File

@@ -0,0 +1,26 @@
interface NewRateIconType {
className?: string;
onClick?: () => void;
}
const NewRateIcon = ({ className, onClick }: NewRateIconType) => {
return (
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
onClick={onClick}
>
<circle cx="14" cy="14" r="13.5" fill="black" />
<path
d="M19.2216 16.509C19.2946 16.436 19.3814 16.3995 19.4819 16.3995C19.5824 16.3995 19.6691 16.436 19.7421 16.509L20.9376 17.709C21.0106 17.782 21.0471 17.8705 21.0471 17.9745C21.0471 18.0785 21.0106 18.167 20.9376 18.24C20.8646 18.313 20.7761 18.3495 20.6721 18.3495C20.5681 18.3495 20.4796 18.313 20.4066 18.24L19.2066 17.0438C19.1336 16.9707 19.0996 16.8817 19.1046 16.7767C19.1096 16.6718 19.1491 16.5825 19.2216 16.509ZM19.7406 7.79775C19.8136 7.87075 19.8501 7.95975 19.8501 8.06475C19.8501 8.16975 19.8136 8.259 19.7406 8.3325L18.5444 9.528C18.4714 9.601 18.3846 9.6375 18.2841 9.6375C18.1836 9.6375 18.0969 9.601 18.0239 9.528C17.9509 9.455 17.9144 9.366 17.9144 9.261C17.9144 9.156 17.9509 9.06675 18.0239 8.99325L19.2096 7.79775C19.2826 7.72425 19.3711 7.6875 19.4751 7.6875C19.5791 7.6875 19.6676 7.72425 19.7406 7.79775ZM8.25963 7.812C8.33263 7.739 8.42188 7.7025 8.52737 7.7025C8.63238 7.7025 8.72162 7.739 8.79512 7.812L9.99062 8.997C10.0636 9.0705 10.1001 9.15925 10.1001 9.26325C10.1001 9.36675 10.0636 9.45525 9.99062 9.52875C9.91762 9.60175 9.82837 9.63825 9.72287 9.63825C9.61787 9.63825 9.52887 9.60175 9.45587 9.52875L8.25963 8.3325C8.18663 8.2595 8.15012 8.17275 8.15012 8.07225C8.15012 7.97175 8.18663 7.885 8.25963 7.812ZM8.77937 16.524C8.85237 16.597 8.88887 16.6838 8.88887 16.7843C8.88887 16.8847 8.85237 16.9715 8.77937 17.0445L7.58312 18.24C7.51012 18.313 7.42337 18.3495 7.32287 18.3495C7.22237 18.3495 7.13562 18.313 7.06262 18.24C6.98962 18.167 6.95312 18.0778 6.95312 17.9723C6.95312 17.8668 6.98962 17.7775 7.06262 17.7045L8.24762 16.509C8.32112 16.436 8.40987 16.4017 8.51387 16.4062C8.61737 16.4113 8.70587 16.451 8.77937 16.524ZM14.0001 17.4945L10.6139 19.527C10.5339 19.5665 10.4599 19.5825 10.3919 19.575C10.3234 19.567 10.2569 19.5435 10.1924 19.5045C10.1279 19.4645 10.0789 19.408 10.0454 19.335C10.0119 19.261 10.0089 19.1813 10.0364 19.0958L10.9341 15.2925L7.94687 12.7095C7.87937 12.6545 7.83737 12.5887 7.82087 12.5122C7.80387 12.4363 7.81087 12.363 7.84187 12.2925C7.87287 12.222 7.91412 12.1647 7.96562 12.1207C8.01712 12.0767 8.08713 12.047 8.17563 12.0315L12.1019 11.6985L13.6379 8.0865C13.6719 8.004 13.7209 7.9445 13.7849 7.908C13.8489 7.8715 13.9206 7.8535 14.0001 7.854C14.0796 7.8545 14.1516 7.87275 14.2161 7.90875C14.2806 7.94475 14.3294 8.00425 14.3624 8.08725L15.9126 11.6992L19.8389 12.0322C19.9274 12.0472 19.9974 12.0772 20.0489 12.1222C20.1009 12.1657 20.1424 12.2228 20.1734 12.2933C20.2044 12.3637 20.2114 12.437 20.1944 12.513C20.1774 12.5895 20.1351 12.6553 20.0676 12.7102L17.0811 15.2933L17.9781 19.1108C18.0061 19.1963 18.0031 19.2735 17.9691 19.3425C17.9351 19.4115 17.8861 19.4657 17.8221 19.5052C17.7576 19.5442 17.6914 19.5675 17.6234 19.575C17.5549 19.583 17.4806 19.5673 17.4006 19.5278L14.0001 17.4945Z"
fill="white"
/>
</svg>
);
};
export default NewRateIcon;

2
src/components/OrderSummary/OrderSummary.module.css
View File

@@ -14,7 +14,7 @@
}
.summaryDivider {
margin: 8px 0 !important;
margin: 0 !important;
}
.totalRow {

5
src/components/OrderSummary/OrderSummary.tsx
View File

@@ -111,7 +111,7 @@ export default function OrderSummary() {
/>
</div>
)}
<Divider className={styles.summaryDivider} style={{ margin: "0" }} />
<Divider className={styles.summaryDivider} />
<div className={`${styles.summaryRow} ${styles.totalRow}`}>
<ProText
style={{
@@ -142,13 +142,12 @@ export default function OrderSummary() {
{isHasLoyaltyGift && restaurant?.is_loyalty_enabled === 1 && (
<>
<br />
<br />
<Checkbox
checked={useLoyaltyPoints}
onChange={(value) => {
dispatch(updateUseLoyaltyPoints(value.target.checked));
}}
style={{ marginTop: 8 }}
>
{t("cart.useLoyaltyPoints")}
</Checkbox>

2
src/components/PaymentDetails/PaymentDetails.tsx
View File

@@ -12,7 +12,7 @@ export default function PaymentDetails({ order }: { order?: Order }) {
return (
<>
<Card className={`${styles.orderSummary}`}>
<ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
<ProTitle style={{ fontSize: 18 }}>{t("cart.paymentSummary")}</ProTitle>
<Divider style={{ margin: "15px 0 15px 0" }} />
<Space orientation="vertical" style={{ width: "100%" }}>
<div className={`${styles.summaryRow} ${styles.totalRow}`}>