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>