bonamin/xenia-pos-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(menu-app): 6 UI adjustments

Browse Source 
1. Font consistency: add Noto Sans as fallback for both display and body
   fonts so Greek characters render in the same visual weight as Latin
2. Category panel gradients: reduce top opacity 0.85 → 0.65 (20% less)
3. Mobile full-width: remove max-w cap on mobile; sm:max-w-[960px] on
   desktop (2× wider than before); shadow only on sm+ breakpoint
4. Smaller Add button (h-9→h-8, text-13→12) and price (22px→18px)
5. More spacing between description and footer hairline (pt-3 mt-3)
6. Square hero image in product detail sheet (aspect-square instead of h-44)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vasileios Kousaridas
2026-06-01 16:23:40 +03:00
parent ffaeab136d
commit a6f759bf49
4 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
connect_frontend/menu-app/index.html
View File

@@ -6,7 +6,7 @@
<title>Menu</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>

4
connect_frontend/menu-app/src/components/primitives.jsx
View File

@@ -163,10 +163,10 @@ export function Price({ product, large }) {
return (
<div className="flex items-baseline gap-1.5">
{discounted && (
<span className="font-display text-[15px] text-[#b3aa97] line-through">{eur(base)}</span>
<span className="font-display text-[13px] text-[#b3aa97] line-through">{eur(base)}</span>
)}
<span
className={`font-display ${large ? 'text-[22px]' : 'text-[19px]'} font-semibold ${discounted ? 'text-[#c2602f]' : 'text-[#2d3b2d]'}`}
className={`font-display ${large ? 'text-[18px]' : 'text-[16px]'} font-semibold ${discounted ? 'text-[#c2602f]' : 'text-[#2d3b2d]'}`}
>
{eur(now)}
</span>

20
connect_frontend/menu-app/src/pages/MenuPage.jsx
View File

@@ -102,7 +102,7 @@ function Sheet({ open, onClose, children, maxH = '88vh' }) {
onClick={onClose}
/>
<div
className="relative z-10 w-full max-w-[480px] animate-slideup overflow-hidden rounded-t-[24px] bg-[#faf7f0] shadow-[0_-12px_40px_-12px_rgba(45,42,31,0.4)]"
className="relative z-10 w-full sm:max-w-[960px] animate-slideup overflow-hidden rounded-t-[24px] bg-[#faf7f0] shadow-[0_-12px_40px_-12px_rgba(45,42,31,0.4)]"
style={{ maxHeight: maxH }}
>
{children}
@@ -271,7 +271,7 @@ function ProductCard({ product, category, lang, t, onOpen, onAdd, qty }) {
{desc}
</p>
<div className="mt-auto flex items-center justify-between gap-3 border-t border-[#ece4d2] pt-2.5">
<div className="mt-auto flex items-center justify-between gap-3 border-t border-[#ece4d2] pt-3 mt-3">
<div className="flex items-center gap-2">
<Price product={product} large />
<DiscountFlag product={product} t={t} />
@@ -279,7 +279,7 @@ function ProductCard({ product, category, lang, t, onOpen, onAdd, qty }) {
<button
onClick={e => { e.stopPropagation(); if (!unavailable) onAdd(product) }}
aria-label={t.add}
className="flex h-9 items-center gap-1 rounded-full bg-[#2d3b2d] pl-3 pr-3.5 text-[13px] font-semibold text-[#f0e9d6] shadow-sm transition active:scale-95 hover:bg-[#26331f]"
className="flex h-8 items-center gap-1 rounded-full bg-[#2d3b2d] pl-2.5 pr-3 text-[12px] font-semibold text-[#f0e9d6] shadow-sm transition active:scale-95 hover:bg-[#26331f]"
>
<Plus className="h-4 w-4" strokeWidth={2.4} />
{qty > 0 ? <span className="tabular-nums">{qty}</span> : t.add}
@@ -299,7 +299,7 @@ function Section({ category, lang, t, onOpen, onAdd, cart, sectionRef }) {
<section ref={sectionRef} data-section={category.id} className="scroll-mt-[64px] px-3 pt-3">
<div
className="rounded-[22px] px-3 pb-3 pt-2.5"
style={{ background: `linear-gradient(180deg, hsl(${hue} 44% 90% / 0.85) 0%, hsl(${hue} 40% 90% / 0) 62%)` }}
style={{ background: `linear-gradient(180deg, hsl(${hue} 44% 90% / 0.65) 0%, hsl(${hue} 40% 90% / 0) 62%)` }}
>
<div className="mb-2.5 flex items-baseline justify-between px-2 pt-1">
<h2 className="font-sans text-[21px] font-semibold tracking-[-0.01em] text-[#2a2a2a]">{label}</h2>
@@ -352,14 +352,16 @@ function ProductSheet({ product, category, lang, t, onClose, onAdd, qty, onInc,
<div className="max-h-[82vh] overflow-y-auto px-5 pb-5">
{/* Hero art */}
{product.image_url ? (
<div className="mt-2 aspect-square w-full overflow-hidden rounded-2xl">
<img
src={product.image_url}
alt={name}
className="mt-2 h-44 w-full rounded-2xl object-cover"
className="h-full w-full object-cover"
/>
</div>
) : (
<div
className="mt-2 flex h-44 items-center justify-center overflow-hidden rounded-2xl"
className="mt-2 aspect-square w-full flex items-center justify-center overflow-hidden rounded-2xl"
style={{ background: `linear-gradient(135deg, hsl(${hue} 34% 90%), hsl(${hue} 30% 80%))` }}
>
<GlyphIcon
@@ -452,7 +454,7 @@ function SearchOverlay({ open, onClose, categories, lang, t, onOpen, onAdd, cart
if (!open) return null
return (
<div className="fixed inset-0 z-50 mx-auto flex max-w-[480px] flex-col bg-[#faf7f0] animate-fade">
<div className="fixed inset-0 z-50 mx-auto flex w-full sm:max-w-[960px] flex-col bg-[#faf7f0] animate-fade">
<div className="flex items-center gap-2 px-3 py-3">
<div className="flex flex-1 items-center gap-2 rounded-full bg-white px-3.5 py-2.5 ring-1 ring-[#e8e1d1]">
<Search className="h-[18px] w-[18px] text-[#b3aa90]" strokeWidth={1.9} />
@@ -720,7 +722,7 @@ function CartButton({ count, total, t, onClick }) {
if (count === 0) return null
return (
<div className="pointer-events-none fixed inset-x-0 bottom-0 z-40 mx-auto max-w-[480px] px-4 pb-4">
<div className="pointer-events-none fixed inset-x-0 bottom-0 z-40 mx-auto w-full sm:max-w-[960px] px-4 pb-4">
<button
onClick={onClick}
className={`pointer-events-auto flex h-14 w-full items-center justify-between rounded-full bg-[#2d3b2d] px-5 text-[#f0e9d6] shadow-cart transition active:scale-[0.98] ${bump ? 'animate-pop' : ''}`}
@@ -845,7 +847,7 @@ export default function MenuPage() {
)
return (
<div className="relative mx-auto min-h-dvh max-w-[480px] bg-[#faf7f0] shadow-[0_0_60px_-20px_rgba(45,42,31,0.3)]">
<div className="relative mx-auto min-h-dvh w-full sm:max-w-[960px] bg-[#faf7f0] sm:shadow-[0_0_60px_-20px_rgba(45,42,31,0.3)]">
<Hero lang={lang} setLang={setLang} restaurant={restaurant} />
<CategoryBar
categories={categories}

4
connect_frontend/menu-app/tailwind.config.js
View File

@@ -4,8 +4,8 @@ export default {
theme: {
extend: {
fontFamily: {
display: ['Bricolage Grotesque', 'serif'],
sans: ['Hanken Grotesk', 'system-ui', 'sans-serif'],
display: ['Bricolage Grotesque', 'Noto Sans', 'system-ui', 'sans-serif'],
sans: ['Hanken Grotesk', 'Noto Sans', 'system-ui', 'sans-serif'],
},
colors: {
brand: {