Skip to content

Improving UIUX of a About page #144

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

Closed
beereshbc wants to merge 1 commit into from
Closed

Improving UIUX of a About page #144

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
3 changes: 0 additions & 3 deletions backend/.env.example
View file
Open in desktop

This file was deleted.

43 changes: 24 additions & 19 deletions backend/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,44 @@
const express = require('express');
const mongoose = require('mongoose');
const session = require('express-session');
const passport = require('passport');
const bodyParser = require('body-parser');
require('dotenv').config();
const cors = require('cors');
const express = require("express");
const mongoose = require("mongoose");
const session = require("express-session");
const passport = require("passport");
const bodyParser = require("body-parser");
require("dotenv").config();
const cors = require("cors");

// Passport configuration
require('./config/passportConfig');
require("./config/passportConfig");

const app = express();

// CORS configuration
app.use(cors('*'));
app.use(cors("*"));

// Middleware
app.use(bodyParser.json());
app.use(session({
app.use(
session({
secret: process.env.SESSION_SECRET,
resave: false,
saveUninitialized: false,
}));
})
);
app.use(passport.initialize());
app.use(passport.session());

// Routes
const authRoutes = require('./routes/auth');
app.use('/api/auth', authRoutes);
const authRoutes = require("./routes/auth");
app.use("/api/auth", authRoutes);

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, {}).then(() => {
console.log('Connected to MongoDB');
mongoose
.connect(process.env.MONGO_URI, {})
.then(() => {
console.log("Connected to MongoDB");
app.listen(process.env.PORT, () => {
console.log(`Server running on port ${process.env.PORT}`);
console.log(`Server running on port ${process.env.PORT}`);
});
}).catch((err) => {
console.log('MongoDB connection error:', err);
});
})
.catch((err) => {
console.log("MongoDB connection error:", err);
});
Comment on lines +1 to +44
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Code style standardization looks good, but verify environment setup documentation.

The conversion to consistent double quotes and improved multi-line formatting enhances readability. However, the AI summary mentions removal of backend/.env.example which could impact new developer onboarding.

🏁 Script executed:

#!/bin/bash
# Check if there's alternative environment documentation
fd -t f "README" -e md -e txt | xargs grep -l -i "environment\|env\|setup"

Length of output: 84

I’d like to confirm whether the README still documents the required environment variables now that .env.example was removed:

🏁 Script executed:

#!/bin/bash
# Check for environment variable documentation in README.md
grep -n -E '\.env|MONGO_URI|SESSION_SECRET|PORT' README.md || echo "No env vars documented in README.md"

Length of output: 141

Add Documentation for Required Environment Variables

The style updates are fine, but removing backend/.env.example has left no reference to the needed environment variables. Since README.md doesn’t list them, please add or restore documentation so new developers know which vars to set.

Locations to update:

  • backend/README.md (or project root README.md if that’s the main doc)
  • Optionally re-add backend/.env.example with placeholder values

Suggested README.md addition:

## Environment Variables

The server requires the following variables:

- `MONGO_URI` – MongoDB connection string (e.g. `mongodb://user:pass@host:port/db`)
- `SESSION_SECRET` – Secret key for express-session
- `PORT` – Port number for the server to listen on (default: `3000`)
🤖 Prompt for AI Agents 
In backend/server.js lines 1 to 44, the environment variables MONGO_URI,
SESSION_SECRET, and PORT are required but there is no documentation for them
after removing backend/.env.example. To fix this, update backend/README.md (or
the main README.md) to add a section listing these environment variables with
descriptions and example placeholder values. Optionally, restore
backend/.env.example with these variables and placeholder values to help new
developers set up the environment correctly.

Binary file added src/assets/git_icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 47 additions & 82 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,127 +10,92 @@ const Navbar: React.FC = () => {
const { toggleTheme, mode } = themeContext;

return (
<nav className="bg-white text-black dark:bg-gray-800 dark:text-white shadow-lg">
<nav className="bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900 text-black dark:text-white border-b-2 border-blue-300 shadow-lg">
{/* Top Nav */}
<div className="container mx-auto px-6 py-4 flex justify-between items-center">
{/* Logo Section */}
{/* Logo */}
<Link
to="/"
className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center"
className="text-2xl font-bold hover:text-gray-500 dark:hover:text-gray-300 flex items-center"
>
<img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
GitHub Tracker
</Link>

{/* Desktop Links */}
<div className="hidden md:flex space-x-6">
<Link
to="/"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
Home
</Link>
<Link
to="/about"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
About
</Link>
<Link
to="/contact"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
Contact
</Link>
<Link
to="/contributors"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
Contributors
</Link>
<Link
to="/login"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
Login
</Link>
<div className="hidden md:flex space-x-6 items-center">
{["/", "/about", "/contact", "/contributors", "/login"].map((path, idx) => {
const labels = ["Home", "About", "Contact", "Contributors", "Login"];
return (
<Link
key={path}
to={path}
className="text-lg font-medium hover:text-gray-600 dark:hover:text-gray-300 transition px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
{labels[idx]}
</Link>
);
})}

{/* Theme Toggle */}
<button
onClick={toggleTheme}
className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 dark:border-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 transition duration-200"
>
{mode === "dark" ? "🌞 Light" : "🌙 Dark"}
</button>
</div>

{/* Mobile Menu Button */}
{/* Mobile Hamburger */}
<div className="md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
className="w-8 h-8 flex flex-col justify-between items-center focus:outline-none"
>
<span
className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
className={`block h-[3px] w-full bg-black dark:bg-white rounded transition-transform duration-300 ${
isOpen ? "rotate-45 translate-y-2" : ""
}`}
></span>
/>
<span
className={`block h-[3px] w-full bg-white rounded-lg transition-opacity duration-300 ${
className={`block h-[3px] w-full bg-black dark:bg-white rounded transition-opacity duration-300 ${
isOpen ? "opacity-0" : ""
}`}
></span>
/>
<span
className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
className={`block h-[3px] w-full bg-black dark:bg-white rounded transition-transform duration-300 ${
isOpen ? "-rotate-45 -translate-y-2" : ""
}`}
></span>
/>
</button>
</div>
</div>

{/* Mobile Links */}
{/* Mobile Dropdown Menu */}
{isOpen && (
<div className="md:hidden bg-gray-800">
<div className="space-y-4 px-6 py-4">
<Link
to="/home"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
onClick={() => setIsOpen(false)}
>
Home
</Link>
<Link
to="/about"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
onClick={() => setIsOpen(false)}
>
About
</Link>
<Link
to="/contact"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
onClick={() => setIsOpen(false)}
>
Contact
</Link>
<Link
to="/contributors"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
onClick={() => setIsOpen(false)}
>
Contributors
</Link>
<Link
to="/login"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
onClick={() => setIsOpen(false)}
>
Login
</Link>
<div className="md:hidden bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900 text-black dark:text-white">
<div className="space-y-4 px-6 py-6">
{["/", "/about", "/contact", "/contributors", "/login"].map((path, idx) => {
const labels = ["Home", "About", "Contact", "Contributors", "Login"];
return (
<Link
key={path}
to={path}
onClick={() => setIsOpen(false)}
className="block text-lg font-medium hover:text-gray-700 dark:hover:text-gray-300 transition px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
{labels[idx]}
</Link>
);
})}

{/* Theme Toggle */}
<button
onClick={() => {
toggleTheme();
setIsOpen(false);
}}
className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200 w-full text-left"
className="text-sm font-semibold px-3 py-1 w-xl text-left rounded border border-gray-500 dark:border-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 transition duration-200"
>
{mode === "dark" ? "🌞 Light" : "🌙 Dark"}
</button>
Expand Down
85 changes: 49 additions & 36 deletions src/pages/About/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,61 @@
const About = () => {
return (
<div className="about-container">
{/* Hero Section */}
<section className="hero bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 py-12 px-4">
<h1 className="text-4xl font-bold text-center">About Us</h1>
<p className="text-lg text-center mt-4">
Welcome to GitHub Tracker! We simplify issue tracking for developers.
</p>
</section>
<div className="about-container w-full bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900">
{/* Main Flex Wrapper */}
<div className="flex flex-col lg:flex-row mt-8 items-center justify-around gap-8 px-4">
{/* Image Section */}
<div className="border p-10 sm:p-14 border-indigo-400 rounded-lg shadow-lg hover:scale-105 duration-300 transition-all">
<img className="w-32 sm:w-64 max-w-full h-auto" src="/crl-icon.png" alt="Logo" />
</div>
Comment on lines +3 to +9
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Excellent responsive design with proper image handling.

The gradient background and responsive image section create a modern, professional appearance. The hover effects and proper responsive classes enhance user experience.

🏁 Script executed:

#!/bin/bash
# Verify the logo image exists in the public directory
fd -t f "crl-icon.png" public/

Length of output: 50

About Page UI Redesign Approved – Image Asset Verified

The comprehensive UI overhaul aligns perfectly with our PR objectives. I’ve confirmed that public/crl-icon.png exists. A couple of small accessibility refinements will make this even stronger:

• Enhance alt text
File: src/pages/About/About.tsx
Change
<img … alt="Logo" />
to
<img … alt="CRL Logo" />

• Add keyboard focus styles to hoverable container
File: src/pages/About/About.tsx
Update the wrapper’s class list:

- className="border p-10 sm:p-14 border-indigo-400 rounded-lg shadow-lg hover:scale-105 duration-300 transition-all"
+ className="border p-10 sm:p-14 border-indigo-400 rounded-lg shadow-lg
              hover:scale-105 focus:scale-105 focus:outline-none
              focus:ring-2 focus:ring-indigo-400 duration-300 transition-all"

These tweaks will improve screen-reader context and ensure keyboard users experience the same interactive feedback.

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

Suggested change
<div className="about-container w-full bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900">
{/* Main Flex Wrapper */}
<div className="flex flex-col lg:flex-row mt-8 items-center justify-around gap-8 px-4">
{/* Image Section */}
<div className="border p-10 sm:p-14 border-indigo-400 rounded-lg shadow-lg hover:scale-105 duration-300 transition-all">
<img className="w-32 sm:w-64 max-w-full h-auto" src="/crl-icon.png" alt="Logo" />
</div>
<div className="about-container w-full bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900">
{/* Main Flex Wrapper */}
<div className="flex flex-col lg:flex-row mt-8 items-center justify-around gap-8 px-4">
{/* Image Section */}
<div className="border p-10 sm:p-14 border-indigo-400 rounded-lg shadow-lg
hover:scale-105 focus:scale-105 focus:outline-none
focus:ring-2 focus:ring-indigo-400 duration-300 transition-all">
<img
className="w-32 sm:w-64 max-w-full h-auto"
src="/crl-icon.png"
alt="CRL Logo"
/>
</div>
🤖 Prompt for AI Agents 
In src/pages/About/About.tsx around lines 3 to 9, update the img alt attribute
from "Logo" to "CRL Logo" to improve accessibility by providing clearer context
for screen readers. Additionally, add keyboard focus styles to the div wrapping
the image by including focus-visible classes (e.g., focus:outline-none
focus:ring-2 focus:ring-indigo-500) in its className to ensure keyboard users
receive the same visual feedback as hover interactions.


{/* Mission Section */}
<section className="mission py-12 text-gray-800 dark:text-gray-100 px-4">
<h2 className="text-3xl font-semibold text-center">Our Mission</h2>
<p className="text-lg text-center mt-4 max-w-3xl mx-auto">
We aim to provide an efficient and user-friendly way to track GitHub
issues and pull requests. Our goal is to make it easy for developers to
stay organized and focused on their projects without getting bogged down
by the details.
</p>
</section>
{/* About & Mission Sections */}
<div className="w-full lg:w-2/3">
<section className="hero text-gray-900 dark:text-white py-10 sm:py-16 px-4 md:px-12 text-center">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold">About Us</h1>
<p className="mt-6 max-w-3xl mx-auto text-base md:text-lg leading-relaxed border border-gray-300 dark:border-gray-600 px-6 py-4 rounded-lg hover:scale-105 transition-all duration-300 shadow-md dark:shadow-gray-800">
Welcome to <span className="font-semibold text-indigo-600 dark:text-indigo-400">GitHub Tracker</span>!
We simplify issue tracking for developers with clean design and powerful tools.
</p>
</section>

<section className="mission py-10 sm:py-16 px-4 md:px-12 text-center text-gray-800 dark:text-white">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold">Our Mission</h2>
<p className="mt-6 max-w-3xl mx-auto text-base md:text-lg leading-relaxed border border-gray-300 dark:border-gray-600 px-6 py-4 rounded-lg hover:scale-105 transition-all duration-300 shadow-md dark:shadow-gray-800">
We aim to provide an efficient and user-friendly way to track GitHub issues and pull requests.
Our goal is to keep developers focused and organized without the hassle.
</p>
</section>
</div>
</div>

{/* Features Section */}
<section className="features bg-gray-100 dark:bg-gray-800 py-12 text-gray-800 dark:text-gray-100 px-4">
<h2 className="text-3xl font-semibold text-center">What We Do</h2>
<div className="flex justify-around mt-8 flex-wrap gap-8">
<div className="feature-item text-center max-w-xs">
<div className="feature-icon text-4xl">🔍</div>
<h3 className="font-semibold mt-4">Simple Issue Tracking</h3>
<p className="text-lg mt-2 dark:text-gray-300">
Track your GitHub issues seamlessly with intuitive filters and search options.
<section className="features py-10 sm:py-16 px-4 md:px-12">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center text-gray-800 dark:text-white">What We Do</h2>
<div className="mt-10 flex flex-col md:flex-row justify-center items-stretch gap-10">
{/* Feature 1 */}
<div className="feature-item flex-1 max-w-sm w-full mx-auto text-center border border-gray-300 dark:border-gray-700 rounded-xl p-6 hover:bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900 dark:to-pink-900 transition-all duration-300 shadow-md dark:shadow-lg">
<div className="text-5xl mb-4">🔍</div>
<h3 className="text-xl font-semibold dark:text-white">Simple Issue Tracking</h3>
<p className="mt-3 text-sm text-gray-700 dark:text-gray-300">
Track GitHub issues with intuitive filters and fast search tools.
</p>
</div>
<div className="feature-item text-center max-w-xs">
<div className="feature-icon text-4xl">👥</div>
<h3 className="font-semibold mt-4">Team Collaboration</h3>
<p className="text-lg mt-2 dark:text-gray-300">
Collaborate with your team in real-time, manage issues and pull requests effectively.

{/* Feature 2 */}
<div className="feature-item flex-1 max-w-sm w-full mx-auto text-center border border-gray-300 dark:border-gray-700 rounded-xl p-6 hover:bg-gradient-to-br from-green-100 to-yellow-100 dark:from-green-900 dark:to-yellow-900 transition-all duration-300 shadow-md dark:shadow-lg">
<div className="text-5xl mb-4">👥</div>
<h3 className="text-xl font-semibold dark:text-white">Team Collaboration</h3>
<p className="mt-3 text-sm text-gray-700 dark:text-gray-300">
Collaborate in real-time with your team and manage pull requests effectively.
</p>
</div>
<div className="feature-item text-center max-w-xs">
<div className="feature-icon text-4xl">⚙️</div>
<h3 className="font-semibold mt-4">Customizable Settings</h3>
<p className="text-lg mt-2 dark:text-gray-300">
Customize your issue tracking workflow to match your team's needs.

{/* Feature 3 */}
<div className="feature-item flex-1 max-w-sm w-full mx-auto text-center border border-gray-300 dark:border-gray-700 rounded-xl p-6 hover:bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 transition-all duration-300 shadow-md dark:shadow-lg">
<div className="text-5xl mb-4">⚙️</div>
<h3 className="text-xl font-semibold dark:text-white">Customizable Settings</h3>
<p className="mt-3 text-sm text-gray-700 dark:text-gray-300">
Tailor your workflow and preferences to fit your team’s needs and goals.
</p>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/pages/Home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,9 +132,10 @@ const Home: React.FC = () => {
color: theme.palette.text.primary,
}}
>
<form onSubmit={handleSubmit}>
<form className="" onSubmit={handleSubmit}>
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
<TextField
className=""
label="GitHub Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
Expand Down