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

client/src/pages/RegisterPage.tsx

@@ -33,60 +33,101 @@ export default function RegisterPage() {
   };
 
   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="Имя пользователя"
-            minLength={3}
-            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="Пароль"
-            minLength={4}
-            required
-            className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
-          />
-          <Input
-            type="password"
-            value={confirm}
-            onChange={(e) => setConfirm(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"
+              minLength={3}
+              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="Минимум 4 символа"
+              minLength={4}
+              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>
+          <div className="space-y-1">
+            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+              Подтвердите пароль
+            </label>
+            <Input
+              type="password"
+              value={confirm}
+              onChange={(e) => setConfirm(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="/login" className="font-medium text-[#2aabee] hover:underline">
+          <Link to="/login" className="link-blue">
             Войти
           </Link>
         </p>
       </div>
     </div>
   );
-}
+}