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> <title>Menu</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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> </head>
<body> <body>
<div id="root"></div> <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 ( return (
<div className="flex items-baseline gap-1.5"> <div className="flex items-baseline gap-1.5">
{discounted && ( {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 <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)} {eur(now)}
</span> </span>

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

@@ -102,7 +102,7 @@ function Sheet({ open, onClose, children, maxH = '88vh' }) {
onClick={onClose} onClick={onClose}
/> />
<div <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 }} style={{ maxHeight: maxH }}
> >
{children} {children}
@@ -271,7 +271,7 @@ function ProductCard({ product, category, lang, t, onOpen, onAdd, qty }) {
{desc} {desc}
</p> </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"> <div className="flex items-center gap-2">
<Price product={product} large /> <Price product={product} large />
<DiscountFlag product={product} t={t} /> <DiscountFlag product={product} t={t} />
@@ -279,7 +279,7 @@ function ProductCard({ product, category, lang, t, onOpen, onAdd, qty }) {
<button <button
onClick={e => { e.stopPropagation(); if (!unavailable) onAdd(product) }} onClick={e => { e.stopPropagation(); if (!unavailable) onAdd(product) }}
aria-label={t.add} 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} /> <Plus className="h-4 w-4" strokeWidth={2.4} />
{qty > 0 ? <span className="tabular-nums">{qty}</span> : t.add} {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"> <section ref={sectionRef} data-section={category.id} className="scroll-mt-[64px] px-3 pt-3">
<div <div
className="rounded-[22px] px-3 pb-3 pt-2.5" 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"> <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> <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"> <div className="max-h-[82vh] overflow-y-auto px-5 pb-5">
{/* Hero art */} {/* Hero art */}
{product.image_url ? ( {product.image_url ? (
<img <div className="mt-2 aspect-square w-full overflow-hidden rounded-2xl">
src={product.image_url} <img
alt={name} src={product.image_url}
className="mt-2 h-44 w-full rounded-2xl object-cover" alt={name}
/> className="h-full w-full object-cover"
/>
</div>
) : ( ) : (
<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%))` }} style={{ background: `linear-gradient(135deg, hsl(${hue} 34% 90%), hsl(${hue} 30% 80%))` }}
> >
<GlyphIcon <GlyphIcon
@@ -452,7 +454,7 @@ function SearchOverlay({ open, onClose, categories, lang, t, onOpen, onAdd, cart
if (!open) return null if (!open) return null
return ( 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 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]"> <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} /> <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 if (count === 0) return null
return ( 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 <button
onClick={onClick} 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' : ''}`} 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 ( 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} /> <Hero lang={lang} setLang={setLang} restaurant={restaurant} />
<CategoryBar <CategoryBar
categories={categories} categories={categories}

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

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