Login and UI Changes updated

2026-06-24 09:02:19 +05:30
parent c3bb004dc6
commit d325a704cf
14 changed files with 222 additions and 72 deletions
--- a/frontend/src/assets/RIT_Logo.png
+++ b/frontend/src/assets/RIT_Logo.png
--- a/frontend/src/assets/food-court-pos.png
+++ b/frontend/src/assets/food-court-pos.png
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -194,8 +194,11 @@ const Sidebar = () => {
  return (
    <div className="w-64 bg-white h-screen border-r border-[#e2e8f0] flex flex-col fixed left-0 top-0 z-50 shadow-sm overflow-hidden font-inter">
      {/* Branding Section */}
-      <div className="px-5 pt-8 pb-4 flex justify-center items-center w-full">
+      <div className="px-5 pt-8 pb-4 flex flex-col justify-center items-center w-full">
        <img src={collegeLogo} alt="Branding" className="h-14 w-auto object-contain brightness-[1.05]" />
+        <span className="text-[10px] font-semibold text-slate-400 mt-1 italic tracking-wide font-sans">
+          Till yo tummy is full...
+        </span>
      </div>
      {/* Premium Search Integration (Modern Dashboards usually have this) */}
      <div className="px-3 mb-4">
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -13,7 +13,8 @@ import { useNavigate } from 'react-router-dom';

 // Import Assets
 import collegeLogo from '../assets/college-logo.png';
-import buildingPhoto from '../assets/ritchennai.webp';
+import foodCourtPosBg from '../assets/food-court-pos.png';
+import ritLogo from '../assets/RIT_Logo.png';

 const Login = () => {
  const [role, setRole] = useState<'manager' | 'master'>('manager');
@@ -68,55 +69,69 @@ const Login = () => {
  };

  return (
-    <div className="min-h-screen bg-[#f8fafc] flex flex-col md:flex-row overflow-hidden font-inter">
-      {/* Left Section: Login Form */}
-      <div className="w-full md:w-[45%] lg:w-[40%] flex flex-col p-8 md:p-12 lg:p-16 relative z-10 bg-white shadow-2xl">
-        {/* Top Logo */}
+    <div
+      className="min-h-screen flex flex-col gap-6 items-center justify-center p-4 md:p-8 bg-cover bg-center bg-no-repeat relative font-inter overflow-hidden"
+      style={{ backgroundImage: `url(${foodCourtPosBg})` }}
+    >
+      {/* Subtle light overlay to match the clean aesthetic and improve card contrast */}
+      <div className="absolute inset-0 bg-white/20 backdrop-blur-[1px] z-0"></div>
+
+      {/* Login Card */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95, y: 20 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+        className="w-full max-w-md bg-white/90 backdrop-blur-md border border-white/20 rounded-3xl p-6 md:p-10 shadow-2xl flex flex-col relative z-10"
+      >
+        {/* Top Logo - Centered */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
-          className="mb-16"
+          transition={{ delay: 0.2 }}
+          className="flex flex-col items-center justify-center mb-8"
        >
-          <img src={collegeLogo} alt="College Logo" className="h-16 md:h-20 object-contain" />
+          <img src={collegeLogo} alt="College Logo" className="h-16 md:h-20 object-contain filter drop-shadow-sm" />
+          <span className="text-xs font-semibold text-[#001828]/60 mt-2.5 italic tracking-wide font-sans">
+            Till yo tummy is full...
+          </span>
        </motion.div>

        {/* Login Container */}
-        <motion.div
-          initial={{ opacity: 0, x: -30 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ delay: 0.2 }}
-          className="flex-1 flex flex-col justify-center max-w-sm mx-auto w-full"
-        >
-          <div className="text-center mb-10">
-            <h2 className="text-[10px] font-black tracking-[0.3em] text-[#1e293b] uppercase mb-2">
+        <div className="w-full">
+          <div className="text-center mb-8">
+            <h2 className="text-xs font-black tracking-[0.2em] text-[#001828] uppercase mb-2">
              Canteen Management System
            </h2>
            <div className="w-12 h-1 bg-[#001828] mx-auto rounded-full"></div>
          </div>

          {/* Role Toggle */}
-          <div className="bg-[#f1f5f9] p-1.5 rounded-2xl flex gap-1 mb-8 relative">
+          <div className="bg-slate-100/80 p-1 rounded-2xl flex gap-1 mb-6 relative">
            <motion.div
-              className="absolute h-[calc(100%-12px)] top-1.5 bg-white rounded-xl shadow-sm z-0"
+              className="absolute h-[calc(100%-8px)] top-1 bg-white rounded-xl shadow-sm z-0"
              initial={false}
              animate={{
-                left: role === 'manager' ? '6px' : '50%',
-                width: 'calc(50% - 9px)'
+                left: role === 'manager' ? '4px' : '50%',
+                width: 'calc(50% - 6px)'
              }}
              transition={{ type: "spring", stiffness: 300, damping: 30 }}
            />
            <button
              onClick={() => setRole('manager')}
-              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-xs font-bold transition-all relative z-10 ${role === 'manager' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
-                }`}
+              type="button"
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-xs font-bold transition-all relative z-10 ${
+                role === 'manager' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
+              }`}
            >
              <UserCircle2 size={16} />
              MANAGER
            </button>
            <button
              onClick={() => setRole('master')}
-              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-xs font-bold transition-all relative z-10 ${role === 'master' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
-                }`}
+              type="button"
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-xs font-bold transition-all relative z-10 ${
+                role === 'master' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
+              }`}
            >
              <ShieldCheck size={16} />
              MASTER
@@ -124,9 +139,9 @@ const Login = () => {
          </div>

          {/* Form */}
-          <form onSubmit={handleLogin} className="space-y-6">
-            <div className="space-y-2">
-              <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest pl-1">
+          <form onSubmit={handleLogin} className="space-y-5">
+            <div className="space-y-1.5">
+              <label className="text-[10px] font-black text-[#64748b] uppercase tracking-widest pl-1">
                Secure User ID
              </label>
              <div className="relative group">
@@ -138,14 +153,14 @@ const Login = () => {
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  placeholder="Username"
-                  className="w-full bg-white border-2 border-[#e2e8f0] focus:border-[#001828] rounded-2xl py-4 pl-12 pr-4 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
+                  className="w-full bg-white/85 border-2 border-slate-200 focus:border-[#001828] focus:bg-white rounded-2xl py-3.5 pl-12 pr-4 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
                />
              </div>
            </div>

-            <div className="space-y-2">
+            <div className="space-y-1.5">
              <div className="flex justify-between items-center pl-1">
-                <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest">
+                <label className="text-[10px] font-black text-[#64748b] uppercase tracking-widest">
                  Passcode
                </label>
                <button type="button" className="text-[10px] font-black text-[#001828] uppercase hover:underline">
@@ -161,7 +176,7 @@ const Login = () => {
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
-                  className="w-full bg-white border-2 border-[#e2e8f0] focus:border-[#001828] rounded-2xl py-4 pl-12 pr-12 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
+                  className="w-full bg-white/85 border-2 border-slate-200 focus:border-[#001828] focus:bg-white rounded-2xl py-3.5 pl-12 pr-12 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
                />
                <button
                  type="button"
@@ -175,7 +190,7 @@ const Login = () => {

            <button
              type="submit"
-              className="w-full bg-[#001828] text-white rounded-2xl py-4 font-black text-sm flex items-center justify-center gap-3 shadow-xl shadow-[#001828]/20 hover:scale-[1.02] active:scale-[0.98] transition-all overflow-hidden group relative"
+              className="w-full bg-[#001828] text-white rounded-2xl py-3.5 font-black text-sm flex items-center justify-center gap-3 shadow-xl shadow-[#001828]/20 hover:scale-[1.02] active:scale-[0.98] transition-all overflow-hidden group relative mt-2"
            >
              <span className="relative z-10">CONNECT TO PORTAL</span>
              <ArrowRight size={18} className="relative z-10 group-hover:translate-x-1 transition-transform" />
@@ -187,42 +202,29 @@ const Login = () => {
              />
            </button>
          </form>
-        </motion.div>
+        </div>

        {/* Footer */}
-        <div className="mt-auto text-center">
-          <p className="text-[10px] font-black text-[#cbd5e1] uppercase tracking-[0.2em]">
+        <div className="mt-8 text-center">
+          <p className="text-[10px] font-black text-[#94a3b8] uppercase tracking-[0.2em]">
            © 2026 TILLO • SYSTEM PORTAL
          </p>
        </div>
-      </div>
+      </motion.div>

-      {/* Right Section: Visual */}
-      <div className="hidden md:flex flex-1 relative bg-[#f8fafc] items-center justify-center p-8 overflow-hidden">
-
-        {/* Decorative Circles */}
-        <div className="absolute top-20 right-20 w-64 h-64 bg-[#001828]/5 rounded-full blur-3xl"></div>
-        <div className="absolute bottom-20 left-40 w-96 h-96 bg-[#001828]/5 rounded-full blur-3xl"></div>
-
-        {/* Image Container with Custom Shape (using clip-path or rounded corners) */}
-        <motion.div
-          initial={{ opacity: 0, scale: 0.95, x: 50 }}
-          animate={{ opacity: 1, scale: 1, x: 0 }}
-          transition={{ duration: 0.8 }}
-          className="w-full h-full relative z-10"
-        >
-          <div className="w-full h-full overflow-hidden shadow-2xl border-[12px] border-white bg-white">
-            <img
-              src={buildingPhoto}
-              alt="Tillo Building"
-              className="w-full h-full object-cover"
-            />
-            {/* Overlay Gradient */}
-            <div className="absolute inset-0 bg-gradient-to-tr from-[#001828]/20 to-transparent"></div>
-          </div>
-
-        </motion.div>
-      </div>
+      {/* Merchant Section Card */}
+      <motion.div
+        initial={{ opacity: 0, y: 15 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 0.3 }}
+        className="w-full max-w-md bg-white/80 backdrop-blur-md border border-white/20 rounded-2xl p-4 shadow-lg flex items-center justify-between gap-4 relative z-10"
+      >
+        <div className="flex flex-col">
+          <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Merchant Partner</span>
+          <span className="text-xs font-bold text-[#001828] mt-0.5">Rajalakshmi Institute of Technology</span>
+        </div>
+        <img src={ritLogo} alt="RIT Logo" className="h-12 w-auto object-contain filter drop-shadow-sm" />
+      </motion.div>
    </div>
  );
 };