fix(menu-app): 6 UI adjustments

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>
2026-06-01 16:23:40 +03:00
parent ffaeab136d
commit a6f759bf49
4 changed files with 20 additions and 18 deletions
--- a/connect_frontend/menu-app/index.html
+++ b/connect_frontend/menu-app/index.html
@@ -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>
--- a/connect_frontend/menu-app/src/components/primitives.jsx
+++ b/connect_frontend/menu-app/src/components/primitives.jsx
@@ -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>
--- a/connect_frontend/menu-app/src/pages/MenuPage.jsx
+++ b/connect_frontend/menu-app/src/pages/MenuPage.jsx
@@ -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 ? (
-          <img
-            src={product.image_url}
-            alt={name}
-            className="mt-2 h-44 w-full rounded-2xl object-cover"
-          />
+          <div className="mt-2 aspect-square w-full overflow-hidden rounded-2xl">
+            <img
+              src={product.image_url}
+              alt={name}
+              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}
--- a/connect_frontend/menu-app/tailwind.config.js
+++ b/connect_frontend/menu-app/tailwind.config.js
@@ -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: {