enhnace items styles
This commit is contained in:
29
src/components/Icons/StarIcon.tsx
Normal file
29
src/components/Icons/StarIcon.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
interface StarIconType {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const StarIcon = ({ className, onClick }: StarIconType) => {
|
||||
return (
|
||||
<svg
|
||||
width="17"
|
||||
height="16"
|
||||
viewBox="0 0 17 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<path
|
||||
d="M7.8951 0.97117C7.92797 0.904766 7.97874 0.84887 8.04169 0.809789C8.10464 0.770709 8.17726 0.75 8.25135 0.75C8.32544 0.75 8.39806 0.770709 8.46101 0.809789C8.52396 0.84887 8.57473 0.904766 8.6076 0.97117L10.3401 4.48042C10.4541 4.71151 10.6225 4.91144 10.8309 5.063C11.0393 5.21455 11.2814 5.31319 11.5363 5.35042L15.4109 5.91742C15.4843 5.92806 15.5532 5.95902 15.61 6.00682C15.6667 6.05462 15.7089 6.11733 15.7319 6.18788C15.7548 6.25842 15.7576 6.33397 15.7398 6.406C15.722 6.47802 15.6845 6.54363 15.6314 6.59542L12.8294 9.32392C12.6444 9.50388 12.506 9.72616 12.4262 9.97155C12.3464 10.2169 12.3274 10.4781 12.3711 10.7324L13.0326 14.5874C13.0456 14.6608 13.0376 14.7363 13.0097 14.8054C12.9818 14.8745 12.935 14.9344 12.8748 14.9782C12.8145 15.022 12.7431 15.0479 12.6687 15.0531C12.5944 15.0583 12.5201 15.0424 12.4543 15.0074L8.99085 13.1864C8.76268 13.0665 8.50876 13.0038 8.25097 13.0038C7.99319 13.0038 7.73927 13.0665 7.5111 13.1864L4.04835 15.0074C3.9826 15.0422 3.9084 15.0579 3.83419 15.0526C3.75998 15.0473 3.68874 15.0213 3.62857 14.9776C3.5684 14.9338 3.52172 14.8741 3.49384 14.8051C3.46596 14.7361 3.45799 14.6607 3.47085 14.5874L4.1316 10.7332C4.17538 10.4787 4.15653 10.2174 4.07669 9.9719C3.99685 9.72636 3.85841 9.50396 3.67335 9.32392L0.87135 6.59617C0.817795 6.54444 0.779845 6.47872 0.761822 6.40648C0.743799 6.33423 0.746427 6.25838 0.769409 6.18756C0.79239 6.11674 0.8348 6.0538 0.891807 6.00591C0.948815 5.95801 1.01813 5.92709 1.09185 5.91667L4.9656 5.35042C5.22083 5.31342 5.46324 5.21488 5.6719 5.06332C5.88057 4.91175 6.04923 4.7117 6.16335 4.48042L7.8951 0.97117Z"
|
||||
fill="#FFC600"
|
||||
stroke="#FFC600"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default StarIcon;
|
||||
@@ -11,7 +11,7 @@
|
||||
--secondary-background: #ffffff;
|
||||
--secondary-foreground: #0a0a0a;
|
||||
--primary-dark: #0a0a0a;
|
||||
--primary: #FFC600;
|
||||
--primary: #ffc600;
|
||||
--primary2: #ffc600;
|
||||
--secondary: #09237d;
|
||||
--text-color: #fff;
|
||||
@@ -26,9 +26,7 @@
|
||||
);
|
||||
|
||||
/* Typography */
|
||||
--font-roboto:
|
||||
"Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
sans-serif;
|
||||
--font-roboto: Outfit;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
|
||||
@@ -299,10 +299,21 @@ export function CategoriesList({ categories }: CategoriesListProps) {
|
||||
width: xs ? 80 : md ? 100 : 120,
|
||||
display: "inline-block",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: "inline-block",
|
||||
borderBottom:
|
||||
activeCategory === category.id && !isCategoriesSticky
|
||||
? `2px solid ${colors.primary}`
|
||||
: "none",
|
||||
paddingBottom: activeCategory === category.id ? 8 : 0,
|
||||
}}
|
||||
>
|
||||
{isRTL
|
||||
? category.name || category.nameEN
|
||||
: category.nameEN || category.name}
|
||||
</span>
|
||||
</ProText>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
@@ -68,15 +68,14 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loyaltyButton {
|
||||
/* .loyaltyButton {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
z-index: 99;
|
||||
background-color: var(--primary) !important;
|
||||
color: white !important;
|
||||
border: none !important;
|
||||
}
|
||||
} */
|
||||
|
||||
:global(.ant-app-rtl) .loyaltyButton {
|
||||
right: 1px !important;
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import styles from "pages/menu/components/MenuList/ProductCard.module.css";
|
||||
import { Card, Button, Badge } from "antd";
|
||||
import { Card, Badge } from "antd";
|
||||
import ProText from "components/ProText.tsx";
|
||||
import ArabicPrice from "components/ArabicPrice";
|
||||
import { colors } from "ThemeConstants.ts";
|
||||
import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons.tsx";
|
||||
import { StarOutlined } from "@ant-design/icons";
|
||||
import ImageWithFallback from "components/ImageWithFallback";
|
||||
import { Product } from "utils/types/appTypes.ts";
|
||||
import useBreakPoint from "hooks/useBreakPoint.ts";
|
||||
@@ -12,13 +11,13 @@ import { useAppSelector } from "redux/hooks.ts";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog";
|
||||
import { useState } from "react";
|
||||
import StarIcon from "components/Icons/StarIcon";
|
||||
|
||||
type Props = {
|
||||
item: Product;
|
||||
};
|
||||
export default function ProductCard({ item }: Props) {
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
const { themeName } = useAppSelector((state) => state.theme);
|
||||
const { isMobile, isTablet, isDesktop } = useBreakPoint();
|
||||
const { items } = useAppSelector((state) => state.order);
|
||||
const { subdomain } = useParams();
|
||||
@@ -86,15 +85,17 @@ export default function ProductCard({ item }: Props) {
|
||||
gap: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<StarIcon />
|
||||
<ProText
|
||||
style={{
|
||||
margin: 0,
|
||||
display: "inline-block",
|
||||
fontSize: "1rem",
|
||||
fontWeight: 600,
|
||||
letterSpacing: "-0.01em",
|
||||
lineHeight: 1.2,
|
||||
color: themeName === "dark" ? "#fff" : "#000044",
|
||||
fontStyle: "SemiBold",
|
||||
fontSize: "16px",
|
||||
// leadingTrim: "NONE",
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
}}
|
||||
>
|
||||
{isRTL ? item.name : item.nameOther}
|
||||
@@ -111,10 +112,13 @@ export default function ProductCard({ item }: Props) {
|
||||
textOverflow: "ellipsis",
|
||||
wordWrap: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
lineHeight: "1.5rem",
|
||||
maxHeight: "3em",
|
||||
fontSize: "1rem",
|
||||
letterSpacing: "0.01em",
|
||||
fontWeight: 500,
|
||||
fontStyle: "Medium",
|
||||
fontSize: "12px",
|
||||
// leadingTrim: "NONE",
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
@@ -157,13 +161,9 @@ export default function ProductCard({ item }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ position: "relative" }}>
|
||||
{item.isHasLoyalty && (
|
||||
<Button
|
||||
className={styles.loyaltyButton}
|
||||
icon={<StarOutlined />}
|
||||
style={{ width: 24, height: 24 }}
|
||||
/>
|
||||
)}
|
||||
{/* {item.isHasLoyalty && (
|
||||
<StarIcon className={styles.loyaltyButton} />
|
||||
)} */}
|
||||
<Badge
|
||||
size="default"
|
||||
offset={[-3, 3]}
|
||||
|
||||
Reference in New Issue
Block a user