Redesign

components/BigPrice/BigPrice.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { splitPrice } from "../../functions/products"
+
+export const BigPrice: React.FC<{ isMulti?: boolean; price: number }> = ({
+  isMulti = false,
+  price,
+}) => {
+  const [priceWhole, priceDecimal] = splitPrice(price)
+  return (
+    <span>
+      {isMulti && "от "}
+      <span className="text-2xl">
+        {priceWhole}
+        <span className="text-xs align-super ml-0.5">{priceDecimal}</span>
+      </span>
+    </span>
+  )
+}

components/Button/Button.tsx

@@ -13,7 +13,7 @@ export const Button: React.FC<ButtonProps> = ({ className, children, fullWidth,
   return (
     <button
       className={clsx(
-        "py-2 px-4 bg-gray-100 rounded-xl hover:bg-gray-200 relative",
+        "py-2 px-4 bg-white rounded-2xl hover:text-orange-600 relative",
         fullWidth && "w-full",
         className,
       )}

components/Header/Header.tsx

@@ -0,0 +1,11 @@
+import clsx from "clsx"
+import React from "react"
+
+export interface HeaderProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+export const H1: React.FC<HeaderProps> = ({ children, className }) => {
+  return <h1 className={clsx("text-lg font-semibold leading-6", className)}>{children}</h1>
+}

components/Input/Input.tsx

@@ -0,0 +1,22 @@
+import { css } from "@emotion/css"
+import clsx from "clsx"
+import React from "react"
+
+export interface InputProps extends React.HTMLProps<HTMLInputElement> {
+}
+
+export const Input: React.FC<InputProps> = ({
+  className,
+  ...props
+}) => {
+  return (
+    <input
+      className={clsx(
+        "bg-white rounded-xl border border-gray-200 hover:border-gray-300 active:border-gray-300",
+        css`padding: 9px 19px`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}

components/Island/Island.tsx

@@ -0,0 +1,10 @@
+import clsx from "clsx"
+import React from "react"
+
+export const Island: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className }) => {
+  return (
+    <div className={clsx("flex-grow bg-white rounded-2xl px-4", className)}>
+      {children}
+    </div>
+  )
+}

components/Layout.tsx

@@ -1,19 +1,19 @@
 import clsx from "clsx"
 import React, { ReactNode } from "react"
-import { HeaderSpacer } from "./HeaderLayout"
+import { NavbarSpacer } from "./NavbarLayout"
 
 export const MainLayout: React.FC<{ children: ReactNode; className?: string }> = ({ children, className }) => {
   return (
-    <main className={clsx("max-w-xl mx-auto pt-4 px-4 min-h-screen", className)}>
-      <HeaderSpacer />
+    <main className={clsx("max-w-xl mx-auto pt-4 px-4 pb-8 min-h-screen", className)}>
+      <NavbarSpacer />
       {children}
     </main>
   )
 }
 export const MainLayoutNoMargin: React.FC<{ children: ReactNode; className?: string }> = ({ children, className }) => {
   return (
     <main className={clsx("max-w-xl mx-auto pt-4 min-h-screen", className)}>
-      <HeaderSpacer />
+      <NavbarSpacer />
       {children}
     </main>
   )

components/Header.module.css → components/Navbar/Navbar.module.css

@@ -1,4 +1,4 @@
-.header {
+.navbar {
     /*padding-top: env(safe-area-inset-top);*/
     /*padding-left: env(safe-area-inset-left);*/
     /*padding-right: env(safe-area-inset-right);*/

components/Navbar/Navbar.tsx

@@ -0,0 +1,63 @@
+import { Search } from "@mui/icons-material"
+import clsx from "clsx"
+import Link from "next/link"
+import React, { ReactNode } from "react"
+import styles from "./Navbar.module.css"
+
+const NavbarLink: React.FC<{ link: string; text: string }> = ({ link, text }) => {
+  return (
+    <Link href={link}>
+      <a className="my-2 py-2 px-2 hover:text-orange-600 flex-shrink-0">{text}</a>
+    </Link>
+  )
+}
+
+const NavbarLinkIcon: React.FC<{ link: string; label: string; children: ReactNode }> = ({ link, label, children }) => {
+  return (
+    <Link href={link}>
+      <a className="p-2 leading-none hover:text-orange-600 flex-shrink-0" aria-label={label}>
+        {children}
+      </a>
+    </Link>
+  )
+}
+
+export const Navbar: React.FC = () => {
+  return (
+    <nav className={clsx("w-full fixed z-50 top-0 bg-white drop-shadow-sm", styles.navbar)}>
+      <div className="mx-auto max-w-xl flex flex-row items-center overflow-auto px-2">
+        <Link href="/">
+          <a className="py-2 px-2 font-semibold flex-shrink-0 hover:text-orange-600 rounded-lg">Price Monitor</a>
+        </Link>
+        <NavbarLink link="/scanner" text="Сканер" />
+        <NavbarLink link="/categories" text="Категории" />
+        <div className="flex-grow"></div>
+
+        {/*<NavbarLinkIcon link="/scanner" label="Сканер">*/}
+        {/*  <svg*/}
+        {/*    width={24}*/}
+        {/*    height={24}*/}
+        {/*    version="1.1"*/}
+        {/*    viewBox="0 0 24 24"*/}
+        {/*    xmlns="http://www.w3.org/2000/svg"*/}
+        {/*    className={"fill-current"}*/}
+        {/*  >*/}
+        {/*    <g id="Layer_2">*/}
+        {/*      <g>*/}
+        {/*        <path d="M17,3h-1c-0.6,0-1,0.4-1,1s0.4,1,1,1h1c1.1,0,2,0.9,2,2v1.1c0,0.6,0.4,1,1,1s1-0.4,1-1V7C21,4.8,19.2,3,17,3z" />*/}
+        {/*        <path d="M20,15c-0.6,0-1,0.4-1,1v1c0,1.1-0.9,2-2,2h-1c-0.6,0-1,0.4-1,1s0.4,1,1,1h1c2.2,0,4-1.8,4-4v-1C21,15.4,20.6,15,20,15z" />*/}
+        {/*        <path d="M8,19H7c-1.1,0-2-0.9-2-2v-1c0-0.6-0.4-1-1-1s-1,0.4-1,1v1c0,2.2,1.8,4,4,4h1c0.6,0,1-0.4,1-1S8.6,19,8,19z" />*/}
+        {/*        <path d="M4,9c0.6,0,1-0.4,1-1V7c0-1.1,0.9-2,2-2h1c0.6,0,1-0.4,1-1S8.6,3,8,3H7C4.8,3,3,4.8,3,7v1C3,8.5,3.4,9,4,9z" />*/}
+        {/*        <path d="M20,11H4c-0.6,0-1,0.4-1,1s0.4,1,1,1h16c0.6,0,1-0.4,1-1S20.6,11,20,11z" />*/}
+        {/*      </g>*/}
+        {/*    </g>*/}
+        {/*  </svg>*/}
+        {/*</NavbarLinkIcon>*/}
+
+        <NavbarLinkIcon link="/search" label="Поиск">
+          <Search />
+        </NavbarLinkIcon>
+      </div>
+    </nav>
+  )
+}

components/HeaderLayout.tsx → components/NavbarLayout.tsx

@@ -1,14 +1,14 @@
 import { css } from "@emotion/css"
 import React, { ReactNode } from "react"
-import { Header } from "./Header"
+import { Navbar } from "./Navbar/Navbar"
 
-export const HeaderLayout: React.FC<{ children: ReactNode }> = ({ children }) => {
+export const NavbarLayout: React.FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <>
-      <Header />
+      <Navbar />
       {children}
     </>
   )
 }
 
-export const HeaderSpacer: React.FC = () => <div className={css({ height: "calc(56px + env(safe-area-inset-top))" })} />
+export const NavbarSpacer: React.FC = () => <div className={css({ height: "calc(56px + env(safe-area-inset-top))" })} />

components/ProductListItem/ProductListItem.module.css

@@ -5,15 +5,6 @@
     z-index: 1;
 }
 
-.link:hover {
-    color: #EB5500;
-}
-
-.title {
-    font-weight: 500;
-    line-height: 1.1875;
-}
-
 .divider {
     border-bottom: 1px solid #F0F0F0;
     display: none;

components/ProductListItem/ProductListItem.tsx

@@ -2,12 +2,12 @@ import { cx } from "@emotion/css"
 import clsx from "clsx"
 import Link from "next/link"
 import React from "react"
-import { formatPrice, formatUom, splitPrice } from "../../functions/products"
+import { formatPrice, formatUom } from "../../functions/products"
 import { generateSlug } from "../../functions/slug"
 import { insertNbspIntoName } from "../../functions/utils"
 import { ProductWithPriceModel } from "../../models/Product"
-import { ShopLogo } from "../Logos"
-import { VStack } from "../VStack/VStack"
+import { BigPrice } from "../BigPrice/BigPrice"
+import { ShopLogo } from "../ShopLogo/ShopLogo"
 import styles from "./ProductListItem.module.css"
 
 const EAN_DISPLAY_LIMIT = 1
@@ -18,21 +18,6 @@ const formatEanText = (eans: string[]) => {
     : eans.join(", ")
 }
 
-const BigPrice: React.FC<{ isMulti?: boolean; price: number }> = ({ isMulti = false, price }) => {
-  const [priceWhole, priceDecimal] = splitPrice(price)
-  return (
-    <span>
-      {isMulti && "от "}
-      <span className="text-2xl">
-        {priceWhole}
-        <span className="text-xs align-super ml-0.5">
-          {priceDecimal}
-        </span>
-      </span>
-    </span>
-  )
-}
-
 export const ProductListItem: React.FC<{ product: ProductWithPriceModel }> = ({ product }) => {
   const uom = formatUom(product)
   return (
@@ -51,15 +36,16 @@ export const ProductListItem: React.FC<{ product: ProductWithPriceModel }> = ({
             />
           )}
         </div>
-        <VStack gap={"4"} className="grow min-h-16">
+        <div className="flex flex-col gap-3 grow min-h-16">
           <Link href={`/product/${generateSlug(product)}`}>
-            <a className={cx("inline-block", styles.title, styles.link)}>{insertNbspIntoName(product.name)}</a>
+            <a className={cx("inline-block hover:text-orange-600 leading-tight font-medium", styles.link)}>
+              {insertNbspIntoName(product.name)}
+            </a>
           </Link>
           {product.shops.length > 0 && (
             <>
-              <div className="flex items-center">
+              <div className="flex flex-wrap items-center justify-between">
                 <BigPrice isMulti={product.shops.length > 1} price={product.shops[0].price} />
-                <div className="grow" />
                 <ShopLogo shopType={product.shops[0].shopType} className="h-8" monochrome />
               </div>
               <div className="flex flex-wrap justify-end text-secondary text-xs">
@@ -78,7 +64,7 @@ export const ProductListItem: React.FC<{ product: ProductWithPriceModel }> = ({
               </div>
             </>
           )}
-        </VStack>
+        </div>
       </div>
     </div>
   )

components/ProductView/Product.module.css

@@ -3,13 +3,12 @@
 }
 
 .shopIcon {
-    width: 50px;
     flex-shrink: 0;
-    @apply mr-4 w-14 sm:w-16;
+    @apply w-14 sm:w-16;
 }
 
 .shopSubtitle {
-    @apply font-medium text-xs;
+    @apply text-xs;
 }
 
 .priceMain {