From 94bc1e9219f3b79213d5a9fc882c14e9fe7ac1e7 Mon Sep 17 00:00:00 2001
From: seaznCode <alexander.atmn@gmail.com>
Date: Tue, 14 Oct 2025 19:01:03 +0200
Subject: [PATCH] feat: Update text colors for improved accessibility and
 consistency across login and registration forms

---
 src/app/login/components/LoginForm.tsx       | 14 +++---
 src/app/login/page.tsx                       |  4 +-
 src/app/register/components/RegisterForm.tsx | 50 ++++++++++----------
 src/app/register/page.tsx                    |  4 +-
 4 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/app/login/components/LoginForm.tsx b/src/app/login/components/LoginForm.tsx
index 303e5e5..b6a8f1a 100644
--- a/src/app/login/components/LoginForm.tsx
+++ b/src/app/login/components/LoginForm.tsx
@@ -248,7 +248,7 @@ export default function LoginForm() {
                 autoComplete="email"
                 value={formData.email}
                 onChange={handleInputChange}
-                className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
+                className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
                 style={{
                   fontSize: isMobile ? '0.875rem' : undefined,
                   padding: isMobile ? '0.4rem 0.75rem' : undefined,
@@ -278,7 +278,7 @@ export default function LoginForm() {
                   autoComplete="current-password"
                   value={formData.password}
                   onChange={handleInputChange}
-                  className="appearance-none block w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
+                  className="appearance-none block w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
                   style={{
                     fontSize: isMobile ? '0.875rem' : undefined,
                     padding: isMobile ? '0.4rem 2.5rem 0.4rem 0.75rem' : '0.75rem 3rem 0.75rem 1rem',
@@ -292,9 +292,9 @@ export default function LoginForm() {
                   className="absolute inset-y-0 right-0 pr-3 flex items-center"
                 >
                   {showPassword ? (
-                    <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-[#8D6B1D] transition-colors" />
+                    <EyeSlashIcon className="h-5 w-5 text-slate-500 hover:text-[#8D6B1D] transition-colors" />
                   ) : (
-                    <EyeIcon className="h-5 w-5 text-gray-400 hover:text-[#8D6B1D] transition-colors" />
+                    <EyeIcon className="h-5 w-5 text-slate-500 hover:text-[#8D6B1D] transition-colors" />
                   )}
                 </button>
               </div>
@@ -310,7 +310,7 @@ export default function LoginForm() {
                     onChange={handleInputChange}
                     className="h-4 w-4 text-[#8D6B1D] border-2 border-gray-300 rounded focus:ring-[#8D6B1D] focus:ring-2"
                   />
-                  <label htmlFor="rememberMe" className="ml-2 text-sm text-[#4A4A4A]">
+                  <label htmlFor="rememberMe" className="ml-2 text-sm text-slate-700">
                     Angemeldet bleiben
                   </label>
                 </div>
@@ -322,7 +322,7 @@ export default function LoginForm() {
                     checked={showPassword}
                     onChange={(e) => setShowPassword(e.target.checked)}
                   />
-                  <label htmlFor="show-password" className="ml-2 text-sm text-[#4A4A4A]">
+                  <label htmlFor="show-password" className="ml-2 text-sm text-slate-700">
                     Passwort anzeigen
                   </label>
                 </div>
@@ -401,7 +401,7 @@ export default function LoginForm() {
               }}
             >
               <p
-                className="text-base text-[#4A4A4A]"
+                className="text-base text-slate-700"
                 style={{
                   fontSize: isMobile ? '0.8rem' : undefined,
                 }}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 2ecb3fe..14418f7 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -34,7 +34,7 @@ export default function LoginPage() {
         <div className="min-h-screen flex items-center justify-center">
           <div className="text-center">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#8D6B1D] mx-auto mb-4"></div>
-            <p className="text-[#4A4A4A]">You are already logged in. Redirecting...</p>
+            <p className="text-slate-700">You are already logged in. Redirecting...</p>
           </div>
         </div>
       </PageLayout>
@@ -52,7 +52,7 @@ export default function LoginPage() {
         
         {/* Footer for mobile */}
         <div className="relative z-10 md:hidden">
-          <div className="text-center py-4 text-sm text-[#4A4A4A]">
+          <div className="text-center py-4 text-sm text-slate-700">
             © 2024 Profit Planet. Alle Rechte vorbehalten.
           </div>
         </div>
diff --git a/src/app/register/components/RegisterForm.tsx b/src/app/register/components/RegisterForm.tsx
index 758eb22..d16c2e6 100644
--- a/src/app/register/components/RegisterForm.tsx
+++ b/src/app/register/components/RegisterForm.tsx
@@ -240,10 +240,10 @@ export default function RegisterForm({
     
     return (
       <div className="mt-2">
-        <div className="text-sm text-[#4A4A4A] mb-2">Passwort-Anforderungen:</div>
+        <div className="text-sm text-slate-700 mb-2">Passwort-Anforderungen:</div>
         <ul className="text-sm space-y-1">
-          {rules.map((rule, index) => (
-            <li key={index} className={`flex items-center gap-2 ${rule.test ? 'text-green-600' : 'text-gray-500'}`}>
+                {rules.map((rule, index) => (
+            <li key={index} className={`flex items-center gap-2 ${rule.test ? 'text-green-600' : 'text-slate-600'}`}>
               <span>{rule.test ? '✓' : '○'}</span>
               <span>{rule.text}</span>
             </li>
@@ -274,7 +274,7 @@ export default function RegisterForm({
             className={`px-6 py-2 rounded-md font-semibold text-sm transition-all duration-200 ${
               mode === 'personal'
                 ? 'bg-[#8D6B1D] text-white shadow-sm'
-                : 'bg-transparent text-[#4A4A4A] hover:text-[#8D6B1D]'
+                : 'bg-transparent text-slate-700 hover:text-[#8D6B1D]'
             }`}
             onClick={() => setMode('personal')}
             type="button"
@@ -285,7 +285,7 @@ export default function RegisterForm({
             className={`px-6 py-2 rounded-md font-semibold text-sm transition-all duration-200 ${
               mode === 'company'
                 ? 'bg-[#8D6B1D] text-white shadow-sm'
-                : 'bg-transparent text-[#4A4A4A] hover:text-[#8D6B1D]'
+                : 'bg-transparent text-slate-700 hover:text-[#8D6B1D]'
             }`}
             onClick={() => setMode('company')}
             type="button"
@@ -317,7 +317,7 @@ export default function RegisterForm({
                   name="firstName"
                   value={personalForm.firstName}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -332,7 +332,7 @@ export default function RegisterForm({
                   name="lastName"
                   value={personalForm.lastName}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -349,7 +349,7 @@ export default function RegisterForm({
                   name="email"
                   value={personalForm.email}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -364,7 +364,7 @@ export default function RegisterForm({
                   name="confirmEmail"
                   value={personalForm.confirmEmail}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -380,7 +380,7 @@ export default function RegisterForm({
                 name="phoneNumber"
                 value={personalForm.phoneNumber}
                 onChange={handlePersonalChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                 placeholder="+49 123 456 7890"
               />
             </div>
@@ -397,7 +397,7 @@ export default function RegisterForm({
                     name="password"
                     value={personalForm.password}
                     onChange={handlePersonalChange}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                     required
                   />
                   <button
@@ -406,9 +406,9 @@ export default function RegisterForm({
                     className="absolute inset-y-0 right-0 pr-3 flex items-center"
                   >
                     {showPersonalPassword ? (
-                      <EyeSlashIcon className="h-4 w-4 text-gray-400" />
+                      <EyeSlashIcon className="h-4 w-4 text-slate-600" />
                     ) : (
-                      <EyeIcon className="h-4 w-4 text-gray-400" />
+                      <EyeIcon className="h-4 w-4 text-slate-600" />
                     )}
                   </button>
                 </div>
@@ -425,7 +425,7 @@ export default function RegisterForm({
                   name="confirmPassword"
                   value={personalForm.confirmPassword}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -463,7 +463,7 @@ export default function RegisterForm({
                   name="companyName"
                   value={companyForm.companyName}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -478,7 +478,7 @@ export default function RegisterForm({
                   name="contactPersonName"
                   value={companyForm.contactPersonName}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -495,7 +495,7 @@ export default function RegisterForm({
                   name="companyEmail"
                   value={companyForm.companyEmail}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -510,7 +510,7 @@ export default function RegisterForm({
                   name="confirmCompanyEmail"
                   value={companyForm.confirmCompanyEmail}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -527,7 +527,7 @@ export default function RegisterForm({
                   name="companyPhone"
                   value={companyForm.companyPhone}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   placeholder="+49 123 456 7890"
                 />
               </div>
@@ -542,7 +542,7 @@ export default function RegisterForm({
                   name="contactPersonPhone"
                   value={companyForm.contactPersonPhone}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   placeholder="+49 123 456 7890"
                 />
               </div>
@@ -560,7 +560,7 @@ export default function RegisterForm({
                     name="password"
                     value={companyForm.password}
                     onChange={handleCompanyChange}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                     required
                   />
                   <button
@@ -569,9 +569,9 @@ export default function RegisterForm({
                     className="absolute inset-y-0 right-0 pr-3 flex items-center"
                   >
                     {showCompanyPassword ? (
-                      <EyeSlashIcon className="h-4 w-4 text-gray-400" />
+                      <EyeSlashIcon className="h-4 w-4 text-slate-600" />
                     ) : (
-                      <EyeIcon className="h-4 w-4 text-gray-400" />
+                      <EyeIcon className="h-4 w-4 text-slate-600" />
                     )}
                   </button>
                 </div>
@@ -588,7 +588,7 @@ export default function RegisterForm({
                   name="confirmPassword"
                   value={companyForm.confirmPassword}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -618,7 +618,7 @@ export default function RegisterForm({
       
       {/* Login Link */}
       <div className="mt-8 text-center">
-        <p className="text-[#4A4A4A]">
+        <p className="text-slate-700">
           Bereits registriert?{' '}
           <a 
             href="/login" 
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 3c53d74..3ede3f7 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -104,7 +104,7 @@ export default function RegisterPage() {
               <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-5xl">
                 Registriere dich jetzt
               </h1>
-              <p className="mt-2 text-lg/8 text-gray-300">
+              <p className="mt-2 text-lg/8 text-gray-200">
                 Erstelle dein persönliches oder Unternehmens-Konto bei Profit
                 Planet.
               </p>
@@ -132,7 +132,7 @@ export default function RegisterPage() {
                     />
                   )}
                   {registered && (
-                    <div className="mt-6 mx-auto text-center text-sm text-gray-300">
+                    <div className="mt-6 mx-auto text-center text-sm text-gray-200">
                       Registrierung erfolgreich – Weiterleitung...
                     </div>
                   )}