UI: полноценный красивый интерфейс, iOS-style дизайн, все страницы

client/src/pages/LoginPage.tsx

@@ -26,50 +26,86 @@ export default function LoginPage() {
   };
 
   return (
-    <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-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
-            <Cat className="h-7 w-7 text-white" />
+    <div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
+      <div className="w-full max-w-sm animate-fade-in-up">
+        <div className="text-center mb-10">
+          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full"
+            style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
+            <Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
           </div>
-          <h1 className="text-[24px] font-bold">Catstagram</h1>
-          <p className="text-[14px] text-[#8e8e93] mt-1">Войдите, чтобы смотреть котов</p>
+          <h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
+          <p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
+            Войдите, чтобы смотреть котов
+          </p>
         </div>
 
-        <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>}
+        <form onSubmit={handleSubmit} className="space-y-3.5">
+          <div className="space-y-1">
+            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+              Имя пользователя
+            </label>
+            <Input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="your_cat_lover"
+              required
+              autoFocus
+              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+              Пароль
+            </label>
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
+              <span>⚠</span>
+              <span>{error}</span>
+            </div>
+          )}
+
           <Button
             type="submit"
-            className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
             disabled={loading}
+            className="w-full h-12 rounded-xl text-[15px] font-semibold bg-[var(--primary)] hover:bg-[var(--primary-hover)] disabled:opacity-60 transition-all"
           >
-            {loading ? 'Вход...' : 'Войти'}
+            {loading ? (
+              <span className="flex items-center gap-2">
+                <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
+                Вход...
+              </span>
+            ) : 'Войти'}
           </Button>
+        </form>
+
+        <div className="relative my-8">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-[var(--border)]"></div>
+          </div>
+          <div className="relative flex justify-center">
+            <span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
+              или
+            </span>
+          </div>
         </div>
 
-        <p className="mt-6 text-center text-[14px] text-[#8e8e93]">
+        <p className="text-center text-[14px] text-[var(--foreground-secondary)]">
           Нет аккаунта?{' '}
-          <Link to="/register" className="font-medium text-[#2aabee] hover:underline">
+          <Link to="/register" className="link-blue">
             Зарегистрироваться
           </Link>
         </p>
       </div>
     </div>
   );
-}
+}