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

styles adjustments

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-10 00:44:50 +03:00
parent 148c1c3f40
commit caa109fbcb
4 changed files with 27 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ArabicPrice/ArabicPrice.tsx
View File

@@ -47,6 +47,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
style={{
verticalAlign: "baseline",
lineHeight: 1,
fontSize: "14px",
...(decorationStyle ?? {}),
}}
>
@@ -55,7 +56,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
<span style={{ margin: "0 2px" }} />
<span
style={{
fontSize: "0.9em",
fontSize: "14px",
verticalAlign: "baseline",
lineHeight: 1,
position: "relative",
@@ -73,6 +74,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
verticalAlign: "baseline",
lineHeight: 1,
display: "inline-block",
fontSize: "14px",
...(decorationStyle ?? {}),
}}
>
@@ -81,7 +83,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
<span style={{ margin: "0 2px" }} />
<span
style={{
fontSize: "0.9em",
fontSize: "14px",
verticalAlign: "baseline",
lineHeight: 1,
display: "inline-block",

49
src/pages/menu/components/CategoriesList/CategoriesList.module.css
View File

@@ -209,6 +209,7 @@
border-radius: 0.375rem;
transition: transform 0.3s ease;
overflow: hidden;
border-radius: 6px;
}
/* Responsive adjustments */
@@ -408,22 +409,6 @@
animation: glowPulse 2s ease-in-out infinite;
}
/* Fade out glow effect when returning to normal */
.categoriesContainer:not(.categoriesSticky)::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(24, 144, 255, 0.1),
transparent
);
animation: glowFadeOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes glowPulse {
0%,
@@ -552,25 +537,6 @@
animation: darkCategoryUpdate 0.6s ease-in-out;
}
@keyframes darkCategoryUpdate {
0% {
transform: scale(1.05);
}
50% {
transform: scale(1.1);
box-shadow: 0 8px 32px rgba(255, 198, 0, 0.4);
}
100% {
transform: scale(1.05);
}
}
/* Enhanced dark theme for container backgrounds */
:global(.darkApp) .container,
:global(.darkApp) .categoriesContainer {
background-color: #0a0a0a !important;
border-bottom-color: #363636 !important;
}
:global(.darkApp) .itemDescriptionIcons path {
fill: #ffffff;
@@ -636,19 +602,6 @@
}
}
/* Enhanced responsive print styles */
@media print {
.menuItem,
.categoryCard {
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.categoriesContainer {
display: none !important;
}
}
/* Mobile-specific sticky categories */
@media (max-width: 768px) {
.categoriesSticky {

26
src/pages/menu/components/CategoriesList/CategoriesList.tsx
View File

@@ -38,12 +38,12 @@ export function CategoriesList({ categories }: CategoriesListProps) {
if (xs) {
return {
width: 90,
height: isCategoriesSticky ? 38 : 110,
height: isCategoriesSticky ? 38 : 120,
};
} else if (md) {
return {
width: 120,
height: isCategoriesSticky ? 38 : 110,
height: isCategoriesSticky ? 38 : 120,
};
} else {
return {
@@ -220,20 +220,10 @@ export function CategoriesList({ categories }: CategoriesListProps) {
src={category.image || default_image}
fallbackSrc={default_image}
alt={category.name}
className={`${styles.categoryMenuItemImage} ${
xs
? styles.categoryMenuItemImageMobile
: md
? styles.categoryMenuItemImageTablet
: styles.categoryMenuItemImageDesktop
}`}
className={`${styles.categoryMenuItemImage}`}
// {...getCategoryImageStyle()}
width={105}
height={80}
style={{
borderEndEndRadius: isCategoriesSticky ? 8 : 0,
borderEndStartRadius: isCategoriesSticky ? 8 : 0,
}}
loadingContainerStyle={{
borderEndEndRadius: isCategoriesSticky ? 8 : 0,
borderEndStartRadius: isCategoriesSticky ? 8 : 0,
@@ -252,16 +242,24 @@ export function CategoriesList({ categories }: CategoriesListProps) {
? {
// backgroundColor: "#fff6e0",
borderBottom: isCategoriesSticky
? activeCategory === category.id
? "solid 1px var(--primary)"
: "solid 1px var(--border)"
: "none",
borderRight: isCategoriesSticky
? activeCategory === category.id
? "solid 1px var(--primary)"
: "solid 1px var(--border)"
: "none",
borderLeft: isCategoriesSticky
? activeCategory === category.id
? "solid 1px var(--primary)"
: "solid 1px var(--border)"
: "none",
borderTop: isCategoriesSticky
? activeCategory === category.id
? "solid 1px var(--primary)"
: "solid 1px var(--border)"
: 0,
borderStartStartRadius: isCategoriesSticky ? 888 : 0,
borderStartEndRadius: isCategoriesSticky ? 888 : 0,
@@ -273,6 +271,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
width: 104,
height: 30,
marginBottom: 1,
border: "none"
}}
>
<ProText
@@ -308,6 +307,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
? `2px solid ${colors.primary}`
: "none",
paddingBottom: activeCategory === category.id ? 8 : 0,
marginTop: isCategoriesSticky ? 0 : 4,
}}
>
{isRTL

10
src/pages/menu/components/MenuList/ProductCard.tsx
View File

@@ -62,7 +62,7 @@ export default function ProductCard({ item }: Props) {
justifyContent: "space-between",
padding: item.description
? "16px 16px 8px 16px"
: "16px 16px 24px 16px",
: "16px",
overflow: "hide",
boxShadow: "none",
},
@@ -71,10 +71,9 @@ export default function ProductCard({ item }: Props) {
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
height: "100%",
gap: isMobile ? 10 : 16,
gap: isMobile ? 11 : 16,
}}
>
<div
@@ -160,6 +159,7 @@ export default function ProductCard({ item }: Props) {
<ItemDescriptionIcons className={styles.itemDescriptionIcons} />
</div>
</div>
<div style={{ position: "relative" }}>
{/* {item.isHasLoyalty && (
<StarIcon className={styles.loyaltyButton} />
@@ -186,8 +186,8 @@ export default function ProductCard({ item }: Props) {
? styles.popularMenuItemImageTablet
: styles.popularMenuItemImageDesktop
}`}
width={90}
height={90}
width={92}
height={92}
/>
{/* <AddToCartButton /> */}