UI: Telegram-стиль, синий акцент, bubble-карточки

client/src/pages/LoginPage.tsx

@@ -22,63 +22,53 @@ export default function LoginPage() {
       await login(username, password);
     } catch (err: any) {
       setError(err.response?.data?.error || 'Ошибка входа');
-    } finally {
-      setLoading(false);
-    }
+    } finally { setLoading(false); }
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-orange-50 via-amber-50 to-rose-50 p-4">
+    <div className="flex min-h-screen items-center justify-center p-4 bg-[#f5f5f5]">
       <div className="w-full max-w-sm animate-fade-in">
         <div className="text-center mb-8">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-lg shadow-orange-200/50">
-            <Cat className="h-8 w-8 text-white" />
+          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
+            <Cat className="h-7 w-7 text-white" />
           </div>
-          <h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent">
-            Catstagram
-          </h1>
-          <p className="mt-1.5 text-sm text-muted-foreground">Войдите, чтобы смотреть котов</p>
+          <h1 className="text-[24px] font-bold">Catstagram</h1>
+          <p className="text-[14px] text-[#8e8e93] mt-1">Войдите, чтобы смотреть котов</p>
         </div>
 
-        <div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
-          <form onSubmit={handleSubmit} className="space-y-3.5">
-            <Input
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              placeholder="Имя пользователя"
-              required
-              autoFocus
-              className="h-11 text-sm rounded-xl bg-secondary/50"
-            />
-            <Input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Пароль"
-              required
-              className="h-11 text-sm rounded-xl bg-secondary/50"
-            />
-            {error && (
-              <p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
-            )}
-            <Button
-              type="submit"
-              className="w-full h-11 rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
-              disabled={loading}
-            >
-              {loading ? 'Вход...' : 'Войти'}
-            </Button>
-          </form>
+        <div className="space-y-3">
+          <Input
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="Имя пользователя"
+            required
+            autoFocus
+            className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
+          />
+          <Input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Пароль"
+            required
+            className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
+          />
+          {error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
+          <Button
+            type="submit"
+            className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
+            disabled={loading}
+          >
+            {loading ? 'Вход...' : 'Войти'}
+          </Button>
         </div>
 
-        <div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
-          <p className="text-sm text-muted-foreground">
-            Нет аккаунта?{' '}
-            <Link to="/register" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
-              Зарегистрироваться
-            </Link>
-          </p>
-        </div>
+        <p className="mt-6 text-center text-[14px] text-[#8e8e93]">
+          Нет аккаунта?{' '}
+          <Link to="/register" className="font-medium text-[#2aabee] hover:underline">
+            Зарегистрироваться
+          </Link>
+        </p>
       </div>
     </div>
   );