fix: themes and layout

2026-04-04 00:01:01 +03:00
parent 88fb7a1888
commit 8cf0837f97
8 changed files with 665 additions and 149 deletions
@@ -13,7 +13,7 @@ export const AuthPage: React.FC = () => {

  useEffect(() => {
    if (token) {
-      navigate("/dashboard");
+      navigate("/");
    }
  }, [token, navigate]);

@@ -21,7 +21,7 @@ export const AuthPage: React.FC = () => {
    e.preventDefault();
    try {
      await login(formData);
-      navigate("/dashboard");
+      navigate("/");
    } catch (err) {
      // Error is handled by store
    }
@@ -36,23 +36,49 @@ export const AuthPage: React.FC = () => {
  };

  return (
-    <div className="pt-[25%] flex items-center justify-center bg-white dark:bg-black transition-colors duration-200">
-      <div className="w-full max-w-md px-8">
+    <div
+      className="min-h-screen flex items-center justify-center p-4"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="w-full max-w-md">
        {/* Card */}
-        <div className="bg-gray-50 dark:bg-gray-900 rounded-lg shadow-xl p-8 border border-gray-200 dark:border-gray-800">
+        <div
+          className="rounded-2xl shadow-2xl p-8 border"
+          style={{
+            backgroundColor: "var(--card-bg)",
+            borderColor: "var(--border)",
+            boxShadow: "0 20px 60px var(--shadow-color)",
+          }}
+        >
          {/* Header */}
          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Welcome Back
+            <div
+              className="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
+              style={{ backgroundColor: "var(--bg-secondary)" }}
+            >
+              <FiUser className="w-8 h-8" style={{ color: "var(--accent)" }} />
+            </div>
+            <h1
+              className="text-3xl font-bold mb-2"
+              style={{ color: "var(--text-primary)" }}
+            >
+              С возвращением!
            </h1>
-            <p className="text-gray-600 dark:text-gray-400">
-              Sign in to your account
+            <p style={{ color: "var(--text-secondary)" }}>
+              Войдите в свой аккаунт
            </p>
          </div>

          {/* Error Message */}
          {error && (
-            <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-800 rounded text-red-700 dark:text-red-400 text-sm">
+            <div
+              className="mb-6 p-4 rounded-lg border text-sm"
+              style={{
+                backgroundColor: "var(--error-bg)",
+                borderColor: "var(--error-border)",
+                color: "var(--error-text)",
+              }}
+            >
              {error}
            </div>
          )}
@@ -60,37 +86,75 @@ export const AuthPage: React.FC = () => {
          {/* Form */}
          <form onSubmit={handleSubmit} className="space-y-5">
            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Login
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Логин
              </label>
              <div className="relative">
-                <FiUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiUser
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                <input
                  type="text"
                  name="login"
                  value={formData.login}
                  onChange={handleChange}
                  required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Enter your login"
+                  className="w-full pl-10 pr-3 py-2.5 rounded-lg border focus:outline-none focus:ring-2 transition-all"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Введите ваш логин"
                />
              </div>
            </div>

            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Password
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Пароль
              </label>
              <div className="relative">
-                <FiLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiLock
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                <input
                  type="password"
                  name="password"
                  value={formData.password}
                  onChange={handleChange}
                  required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Enter your password"
+                  className="w-full pl-10 pr-3 py-2.5 rounded-lg border focus:outline-none focus:ring-2 transition-all"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Введите ваш пароль"
                />
              </div>
            </div>
@@ -98,14 +162,29 @@ export const AuthPage: React.FC = () => {
            <button
              type="submit"
              disabled={isLoading}
-              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              style={{
+                backgroundColor: "var(--button-primary)",
+                color: "var(--button-primary-text)",
+              }}
+              onMouseEnter={(e) => {
+                if (!isLoading) {
+                  e.currentTarget.style.backgroundColor = "var(--button-primary-hover)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--button-primary)";
+              }}
            >
              {isLoading ? (
-                "Signing in..."
+                <>
+                  <div className="w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                  Вход...
+                </>
              ) : (
                <>
                  <FiLogIn />
-                  Sign In
+                  Войти
                </>
              )}
            </button>
@@ -113,13 +192,20 @@ export const AuthPage: React.FC = () => {

          {/* Footer */}
          <div className="mt-6 text-center">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Don't have an account?{" "}
+            <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+              Нет аккаунта?{" "}
              <Link
                to="/register"
-                className="text-gray-900 dark:text-white hover:underline font-medium"
+                className="font-medium hover:underline transition-colors"
+                style={{ color: "var(--link)" }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = "var(--link-hover)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = "var(--link)";
+                }}
              >
-                Sign up
+                Зарегистрироваться
              </Link>
            </p>
          </div>
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
-import { FiUser, FiLock, FiUserPlus, FiMail } from "react-icons/fi";
+import { FiUser, FiLock, FiUserPlus } from "react-icons/fi";
 import { useAuthStore } from "@/modules/auth/store/useAuthStore";

 export const RegisterPage: React.FC = () => {
@@ -17,7 +17,7 @@ export const RegisterPage: React.FC = () => {

  useEffect(() => {
    if (token) {
-      navigate("/dashboard");
+      navigate("/");
    }
  }, [token, navigate]);

@@ -25,7 +25,7 @@ export const RegisterPage: React.FC = () => {
    e.preventDefault();

    if (formData.password !== formData.confirmPassword) {
-      setPasswordError("Passwords do not match");
+      setPasswordError("Пароли не совпадают");
      return;
    }

@@ -38,7 +38,7 @@ export const RegisterPage: React.FC = () => {
        firstName: formData.firstName,
        lastName: formData.lastName,
      });
-      navigate("/dashboard");
+      navigate("/");
    } catch (err) {
      // Error is handled by store
    }
@@ -53,34 +53,72 @@ export const RegisterPage: React.FC = () => {
    if (passwordError) setPasswordError(null);
  };

+  const inputStyles = `
+    w-full pl-10 pr-3 py-2.5 rounded-lg border focus:outline-none focus:ring-2 transition-all
+  `;
+
+  const simpleInputStyles = `
+    w-full px-3 py-2.5 rounded-lg border focus:outline-none focus:ring-2 transition-all
+  `;
+
  return (
-    <div className="min-h-screen flex items-center justify-center bg-white dark:bg-black transition-colors duration-200">
-      <div className="w-full max-w-md px-8">
+    <div
+      className="min-h-screen flex items-center justify-center p-4"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="w-full max-w-md">
        {/* Card */}
-        <div className="bg-gray-50 dark:bg-gray-900 rounded-lg shadow-xl p-8 border border-gray-200 dark:border-gray-800">
+        <div
+          className="rounded-2xl shadow-2xl p-8 border"
+          style={{
+            backgroundColor: "var(--card-bg)",
+            borderColor: "var(--border)",
+            boxShadow: "0 20px 60px var(--shadow-color)",
+          }}
+        >
          {/* Header */}
          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Create Account
+            <div
+              className="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
+              style={{ backgroundColor: "var(--bg-secondary)" }}
+            >
+              <FiUserPlus className="w-8 h-8" style={{ color: "var(--accent)" }} />
+            </div>
+            <h1
+              className="text-3xl font-bold mb-2"
+              style={{ color: "var(--text-primary)" }}
+            >
+              Создать аккаунт
            </h1>
-            <p className="text-gray-600 dark:text-gray-400">
-              Sign up to get started
+            <p style={{ color: "var(--text-secondary)" }}>
+              Зарегистрируйтесь, чтобы начать
            </p>
          </div>

          {/* Error Message */}
          {error && (
-            <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-800 rounded text-red-700 dark:text-red-400 text-sm">
+            <div
+              className="mb-6 p-4 rounded-lg border text-sm"
+              style={{
+                backgroundColor: "var(--error-bg)",
+                borderColor: "var(--error-border)",
+                color: "var(--error-text)",
+              }}
+            >
              {error}
            </div>
          )}

          {/* Form */}
          <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Name Fields */}
            <div className="grid grid-cols-2 gap-4">
              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  First Name
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Имя
                </label>
                <input
                  type="text"
@@ -88,14 +126,30 @@ export const RegisterPage: React.FC = () => {
                  value={formData.firstName}
                  onChange={handleChange}
                  required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="John"
+                  className={simpleInputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Иван"
                />
              </div>

              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Last Name
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Фамилия
                </label>
                <input
                  type="text"
@@ -103,66 +157,145 @@ export const RegisterPage: React.FC = () => {
                  value={formData.lastName}
                  onChange={handleChange}
                  required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Doe"
+                  className={simpleInputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Иванов"
                />
              </div>
            </div>

+            {/* Login */}
            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Login
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Логин
              </label>
              <div className="relative">
-                <FiUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiUser
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                <input
                  type="text"
                  name="login"
                  value={formData.login}
                  onChange={handleChange}
                  required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Choose a login"
+                  className={inputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Придумайте логин"
                />
              </div>
            </div>

+            {/* Password */}
            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Password
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Пароль
              </label>
              <div className="relative">
-                <FiLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiLock
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                <input
                  type="password"
                  name="password"
                  value={formData.password}
                  onChange={handleChange}
                  required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Create a password"
+                  className={inputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Придумайте пароль"
                />
              </div>
            </div>

+            {/* Confirm Password */}
            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Confirm Password
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Подтвердите пароль
              </label>
              <div className="relative">
-                <FiLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiLock
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                <input
                  type="password"
                  name="confirmPassword"
                  value={formData.confirmPassword}
                  onChange={handleChange}
                  required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Confirm your password"
+                  className={inputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Повторите пароль"
                />
              </div>
              {passwordError && (
-                <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+                <p
+                  className="mt-2 text-sm flex items-center gap-1"
+                  style={{ color: "var(--error-text)" }}
+                >
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                  </svg>
                  {passwordError}
                </p>
              )}
@@ -171,14 +304,29 @@ export const RegisterPage: React.FC = () => {
            <button
              type="submit"
              disabled={isLoading}
-              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              style={{
+                backgroundColor: "var(--button-primary)",
+                color: "var(--button-primary-text)",
+              }}
+              onMouseEnter={(e) => {
+                if (!isLoading) {
+                  e.currentTarget.style.backgroundColor = "var(--button-primary-hover)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--button-primary)";
+              }}
            >
              {isLoading ? (
-                "Creating account..."
+                <>
+                  <div className="w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                  Регистрация...
+                </>
              ) : (
                <>
                  <FiUserPlus />
-                  Sign Up
+                  Зарегистрироваться
                </>
              )}
            </button>
@@ -186,13 +334,20 @@ export const RegisterPage: React.FC = () => {

          {/* Footer */}
          <div className="mt-6 text-center">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Already have an account?{" "}
+            <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+              Уже есть аккаунт?{" "}
              <Link
                to="/auth"
-                className="text-gray-900 dark:text-white hover:underline font-medium"
+                className="font-medium hover:underline transition-colors"
+                style={{ color: "var(--link)" }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = "var(--link-hover)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = "var(--link)";
+                }}
              >
-                Sign in
+                Войти
              </Link>
            </p>
          </div>