Seazn/profit-planet-frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update text colors for improved accessibility and consistency across login and registration forms

Browse Source
This commit is contained in:
seaznCode 2025-10-14 19:01:03 +02:00
parent 68a9eef41a
commit 94bc1e9219
4 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/login/components/LoginForm.tsx
View File

@ -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,
}}

4
src/app/login/page.tsx
View File

@ -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>

50
src/app/register/components/RegisterForm.tsx
View File

@ -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"

4
src/app/register/page.tsx
View File

@ -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>
)}