feat: Add "Home" button to signup page

[Arushi28-hub]

🚀 Pull Request Description

Fixes #228

🛠️ Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📝 Documentation update
• 🎨 UI/UX improvement (Frontend only)
• ⚙️ Refactor / Chore

📋 Changes Made

• Added a "Home" button at the top of the signup form

🧪 Testing & Validation

Frontend Verification:

• Verified the UI changes on different screen sizes (Responsive)
• Checked for any console errors in the browser dev tools
• Button navigation works correctly - clicking redirects to homepage
• Button styling is consistent with existing design system
• No new warnings or errors in the dev console

📸 Screenshots

✅ Checklist

• My code follows the code style of this project
• I have performed a self-review of my code
• My changes generate no new warnings or errors
• No breaking changes to existing functionality
• Button uses existing design system components (btn, lucide-react icons)

💡 Benefits

• Improves navigation accessibility from the signup page
• Provides users with a clear exit path without relying on the browser back button
• Enhances overall user experience and reduces confusion
• Maintains design consistency with existing UI patterns

---

Built with ❤️ for urBackend

Summary by CodeRabbit

• New Features

  • Added interactive navigation to authentication screens, allowing users to return home during the signup flow.

• Style

  • Applied visual styling for clickable navigation elements with hover effects and active state indicators.

[coderabbitai]

📝 Walkthrough

Walkthrough

AuthShell component is extended with an optional onModeClick prop that makes the modeLabel rendering conditional: clickable button when handler is provided, static span otherwise. Corresponding CSS styling adds hover and active states. Signup page configures the new prop to navigate home. Vite build config switches optimizer from esbuildOptions to rolldownOptions.

Changes

Auth Mode Click Navigation

Layer / File(s)	Summary
Clickable Mode Label Support apps/web-dashboard/src/components/AuthShell.jsx, apps/web-dashboard/src/index.css	AuthShell destructures new onModeClick prop. The modeLabel render now branches: if onModeClick exists, render a clickable button with inline reset styles and onClick binding; otherwise render static span. New .auth-form-card__mode--clickable CSS class sets pointer cursor, smooth transition, hover underline with primary color text, and reduced opacity on active state.
Signup Page Home Navigation apps/web-dashboard/src/pages/Signup.jsx	Signup updates AuthShell props to pass modeLabel text "← Home / Create Account" and wire onModeClick to navigate to / route.

Vite Build Configuration

Layer / File(s)	Summary
Optimizer Options Migration apps/web-dashboard/vite.config.js	optimizeDeps configuration key changes from esbuildOptions to rolldownOptions, preserving jsx: 'automatic' within the options block.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• geturbackend/urBackend#229: Also modifies Signup.jsx to add back-to-home navigation, implemented via an explicit button rather than the mode label wiring in this PR.

Suggested labels

enhancement, GSSOC'26, level:beginner, quality:clean, type:design, frontend

Suggested reviewers

• yash-pouranik

Poem

🐰 A button now clicks in the auth shell's embrace,
With home-bound navigation to find the right place,
While Vite's optimizer trades tools with a flair,
The signup page greets users with care!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check	❓ Inconclusive	The Vite config change (esbuildOptions to rolldownOptions) appears unrelated to the Home button feature and requires clarification on its necessity.	Clarify why the vite.config.js change was necessary for this PR or consider moving it to a separate PR.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the primary change—adding a Home button to the signup page—which aligns with the main objective of the PR.
Linked Issues check	✅ Passed	The PR successfully implements all requirements from issue #228: a visible Back-to-Home button on the signup page that navigates to the homepage with responsive, design-system-consistent styling.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

apps/web-dashboard/src/index.css (1)

869-873: 💤 Low value

Redundant background assignment in hover state.

The hover rule sets background: var(--color-auth-mode-bg), which is already the default background defined in .auth-form-card__mode (line 856). The hover visual feedback is effectively provided by the color and text-decoration changes alone.

♻️ Optional cleanup

 .auth-form-card__mode--clickable:hover {
-  background: var(--color-auth-mode-bg);
   color: var(--color-primary);
   text-decoration: underline;
 }

🤖 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 `@apps/web-dashboard/src/index.css` around lines 869 - 873, The hover rule for
.auth-form-card__mode--clickable:hover redundantly reassigns background to
var(--color-auth-mode-bg) which is already set on .auth-form-card__mode; remove
the background declaration from the :hover block so the hover only changes color
and text-decoration (leave .auth-form-card__mode and
.auth-form-card__mode--clickable:hover selectors intact).

apps/web-dashboard/src/components/AuthShell.jsx (1)

22-29: 💤 Low value

Consider moving inline button-reset styles to CSS.

The inline styles { background: 'none', border: 'none', cursor: 'pointer', padding: 0 } duplicate logic that could live in the .auth-form-card__mode--clickable class for better maintainability and consistency with the existing design system.

♻️ Refactor to consolidate styles in CSS

In index.css, update the clickable class to include button-reset properties:

 .auth-form-card__mode--clickable {
+  background: none;
+  border: none;
+  padding: 0;
   cursor: pointer;
   transition: all 0.2s ease;
 }

Then remove the inline style prop from the button:

             <button
               type="button"
               className="auth-form-card__mode auth-form-card__mode--clickable"
               onClick={onModeClick}
-              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
             >
               {modeLabel}
             </button>

🤖 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 `@apps/web-dashboard/src/components/AuthShell.jsx` around lines 22 - 29, Move
the inline button-reset styles out of the JSX and into the CSS class: update the
.auth-form-card__mode--clickable rule in your stylesheet to include background:
none, border: none, cursor: pointer, and padding: 0, then remove the style prop
from the button element in AuthShell.jsx (the button that uses className
"auth-form-card__mode auth-form-card__mode--clickable" and
onClick={onModeClick}) so the component relies on the consolidated CSS for the
reset.

🤖 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.

Nitpick comments:
In `@apps/web-dashboard/src/components/AuthShell.jsx`:
- Around line 22-29: Move the inline button-reset styles out of the JSX and into
the CSS class: update the .auth-form-card__mode--clickable rule in your
stylesheet to include background: none, border: none, cursor: pointer, and
padding: 0, then remove the style prop from the button element in AuthShell.jsx
(the button that uses className "auth-form-card__mode
auth-form-card__mode--clickable" and onClick={onModeClick}) so the component
relies on the consolidated CSS for the reset.

In `@apps/web-dashboard/src/index.css`:
- Around line 869-873: The hover rule for .auth-form-card__mode--clickable:hover
redundantly reassigns background to var(--color-auth-mode-bg) which is already
set on .auth-form-card__mode; remove the background declaration from the :hover
block so the hover only changes color and text-decoration (leave
.auth-form-card__mode and .auth-form-card__mode--clickable:hover selectors
intact).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d51b61f5-dff0-4c3c-8543-121461ea44a1

📥 Commits

Reviewing files that changed from the base of the PR and between e5cf7c3 and f625ed4.

📒 Files selected for processing (4)

• apps/web-dashboard/src/components/AuthShell.jsx
• apps/web-dashboard/src/index.css
• apps/web-dashboard/src/pages/Signup.jsx
• apps/web-dashboard/vite.config.js

[yash-pouranik]

Really thank for doing this again, appreciated.
@Arushi28-hub

Can u please answer this that why theres changes in vite config file, if thats not necessary then please remove that.

[yash-pouranik]

extra points for nice cooperation. Thank you.
All the best.

[Arushi28-hub]

@yash-pouranik Thank you so much !