Redesign Contact Page that align existing UI#342
Open
Chandrika987 wants to merge 1 commit into
Open
Conversation
Contributor
📝 WalkthroughWalkthroughThe Contact page has been redesigned from a simple stacked layout into a modern, icon-enhanced grid of styled cards. Icon imports and container styling establish the visual foundation, followed by a centered header, a two-column grid of contact information cards with Lucide icons, and new social action buttons linking to external platforms and support email. ChangesContact Page Visual Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Contributor
Author
|
Hi @Sachinchaurasiya360 sir, |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
client/src/module/legal/ContactPage.tsx (1)
32-33: ⚡ Quick winExtract shared card/action class variants to avoid duplication.
The same long class strings are repeated across multiple cards and action buttons. Please centralize these into shared constants (or small presentational components) in this file.
As per coding guidelines,
**/*.{ts,tsx}andclient/src/**/*.{tsx,ts}require: “Apply DRY principle: no duplicate helpers, shared animation variants per file.”Also applies to: 56-57, 72-73, 94-95, 134-135, 143-144, 150-151
🤖 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 `@client/src/module/legal/ContactPage.tsx` around lines 32 - 33, In ContactPage.tsx extract the repeated long tailwind class strings into shared constants or tiny presentational components: create e.g. const CARD_CLASSES = "rounded-2xl border border-gray-200 dark:border-gray-900 bg-white/70 dark:bg-[`#070707`] backdrop-blur-sm p-6 shadow-sm hover:border-lime-400/40 dark:hover:border-lime-500/40 hover:shadow-[0_0_16px_rgba(163,230,53,0.05)] transition-all" and const ACTION_CLASSES = "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:... (match existing string)" at the top of the ContactPage component file (or export small Card/ActionButton presentational components), then replace the repeated className strings in the ContactPage JSX (the <section ...> card nodes and the action buttons referenced in the review at occurrences around lines 32-33, 56-57, 72-73, 94-95, 134-135, 143-144, 150-151) with className={CARD_CLASSES} and className={ACTION_CLASSES} (or use the new Card/ActionButton component) to eliminate duplication and follow the DRY guideline.
🤖 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 `@client/src/module/legal/ContactPage.tsx`:
- Around line 40-46: The mailto anchor in ContactPage.tsx is implemented as a
raw <a> styled like a button; replace it with the shared Button component
(client/src/components/ui/button.tsx) using the asChild prop to compose the
anchor inside Button so variants/states remain consistent (i.e., wrap the
existing <a href="mailto:..."> content with <Button asChild> and pass the same
className/children or use Button's variant props instead); apply the same change
to the other button-like anchors around lines 130-153 so all new buttons use the
reusable Button component.
- Line 8: Replace all arbitrary Tailwind bracket tokens in ContactPage.tsx:
change every dark:bg-[`#070707`] usage to dark:bg-background and replace
hover:shadow-[0_0_16px_rgba(163,230,53,0.05)] with the appropriate standard
shadow utility (e.g., shadow-md/hover:shadow-lg or your design-system
equivalent). Replace anchor elements that are styled like buttons (the email
anchor and the social/action anchors) to use the project's Button component from
client/src/components/ui/button.tsx with the asChild prop so the <a> is composed
inside Button. Extract the repeated card/action class string used in the card
sections and action buttons into a shared helper/component (or a const variable)
and apply that to the card containers and buttons to satisfy DRY and ensure
consistent canonical classes.
---
Nitpick comments:
In `@client/src/module/legal/ContactPage.tsx`:
- Around line 32-33: In ContactPage.tsx extract the repeated long tailwind class
strings into shared constants or tiny presentational components: create e.g.
const CARD_CLASSES = "rounded-2xl border border-gray-200 dark:border-gray-900
bg-white/70 dark:bg-[`#070707`] backdrop-blur-sm p-6 shadow-sm
hover:border-lime-400/40 dark:hover:border-lime-500/40
hover:shadow-[0_0_16px_rgba(163,230,53,0.05)] transition-all" and const
ACTION_CLASSES = "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm
font-medium hover:... (match existing string)" at the top of the ContactPage
component file (or export small Card/ActionButton presentational components),
then replace the repeated className strings in the ContactPage JSX (the <section
...> card nodes and the action buttons referenced in the review at occurrences
around lines 32-33, 56-57, 72-73, 94-95, 134-135, 143-144, 150-151) with
className={CARD_CLASSES} and className={ACTION_CLASSES} (or use the new
Card/ActionButton component) to eliminate duplication and follow the DRY
guideline.
🪄 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
Run ID: 0b886e4a-0f16-4313-b050-58d1ae6a656d
📒 Files selected for processing (1)
client/src/module/legal/ContactPage.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Which issue does this PR close?
Rationale for this change
The existing Contact page was functional but visually very plain compared to the rest of the InternHack website. This PR improves the UI structure, spacing, and overall design consistency while keeping the existing functionality unchanged.
What changes are included in this PR?
Are these changes tested?
Yes. The updated UI was tested locally in desktop and responsive views, including dark mode compatibility.
Are there any user-facing changes?
Yes. The Contact page now has a cleaner, more modern, and visually consistent UI aligned with the rest of the InternHack platform.
Summary by CodeRabbit
Style
New Features