Refactor/adjustments publicpage#688
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe public shell now uses animated responsive navigation with shared typed menu data. Footer exports and layout imports were updated, homepage presentation and scrolling were adjusted, and login and registration forms received layout and styling changes. ChangesShell navigation and homepage changes
Authentication form styling
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Visitor
participant HomeNavBar
participant MenuItem
participant Motion
Visitor->>HomeNavBar: Toggle mobile menu
HomeNavBar->>MenuItem: Read navigation entries
HomeNavBar->>Motion: Render animated mobile menu
Visitor->>HomeNavBar: Select link or press Escape
HomeNavBar->>HomeNavBar: Close menu and restore focus
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with 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.
Inline comments:
In `@src/app/globals.css`:
- Around line 9-11: Update the global html scroll-behavior rule in globals.css
to apply smooth scrolling only when the user’s prefers-reduced-motion setting
does not request reduced motion, while preserving the existing smooth behavior
for other users and the fragment-link behavior used by Footer.
In `@src/components/layout/Home/JoinUs.tsx`:
- Around line 9-18: Update the JoinUs card container’s xxl height styling to
prevent CTA overflow: replace the fixed 400px height with an automatic height
and suitable minimum height, or increase it enough to contain the declared
padding, content, gaps, and xxl spacing. Preserve the existing responsive styles
at other breakpoints.
- Line 18: Update the CTA Link in JoinUs to use flex alignment instead of
justify-self-center: apply self-center for mobile and lg:self-start for desktop,
preserving centered mobile and left-aligned desktop behavior.
In `@src/components/shell/HomeNavBar.tsx`:
- Line 89: Update the mobile navigation container in HomeNavBar to remove its
redundant role="navigation" attribute, or assign it a distinct aria-label if it
must remain a separate landmark; preserve the existing outer nav landmark.
- Around line 16-23: Update the focus effect in HomeNavBar to skip its initial
mount execution, and only restore focus when openMobile changes from true to
false; retain focusing the first menu control when opening.
- Around line 72-78: Update the mobile menu button in the HomeNavBar component
so its aria-label reflects the current openMobile state: use “Fechar menu” when
open and “Abrir menu” when closed, while preserving the existing toggle
behavior.
- Around line 57-67: Update the MenuItem rendering in HomeNavBar so the generic
Link is rendered only when menu.href is not '/contact'. For the contact entry,
render only the single CTA Button containing its Link, preserving the existing
href, label, styling, and mobile menu close behavior without leaving an empty
interactive element.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: a94589bf-9f4c-4a02-9161-f7a7b34101cd
📒 Files selected for processing (12)
package.jsonsrc/app/(public)/layout.tsxsrc/app/globals.csssrc/components/layout/Home/AboutUs.tsxsrc/components/layout/Home/Faq.tsxsrc/components/layout/Home/Hero.tsxsrc/components/layout/Home/HomeNavBar.tsxsrc/components/layout/Home/JoinUs.tsxsrc/components/shell/Footer.tsxsrc/components/shell/HomeNavBar.tsxsrc/components/shell/menuItem.tssrc/components/shell/models/interface-menu-item.ts
💤 Files with no reviewable changes (2)
- src/components/layout/Home/HomeNavBar.tsx
- src/components/layout/Home/AboutUs.tsx
| html { | ||
| scroll-behavior: smooth; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Respect prefers-reduced-motion for global smooth scrolling.
This affects the fragment links used by src/components/shell/Footer.tsx; users who request reduced motion should not receive animated scrolling.
Proposed fix
html {
scroll-behavior: smooth;
}
+
+@media (prefers-reduced-motion: reduce) {
+ html {
+ scroll-behavior: auto;
+ }
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| html { | |
| scroll-behavior: smooth; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| `@media` (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| } |
🤖 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 `@src/app/globals.css` around lines 9 - 11, Update the global html
scroll-behavior rule in globals.css to apply smooth scrolling only when the
user’s prefers-reduced-motion setting does not request reduced motion, while
preserving the existing smooth behavior for other users and the fragment-link
behavior used by Footer.
| <div className="h-[286px] w-full rounded-[18px] bg-[url('https://res.cloudinary.com/daxa1bpny/image/upload/v1764801280/ui_assets/bg_joinUs_tablet.svg')] bg-cover bg-no-repeat px-[22px] py-[58px] md:h-[300px] md:px-[165px] md:py-10 lg:h-[261px] lg:bg-[url('https://res.cloudinary.com/daxa1bpny/image/upload/v1764805503/ui_assets/bg_joinUs_desktop.svg')] lg:bg-right lg:pt-16 lg:pr-[107px] lg:pb-[43px] lg:pl-[72px] xl:h-[309px] xl:pt-[76px] xl:pr-[90px] xl:pb-[74px] xxl:h-[400px] xxl:pt-[98px] xxl:pr-[183px] xxl:pb-[92px] xxl:pl-[110px]"> | ||
| <div className="flex flex-col gap-5"> | ||
| <h3 className="w-[291px] text-[26px] leading-[120%] font-medium text-[#35343C] md:col-span-6 md:w-[424px] md:text-[44px] lg:col-span-12 lg:w-[671px] lg:text-left xxl:w-[975px] xxl:text-[64px]"> | ||
| Participe da nossa rede agora | ||
| </h3> | ||
|
|
||
| {/* Texto */} | ||
| <p className="col-span-4 mt-3 text-center text-[14px] leading-[140%] text-[#5C5C65] md:col-span-6 md:text-[16px] lg:col-span-12 lg:w-[671px] lg:text-left xxl:mt-4 xxl:w-[975px] xxl:text-[18px]"> | ||
| Cadastre um projeto ou participe da comunidade e colabore em | ||
| projetos reais. | ||
| <p className="text-center text-[14px] leading-[140%] text-[#5C5C65] md:col-span-6 md:text-[16px] lg:col-span-12 lg:w-[671px] lg:text-left xxl:mt-4 xxl:w-[975px] xxl:text-[18px]"> | ||
| Cadastre seu projeto ou junte-se à comunidade e colabore em novas | ||
| ideias. | ||
| </p> | ||
|
|
||
| {/* Botão */} | ||
| <Link | ||
| href="/how-to-join" | ||
| className="col-start-2 col-end-4 mt-6 justify-self-center md:col-start-3 md:col-end-5 lg:col-span-12 lg:justify-self-auto" | ||
| > | ||
| <Link href="/how-to-join" className="justify-self-center"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Allow the card to grow at the xxl breakpoint.
At xxl, the 400px fixed height is smaller than the declared vertical padding plus the headline, paragraph, flex gaps, button, and xxl:mt-8 spacing—approximately 423px before wrapping. The CTA can therefore overflow the background card.
Use an automatic height with a minimum height, or increase the fixed height.
🤖 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 `@src/components/layout/Home/JoinUs.tsx` around lines 9 - 18, Update the JoinUs
card container’s xxl height styling to prevent CTA overflow: replace the fixed
400px height with an automatic height and suitable minimum height, or increase
it enough to contain the declared padding, content, gaps, and xxl spacing.
Preserve the existing responsive styles at other breakpoints.
| href="/how-to-join" | ||
| className="col-start-2 col-end-4 mt-6 justify-self-center md:col-start-3 md:col-end-5 lg:col-span-12 lg:justify-self-auto" | ||
| > | ||
| <Link href="/how-to-join" className="justify-self-center"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n -C2 'flex flex-col|justify-self-center|self-center|items-center' src/components/layout/Home/JoinUs.tsxRepository: TryCatch-ForMatch/trycatch
Length of output: 1596
🏁 Script executed:
#!/bin/bash
cat -n src/components/layout/Home/JoinUs.tsxRepository: TryCatch-ForMatch/trycatch
Length of output: 2328
Use flex alignment for the CTA. The parent is flex flex-col, so justify-self-center has no effect here. Use self-center lg:self-start (or items-center lg:items-start on the parent) to keep the CTA centered on mobile and left-aligned on desktop.
🤖 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 `@src/components/layout/Home/JoinUs.tsx` at line 18, Update the CTA Link in
JoinUs to use flex alignment instead of justify-self-center: apply self-center
for mobile and lg:self-start for desktop, preserving centered mobile and
left-aligned desktop behavior.
| useEffect(() => { | ||
| if (openMobile) { | ||
| const firstLink = menuRef.current?.querySelector('a, button'); | ||
| (firstLink as HTMLElement | null)?.focus(); | ||
| } else { | ||
| buttonRef.current?.focus(); | ||
| } | ||
| }, [openMobile]); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Do not steal focus on initial mount.
This effect runs with openMobile === false on the first render, moving focus to the hamburger button after hydration. Skip the initial effect and only restore focus during an open-to-closed transition.
🤖 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 `@src/components/shell/HomeNavBar.tsx` around lines 16 - 23, Update the focus
effect in HomeNavBar to skip its initial mount execution, and only restore focus
when openMobile changes from true to false; retain focusing the first menu
control when opening.
| {MenuItem.map((menu) => ( | ||
| <li key={menu.label}> | ||
| <Link href={menu.href} onClick={() => setOpenMobile(false)}> | ||
| {menu.href !== '/contact' && menu.label} | ||
| </Link> | ||
|
|
||
| {menu.href === '/contact' && ( | ||
| <Button className="transition-color rounded-full bg-[#35343C]"> | ||
| <Link href="/contact">Entre em contato</Link> | ||
| </Button> | ||
| )} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Render the contact CTA as one interactive element.
For /contact, the generic Link is still rendered, but its conditional child is empty. This creates an unnecessary keyboard stop before the actual CTA in both desktop and mobile menus. Render the generic link only for non-contact entries, and render a single contact link/button for the CTA.
Also applies to: 112-125
🤖 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 `@src/components/shell/HomeNavBar.tsx` around lines 57 - 67, Update the
MenuItem rendering in HomeNavBar so the generic Link is rendered only when
menu.href is not '/contact'. For the contact entry, render only the single CTA
Button containing its Link, preserving the existing href, label, styling, and
mobile menu close behavior without leaving an empty interactive element.
| <button | ||
| ref={buttonRef} | ||
| className="cursor-pointer p-2 lg:hidden" | ||
| aria-label="Abrir menu" | ||
| aria-expanded={openMobile} | ||
| aria-controls="mobile-menu" | ||
| onClick={() => setOpenMobile(!openMobile)} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep the toggle's accessible name synchronized with its state.
aria-label="Abrir menu" remains unchanged when the button closes an open menu. Use openMobile ? 'Fechar menu' : 'Abrir menu'.
🤖 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 `@src/components/shell/HomeNavBar.tsx` around lines 72 - 78, Update the mobile
menu button in the HomeNavBar component so its aria-label reflects the current
openMobile state: use “Fechar menu” when open and “Abrir menu” when closed,
while preserving the existing toggle behavior.
| <motion.div | ||
| ref={menuRef} | ||
| id="mobile-menu" | ||
| role="navigation" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Avoid an unlabeled nested navigation landmark.
The component already has an outer <nav>. Remove role="navigation" from the mobile container or provide a distinct aria-label.
🤖 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 `@src/components/shell/HomeNavBar.tsx` at line 89, Update the mobile navigation
container in HomeNavBar to remove its redundant role="navigation" attribute, or
assign it a distinct aria-label if it must remain a separate landmark; preserve
the existing outer nav landmark.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with 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.
Inline comments:
In `@src/components/form/Login/LoginForm.tsx`:
- Around line 58-59: Update the inputs in LoginForm to preserve autofill:
replace the email field’s autoComplete value with "email" and the password
field’s value with "current-password", removing the "off" setting while leaving
the existing styling unchanged.
In `@src/components/ui/input.tsx`:
- Line 24: Update the Input class definition to remove the fixed-height and
vertical-padding conflict: replace h-9 with a flexible minimum-height/auto
sizing strategy while preserving horizontal padding, or otherwise ensure callers
using py-6 retain a usable content area. Keep the existing styling and
responsive behavior unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 253142ba-1d85-4c75-ae1e-4c6215c67171
📒 Files selected for processing (5)
src/app/(public)/login/page.tsxsrc/components/form/Login/LoginForm.tsxsrc/components/form/RegisterForm/RegisterInvite.tsxsrc/components/form/RegisterForm/UserSignupForm.tsxsrc/components/ui/input.tsx
| autoComplete="off" | ||
| className="py-6" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="src/components/form/Login/LoginForm.tsx"
# Map the component structure first
ast-grep outline "$file" --view expanded || true
# Show the relevant section with line numbers
sed -n '1,220p' "$file" | cat -nRepository: TryCatch-ForMatch/trycatch
Length of output: 4697
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="src/components/ui/input.tsx"
ast-grep outline "$file" --view expanded || true
sed -n '1,220p' "$file" | cat -nRepository: TryCatch-ForMatch/trycatch
Length of output: 2310
Preserve login autofill.
autoComplete="off" blocks browser and password-manager suggestions on the email field. Use semantic tokens instead: autoComplete="email" for the email input and autoComplete="current-password" for the password input.
🤖 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 `@src/components/form/Login/LoginForm.tsx` around lines 58 - 59, Update the
inputs in LoginForm to preserve autofill: replace the email field’s autoComplete
value with "email" and the password field’s value with "current-password",
removing the "off" setting while leaving the existing styling unchanged.
| data-slot="input" | ||
| className={cn( | ||
| 'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-4 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30', | ||
| 'flex h-9 w-full min-w-0 rounded-md border border-[#35343c23] bg-transparent px-3 py-4 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30', |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the input component and find login/registration callers.
git ls-files 'src/components/ui/input.tsx' 'src/**' | sed -n '1,200p'
echo '--- input.tsx ---'
wc -l src/components/ui/input.tsx
cat -n src/components/ui/input.tsx | sed -n '1,220p'
echo '--- search for py-6 / input usage in login & registration areas ---'
rg -n "py-6|<Input|input" src -g '!**/*.d.ts' -g '!**/node_modules/**' | sed -n '1,260p'Repository: TryCatch-ForMatch/trycatch
Length of output: 23648
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- LoginForm.tsx ---'
cat -n src/components/form/Login/LoginForm.tsx | sed -n '1,180p'
echo '--- RegisterInvite.tsx ---'
cat -n src/components/form/RegisterForm/RegisterInvite.tsx | sed -n '1,180p'
echo '--- UserSignupForm.tsx ---'
cat -n src/components/form/RegisterForm/UserSignupForm.tsx | sed -n '1,240p'
echo '--- twMerge utility ---'
cat -n src/lib/utils.ts | sed -n '1,120p'Repository: TryCatch-ForMatch/trycatch
Length of output: 18440
Drop the fixed height/padding conflict on Input. h-9 and the auth forms’ py-6 fight each other, so the field can end up with no usable content area and render inconsistently. Use one sizing strategy: make the base control flexible (min-h-9/auto) or remove the extra vertical padding from the callers.
🤖 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 `@src/components/ui/input.tsx` at line 24, Update the Input class definition to
remove the fixed-height and vertical-padding conflict: replace h-9 with a
flexible minimum-height/auto sizing strategy while preserving horizontal
padding, or otherwise ensure callers using py-6 retain a usable content area.
Keep the existing styling and responsive behavior unchanged.
|
Oi @dennisDev77 ! sua branch Quando rolamos a tela o header deve reduzir sua branch Nessa parte também houve uma alteração do texto e da posição do botão sua branch Nessas dimensões houve alteração das margens dos componentes e o mesmo caso do header não diminuir sua branch develop sua branch develop sua branch Aqui no footer, acho que podemos centralizar a logo e distribuir em três colunas esses links o que acha? Tela maior os mesmos pontos observados de margem, transição do header, texto de participação do projeto |
2 participants
Pull Request
📋 Descrição
Este PR contempla ajustes visuais nas páginas públicas da aplicação, com foco na melhoria da interface e da experiência do utilizador.
🔗 Issue relacionada
Não, não tem
✅ Alterações realizadas
Descreva as principais alterações:
Alterações realizadas:
🧪 Como testar
✔️ Checklist
Summary by CodeRabbit