From f17ed17f878c51157d495e0c5c68a9bf7b505eb0 Mon Sep 17 00:00:00 2001
From: "vluk@2fi-solutions.com.hk" <vluk@2fi-solutions.com.hk>
Date: Mon, 23 Feb 2026 18:19:01 +0800
Subject: [PATCH] no message

---
 src/components/LoginPage/LoginPage.tsx |  5 +-
 src/components/Logo/Logo.tsx           | 79 +++++++++++++++++++-------
 2 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/src/components/LoginPage/LoginPage.tsx b/src/components/LoginPage/LoginPage.tsx
index 73f4c8a..5eb7c30 100644
--- a/src/components/LoginPage/LoginPage.tsx
+++ b/src/components/LoginPage/LoginPage.tsx
@@ -29,10 +29,11 @@ const LoginPage = () => {
             display: "flex",
             alignItems: "flex-end",
             justifyContent: "center",
-            svg: { maxHeight: 120 },
+            backgroundImage: "linear-gradient(135deg, rgba(59,130,246,0.15) 0%, #f1f5f9 45%, #f8fafc 100%)",
+            backgroundColor: "#f8fafc",
           }}
         >
-          <Logo />
+          <Logo height={42} />
         </Box>
         <Paper square sx={{ height: "100%" }}>
           <LoginForm />
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index 0bc601c..f8bc458 100644
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -6,14 +6,18 @@ interface Props {
   className?: string;
 }
 
+/** Same logo height everywhere so login and main page look identical. */
+const DEFAULT_LOGO_HEIGHT = 42;
+
 /**
- * Logo: 3D-style badge (FP) + FP-MTMS wordmark.
- * Badge uses gradient and highlight for depth; FP = Food Production, MTMS = system name.
+ * Logo: rounded badge (FP) with links motif inside + FP-MTMS wordmark.
+ * Uses fixed typography so words look the same on login and main page.
  */
-const Logo: React.FC<Props> = ({ height = 44, className = "" }) => {
+const Logo: React.FC<Props> = ({ height = DEFAULT_LOGO_HEIGHT, className = "" }) => {
   const size = Math.max(28, height);
   const badgeSize = Math.round(size * 0.7);
-  const fontSize = Math.round(size * 0.5);
+  const titleFontSize = 21;
+  const subtitleFontSize = 10;
   const fpSize = badgeSize <= 22 ? 10 : badgeSize <= 28 ? 12 : 14;
 
   return (
@@ -22,7 +26,7 @@ const Logo: React.FC<Props> = ({ height = 44, className = "" }) => {
       style={{ display: "flex", flexShrink: 0 }}
       aria-label="FP-MTMS"
     >
-      {/* 3D badge: FP with gradient, top bevel, and soft shadow */}
+      {/* Badge: rounded square with links motif inside + FP */}
       <svg
         width={badgeSize}
         height={badgeSize}
@@ -32,29 +36,38 @@ const Logo: React.FC<Props> = ({ height = 44, className = "" }) => {
         aria-hidden
       >
         <defs>
-          {/* Energetic blue gradient: bright top → deep blue bottom */}
           <linearGradient id="logo-bg" x1="0%" y1="0%" x2="0%" y2="100%">
             <stop offset="0%" stopColor="#60a5fa" />
             <stop offset="40%" stopColor="#3b82f6" />
             <stop offset="100%" stopColor="#1d4ed8" />
           </linearGradient>
           <linearGradient id="logo-bevel" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor="rgba(255,255,255,0.45)" />
+            <stop offset="0%" stopColor="rgba(255,255,255,0.4)" />
             <stop offset="100%" stopColor="rgba(255,255,255,0)" />
           </linearGradient>
           <filter id="logo-shadow" x="-15%" y="-5%" width="130%" height="120%">
             <feDropShadow dx="0" dy="2" stdDeviation="1.5" floodOpacity="0.35" floodColor="#1e40af" />
           </filter>
         </defs>
-        {/* Shadow layer - deep blue */}
-        <rect x="1" y="2" width="36" height="36" rx="8" fill="#1e40af" fillOpacity="0.4" />
-        {/* Main 3D body */}
-        <rect x="0" y="0" width="36" height="36" rx="8" fill="url(#logo-bg)" filter="url(#logo-shadow)" />
-        {/* Top bevel (inner 3D) */}
-        <rect x="2" y="2" width="32" height="12" rx="6" fill="url(#logo-bevel)" />
-        {/* FP text */}
+        {/* Shadow */}
+        <rect x="3" y="4" width="34" height="34" rx="8" fill="#1e40af" fillOpacity="0.35" />
+        {/* Body */}
+        <rect x="2" y="2" width="36" height="36" rx="8" fill="url(#logo-bg)" filter="url(#logo-shadow)" />
+        <rect x="2" y="2" width="36" height="12" rx="7" fill="url(#logo-bevel)" />
+        {/* Links motif inside: small chain links in corners, clear center for FP */}
+        <g fill="none" stroke="rgba(255,255,255,0.55)" strokeWidth="1.4" strokeLinecap="round">
+          <path d="M 8 10 a 3 3 0 1 1 0 4.5 a 3 3 0 1 1 0 -4.5" />
+          <path d="M 12 10 a 3 3 0 1 1 0 4.5 a 3 3 0 1 1 0 -4.5" />
+          <line x1="11" y1="12.2" x2="12" y2="12.2" />
+        </g>
+        <g fill="none" stroke="rgba(255,255,255,0.5)" strokeWidth="1.4" strokeLinecap="round">
+          <path d="M 28 28 a 3 3 0 1 1 0 4.5 a 3 3 0 1 1 0 -4.5" />
+          <path d="M 32 28 a 3 3 0 1 1 0 4.5 a 3 3 0 1 1 0 -4.5" />
+          <line x1="31" y1="30.2" x2="32" y2="30.2" />
+        </g>
+        {/* FP text – top-right so it doesn’t overlap the links */}
         <text
-          x="18"
+          x="20"
           y="24"
           textAnchor="middle"
           fill="#f8fafc"
@@ -68,17 +81,41 @@ const Logo: React.FC<Props> = ({ height = 44, className = "" }) => {
           FP
         </text>
       </svg>
-      {/* Wordmark: FP-MTMS + subtitle — strong, energetic */}
-      <div className="flex flex-col justify-center leading-tight">
+      {/* Wordmark: fixed typography so login and main page match */}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 4,
+          fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        }}
+      >
         <span
-          className="font-bold tracking-tight text-blue-700 dark:text-blue-200"
-          style={{ fontSize: `${fontSize}px`, letterSpacing: "0.03em" }}
+          style={{
+            display: "block",
+            whiteSpace: "nowrap",
+            fontSize: titleFontSize,
+            fontWeight: 700,
+            letterSpacing: "0.03em",
+            lineHeight: 1.25,
+            color: "#1e40af",
+          }}
+          className="dark:text-blue-200"
         >
           FP-MTMS
         </span>
         <span
-          className="text-[10px] font-semibold uppercase tracking-wider text-blue-600/90 dark:text-blue-300/90"
-          style={{ letterSpacing: "0.1em" }}
+          style={{
+            display: "block",
+            whiteSpace: "nowrap",
+            fontSize: subtitleFontSize,
+            fontWeight: 500,
+            letterSpacing: "0.12em",
+            lineHeight: 1.4,
+            textTransform: "uppercase",
+            color: "#2563eb",
+          }}
+          className="dark:text-blue-300"
         >
           Food Production
         </span>