Skip to content

Refactor: UI colors for consistency and accessibility #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dariemcarlosdev merged 1 commit into from
Jul 25, 2026
Merged

Refactor: UI colors for consistency and accessibility #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Features/Contact/Components/ContactForm.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<!-- Header Section -->
<div class="text-center mb-12">
<span class="inline-block px-4 py-1.5 bg-teal-cyan-aqua-50 text-teal-cyan-aqua-600 text-sm font-semibold rounded-full mb-4">
<i class="bi bi-envelope-paper mr-2"></i>Get In Touch
<i class="bi bi-envelope-paper mr-2"></i>pGet In Touch
</span>
<h2 class="text-4xl md:text-5xl font-bold text-gray-700 mb-4">
Let's Start a
Expand Down
6 changes: 3 additions & 3 deletions Features/Landing/Components/HeroWarmTealWash.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@* ══════════════════════════════════════════════════════════════
@* ══════════════════════════════════════════════════════════════
WarmTealWash Component — Hero section with white left side,
AI automation illustration on warm cream/beige right side.
Premium pass: staggered entrance choreography, gradient accent
Expand All @@ -19,7 +19,7 @@
@* Headline — single gradient accent line, no italic, tight rhythm *@
<h1 class="text-5xl sm:text-6xl lg:text-5xl xl:text-6xl leading-[1.05] mb-6 tracking-tight">
<span class="entrance entrance-2 block font-bold text-gray-900">Smart systems.</span>
<span class="entrance entrance-3 block font-bold bg-gradient-to-r from-teal-cyan-aqua-600 to-cloudzen-teal bg-clip-text text-transparent">Less busywork.</span>
<span class="entrance entrance-3 block font-bold text-teal-cyan-aqua-600">Less busywork.</span>

@coderabbitai coderabbitai Bot Jul 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Localize the touched user-facing strings.

These Razor segments bypass localization. Use @L["Key"] or the project’s established localized accessor and add the corresponding resource keys.

  • Features/Landing/Components/HeroWarmTealWash.razor#L22-L22: localize Less busywork.
  • Features/Landing/Components/Mission.razor#L22-L23: localize Smart Technology.
  • Features/Landing/Components/Mission.razor#L43-L45: localize empower businesses.
  • Features/Landing/Components/Services.razor#L22-L22: localize You Focus on Growing and Making Money.
  • Layout/Header.razor#L29-L29: localize Let's Talk.
  • Features/Contact/Components/ContactForm.razor#L9-L9: localize Get In Touch.
📍 Affects 5 files
  • Features/Landing/Components/HeroWarmTealWash.razor#L22-L22 (this comment)
  • Features/Landing/Components/Mission.razor#L22-L23
  • Features/Landing/Components/Mission.razor#L43-L45
  • Features/Landing/Components/Services.razor#L22-L22
  • Layout/Header.razor#L29-L29
  • Features/Contact/Components/ContactForm.razor#L9-L9
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@Features/Landing/Components/HeroWarmTealWash.razor` at line 22, Localize
every listed user-facing string using the established localized accessor and add
matching resource keys: Features/Landing/Components/HeroWarmTealWash.razor lines
22-22 (“Less busywork.”), Features/Landing/Components/Mission.razor lines 22-23
(“Smart Technology”) and 43-45 (“empower businesses”),
Features/Landing/Components/Services.razor lines 22-22 (“You Focus on Growing
and Making Money.”), Layout/Header.razor line 29 (“Let's Talk”), and
Features/Contact/Components/ContactForm.razor line 9 (“Get In Touch”).

Source: Coding guidelines

<span class="entrance entrance-4 block font-bold text-gray-900">More time for growing.</span>
</h1>

Expand Down Expand Up @@ -57,7 +57,7 @@
</div>

@* ── Right Side: AI illustration (md and up) ── *@
<div class="warm-panel w-full md:w-1/2 shrink-0 relative hidden md:flex items-center justify-center overflow-hidden bg-gradient-to-br from-teal-cyan-aqua-50 to-teal-cyan-aqua-50/10">
<div class="warm-panel w-full md:w-1/2 shrink-0 relative hidden md:flex items-center justify-center overflow-hidden">
@* Structured background: subtle teal dot grid, masked to a soft ellipse *@
<div class="hero-grid-pattern" aria-hidden="true"></div>
<div class="hero-radial-glow" aria-hidden="true"></div>
Expand Down
4 changes: 2 additions & 2 deletions Features/Landing/Components/Mission.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<div class="reveal-left flex-1 text-center md:text-left px-4 md:px-0">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4 leading-tight">
We Specialize in Bringing<br />
<span class="bg-gradient-to-r from-teal-cyan-aqua-600 to-cloudzen-teal bg-clip-text text-transparent">Smart Technology</span> to Growing Businesses
<span class="text-teal-cyan-aqua-600">Smart Technology</span> to Growing Businesses
</h2>
<div class="w-16 h-1 bg-teal-cyan-aqua-600 rounded-full mb-4 mx-auto md:mx-0"></div>
<p class="text-gray-500 leading-relaxed mb-6 max-w-prose">
Expand All @@ -41,7 +41,7 @@
<div class="reveal-right flex-1 text-center md:text-left px-4 md:px-0">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4 leading-tight">
Our mission is to<br />
<span class="bg-gradient-to-r from-teal-cyan-aqua-600 to-cloudzen-teal bg-clip-text text-transparent">empower businesses</span> to achieve their goals
<span class="text-teal-cyan-aqua-600">empower businesses</span> to achieve their goals
</h2>
<p class="text-gray-500 leading-relaxed mb-6">
We believe the right tools and automation can improve everyone's work. Whether you are a business owner or the very customer engaging with that business, CloudZen builds solutions to help with:
Expand Down
2 changes: 1 addition & 1 deletion Features/Landing/Components/Services.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</span>
<h1 class="entrance entrance-2 text-4xl md:text-5xl font-bold text-gray-800 mb-4 tracking-tight">
We Handle the Technology.
<span class="bg-gradient-to-r from-teal-cyan-aqua-600 to-cloudzen-teal bg-clip-text text-transparent">You Focus on Growing and Making Money.</span>
<span class="text-teal-cyan-aqua-600">You Focus on Growing and Making Money.</span>
</h1>
<p class="entrance entrance-3 text-lg text-gray-500 max-w-2xl mx-auto mb-2">
One partner who builds, modernizes, and automates — so you don't have to hire an entire tech department.
Expand Down
10 changes: 5 additions & 5 deletions Features/Legal/Components/Faq.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@

.faq-item {
background: #ffffff;
border: 1px solid rgba(97, 194, 200, 0.25);
border: 1px solid #40676B; /* teal-cyan-aqua-600 */
border-radius: 0.75rem;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
border-color: #d1d5db;
border-color: #40676B; /* teal-cyan-aqua-600 */
}

.faq-item--open {
border-color: rgba(97, 194, 200, 0.5);
box-shadow: 0 4px 16px rgba(97, 194, 200, 0.1);
border-color: #40676B; /* teal-cyan-aqua-600 */
box-shadow: 0 4px 16px rgba(64, 103, 107, 0.1);
}

/* Trigger button */
Expand Down Expand Up @@ -157,7 +157,7 @@

/* Inline link in header */
.faq-inline-link {
color: #0891b2;
color: #40676B;
Comment on lines 159 to +160

@coderabbitai coderabbitai Bot Jul 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Keep the FAQ link readable on hover.

The new dark base color is appropriate, but the existing #06b6d4 hover color is low-contrast for normal text on a white background. Use a darker hover color such as #0e7490.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@Features/Legal/Components/Faq.razor.css` around lines 159 - 160, Update the
hover styling for the .faq-inline-link selector to use a darker, higher-contrast
color such as `#0e7490` instead of `#06b6d4`, while preserving the new dark base
color and other link styles.

text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.2s ease;
Expand Down
2 changes: 1 addition & 1 deletion Layout/Header.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<NavLink href="/mission" class="nav-link text-gray-600 font-medium tracking-wide hover:text-teal-cyan-aqua-600 transition-colors" ActiveClass="nav-link--active">About</NavLink>
@* <NavLink href="/whoiam" class="nav-link text-gray-600 font-medium tracking-wide hover:text-teal-cyan-aqua-600 transition-colors" ActiveClass="nav-link--active">Who I Am</NavLink> *@
<NavLink href="/faq" class="nav-link text-gray-600 font-medium tracking-wide hover:text-teal-cyan-aqua-600 transition-colors" ActiveClass="nav-link--active">FAQ</NavLink>
<NavLink href="/contact" class="cta-button btn-shimmer px-5 py-2 bg-orange-400 text-white text-sm font-semibold rounded-full hover:bg-orange-500" ActiveClass="ring-2 ring-orange-300 ring-offset-1">Let's Talk</NavLink>
<NavLink href="/contact" class="cta-button btn-shimmer px-5 py-2 bg-orange-400 text-white text-sm font-semibold rounded-full hover:bg-orange-500" ActiveClass="ring-2 ring-orange-400 ring-offset-1">Let's Talk</NavLink>
</nav>

@* ── Mobile nav ── *@
Expand Down
Loading