From 5af8f74b5e94801248da7422f41bdfd32745a9e9 Mon Sep 17 00:00:00 2001 From: nurdotnet <278048682+nurdotnet@users.noreply.github.com> Date: Tue, 21 Apr 2026 20:53:42 +0500 Subject: [PATCH] feat(web): rebrand to FOOD MARKET green (#00B207) per mobile app logo - Extract brand colors from food-market-app/.../AppIcon/appicon.svg (background #00B207, white FOOD, pale-green E8F5E9 MARKET) - Add @theme custom colors in index.css: --color-brand #00B207, --color-brand-hover #009305, --color-brand-dark #007605, --color-brand-light #E8F5E9, --color-brand-tint #D7F2D9, --color-brand-foreground #FFFFFF - Replace all violet-* Tailwind classes with var(--color-brand*) in: LoginPage, Button, Field (input+checkbox), SearchBar, AppLayout (nav active state) - New Logo component: FM square badge + "FOOD" + "MARKET" typography in brand colors - Put Logo in sidebar header and on LoginPage - Replace Vite default favicon with branded SVG (green square + FOOD MARKET) - Page title "FOOD MARKET", theme-color meta tag for mobile browsers Co-Authored-By: Claude Opus 4.7 (1M context) --- src/food-market.web/index.html | 3 ++- src/food-market.web/public/favicon.svg | 8 +++++- src/food-market.web/public/logo-bg.svg | 4 +++ src/food-market.web/public/logo-fg.svg | 7 ++++++ .../src/components/AppLayout.tsx | 5 ++-- src/food-market.web/src/components/Button.tsx | 2 +- src/food-market.web/src/components/Field.tsx | 4 +-- src/food-market.web/src/components/Logo.tsx | 25 +++++++++++++++++++ .../src/components/SearchBar.tsx | 2 +- src/food-market.web/src/index.css | 8 ++++-- src/food-market.web/src/pages/LoginPage.tsx | 13 +++++----- 11 files changed, 65 insertions(+), 16 deletions(-) create mode 100644 src/food-market.web/public/logo-bg.svg create mode 100644 src/food-market.web/public/logo-fg.svg create mode 100644 src/food-market.web/src/components/Logo.tsx diff --git a/src/food-market.web/index.html b/src/food-market.web/index.html index b4bf26d..4ce4b2c 100644 --- a/src/food-market.web/index.html +++ b/src/food-market.web/index.html @@ -4,7 +4,8 @@ - food-market.web + FOOD MARKET +
diff --git a/src/food-market.web/public/favicon.svg b/src/food-market.web/public/favicon.svg index 6893eb1..a8aa23a 100644 --- a/src/food-market.web/public/favicon.svg +++ b/src/food-market.web/public/favicon.svg @@ -1 +1,7 @@ - \ No newline at end of file + + + + FOOD + MARKET + + diff --git a/src/food-market.web/public/logo-bg.svg b/src/food-market.web/public/logo-bg.svg new file mode 100644 index 0000000..ebeba8d --- /dev/null +++ b/src/food-market.web/public/logo-bg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/food-market.web/public/logo-fg.svg b/src/food-market.web/public/logo-fg.svg new file mode 100644 index 0000000..8691ac6 --- /dev/null +++ b/src/food-market.web/public/logo-fg.svg @@ -0,0 +1,7 @@ + + + + FOOD + MARKET + + diff --git a/src/food-market.web/src/components/AppLayout.tsx b/src/food-market.web/src/components/AppLayout.tsx index 410e794..165990c 100644 --- a/src/food-market.web/src/components/AppLayout.tsx +++ b/src/food-market.web/src/components/AppLayout.tsx @@ -7,6 +7,7 @@ import { LayoutDashboard, Package, FolderTree, Ruler, Percent, Tag, Users, Warehouse, Store as StoreIcon, Globe, Coins, LogOut, } from 'lucide-react' +import { Logo } from './Logo' interface MeResponse { sub: string @@ -51,7 +52,7 @@ export function AppLayout() {
) diff --git a/src/food-market.web/src/index.css b/src/food-market.web/src/index.css index 98189e6..e9ee335 100644 --- a/src/food-market.web/src/index.css +++ b/src/food-market.web/src/index.css @@ -1,8 +1,12 @@ @import "tailwindcss"; @theme { - --color-brand: #6d28d9; - --color-brand-foreground: #ffffff; + --color-brand: #00B207; + --color-brand-hover: #009305; + --color-brand-dark: #007605; + --color-brand-light: #E8F5E9; + --color-brand-tint: #D7F2D9; + --color-brand-foreground: #FFFFFF; } :root { diff --git a/src/food-market.web/src/pages/LoginPage.tsx b/src/food-market.web/src/pages/LoginPage.tsx index d9c8b49..7368353 100644 --- a/src/food-market.web/src/pages/LoginPage.tsx +++ b/src/food-market.web/src/pages/LoginPage.tsx @@ -1,6 +1,7 @@ import { useState, type FormEvent } from 'react' import { useNavigate, useLocation } from 'react-router-dom' import { login } from '@/lib/auth' +import { Logo } from '@/components/Logo' export function LoginPage() { const navigate = useNavigate() @@ -32,9 +33,9 @@ export function LoginPage() { onSubmit={handleSubmit} className="w-full max-w-md bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 space-y-5" > -
-

food-market

-

Вход в систему

+
+ +

Вход в систему

@@ -56,7 +57,7 @@ export function LoginPage() { autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} - className="w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500" + className="w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)]" required /> @@ -70,7 +71,7 @@ export function LoginPage() {