Skip to content

updated footer with better ui/ux#295

Open
ArshiBansal wants to merge 1 commit into
GitMetricsLab:mainfrom
ArshiBansal:Update_footer
Open

updated footer with better ui/ux#295
ArshiBansal wants to merge 1 commit into
GitMetricsLab:mainfrom
ArshiBansal:Update_footer

Conversation

@ArshiBansal
Copy link
Copy Markdown

@ArshiBansal ArshiBansal commented May 17, 2026

Related Issue


Description

The current footer could use a design refresh to make it more attractive, modern, and professional. A well-crafted footer not only improves the overall look of the site but also ensures that important links and information are easy to find, enhancing the overall user experience.


How Has This Been Tested?

Through Comparing initial deployed link with updated locally hosted one


Screenshots (if applicable)


Type of Change

  • Bug fix
  • [yes] New feature
  • Code style update
  • Breaking change
  • Documentation update

Summary by CodeRabbit

  • Style
    • Redesigned footer layout with organized multi-section structure featuring Quick Links and Connect sections
    • Enhanced styling with gradient background, improved dark mode support, and refined spacing and typography
    • Added visual divider and icon badges for better visual hierarchy
    • Improved accessibility with enhanced labeling

Review Change Stack

@netlify
Copy link
Copy Markdown

netlify Bot commented May 17, 2026

Deploy Preview for github-spy ready!

Name Link
🔨 Latest commit b2fce9e
🔍 Latest deploy log https://app.netlify.com/projects/github-spy/deploys/6a0994039bff0300088e9b21
😎 Deploy Preview https://deploy-preview-295--github-spy.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 17, 2026

📝 Walkthrough

Walkthrough

The Footer component was redesigned from a compact layout to a multi-section structure. Imports were expanded for additional icons. The JSX now includes a top section with a branded GitHub link, descriptive text, quick navigation links, and a social connect button with accessibility attributes, followed by a divider and bottom section with copyright and "made with" text. The component signature and export remain unchanged.

Changes

Footer Component Multi-Section Redesign

Layer / File(s) Summary
Icon imports and dependencies
src/components/Footer.tsx
Updated FontAwesome icon imports and retained React Router Link import to enable brand linking, quick navigation, and social icon rendering in the redesigned footer.
Top Section redesign with brand and navigation
src/components/Footer.tsx
GitHub brand link with icon badge, descriptive paragraph, quick links column for Contact and About pages, and a GitHub social connect button with aria-label accessibility attribute. Styling rewritten with gradient backgrounds, dark-mode support, updated spacing/typography, and Tailwind hover/transition effects.
Bottom Section with divider and footer text
src/components/Footer.tsx
Visual divider separator followed by a bottom section containing updated copyright year and a "Made with heart" line. Responsive spacing and layout adjustments preserved. Component closing structure and default export unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

  • #284: Footer component is being modified across multiple PRs; this redesign addresses responsive multi-section layout enhancements to the same component.

Possibly related PRs

  • GitMetricsLab/github_tracker#171: Both PRs modify src/components/Footer.tsx styling and layout structure, though this PR performs a comprehensive JSX restructuring into a multi-section design versus prior footer Tailwind adjustments.

Suggested labels

type:accessibility, level:intermediate, quality:clean

Poem

🐰 A footer redesigned with grace,
Multi-sections fill its space,
Quick links dance, GitHub shines bright,
Accessibility set just right—
Our Footer hops to new delight!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

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.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'updated footer with better ui/ux' directly summarizes the main change—a footer redesign to improve user experience and appearance.
Description check ✅ Passed The PR description follows the template with all required sections completed: Related Issue (#188), Description, How Has This Been Tested, Type of Change marked, and Screenshots section included.
Linked Issues check ✅ Passed The footer refactor addresses all key objectives from #188: improved typography and spacing, modern color palette with gradient background, visual dividers, social media links (GitHub icon), and responsive Tailwind-based styling.
Out of Scope Changes check ✅ Passed All changes in Footer.tsx are directly scoped to the footer redesign objective—no unrelated modifications detected beyond the footer UI/UX improvements outlined in #188.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
src/components/Footer.tsx (1)

13-13: ⚡ Quick win

Extract duplicated GitHub URL to a constant.

The GitHub repository URL https://github.com/GitMetricsLab/github_tracker is hardcoded in two locations (brand link and social link). Extracting it to a constant will prevent inconsistencies and make future updates easier.

♻️ Proposed refactor
 import { FaGithub, FaEnvelope, FaInfoCircle, FaHeart } from 'react-icons/fa';
 import { Link } from 'react-router-dom';

+const GITHUB_REPO_URL = "https://github.com/GitMetricsLab/github_tracker";
+
 function Footer() {
   return (
     <footer className="bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-950 border-t border-gray-200/70 dark:border-gray-800/70 text-gray-700 dark:text-gray-300 transition-colors duration-300">
       <div className="max-w-7xl mx-auto px-6 py-10">
         {/* Top Section */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
           {/* Brand Section */}
           <div className="space-y-3">
             <a
-              href="https://github.com/GitMetricsLab/github_tracker"
+              href={GITHUB_REPO_URL}
               target="_blank"
               rel="noopener noreferrer"
           {/* Social Section */}
           <div className="space-y-3 md:text-right">
             <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-900 dark:text-white">
               Connect
             </h3>

             <div className="flex md:justify-end">
               <a
-                href="https://github.com/GitMetricsLab/github_tracker"
+                href={GITHUB_REPO_URL}
                 target="_blank"
                 rel="noopener noreferrer"

Also applies to: 63-63

🤖 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/Footer.tsx` at line 13, The hardcoded GitHub URL appears twice
in the Footer component; create a single exported/locally-scoped constant (e.g.,
GITHUB_URL) at the top of src/components/Footer.tsx and replace both occurrences
(the brand link and the social link JSX) with that constant (use GITHUB_URL in
the href props) so updates remain consistent and reduce duplication.
🤖 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 `@src/components/Footer.tsx`:
- Line 13: The hardcoded GitHub URL appears twice in the Footer component;
create a single exported/locally-scoped constant (e.g., GITHUB_URL) at the top
of src/components/Footer.tsx and replace both occurrences (the brand link and
the social link JSX) with that constant (use GITHUB_URL in the href props) so
updates remain consistent and reduce duplication.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5b6bcec0-601a-4696-8103-f9d6010593ec

📥 Commits

Reviewing files that changed from the base of the PR and between a2452b3 and b2fce9e.

📒 Files selected for processing (1)
  • src/components/Footer.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve Footer Component Design for a More Attractive and Professional Look

1 participant