Skip to content

fix: Resolve UI inconsistencies and formatting bugs #203

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

Merged
Annanyatiwary4 merged 1 commit into from
Oct 28, 2025
Merged

fix: Resolve UI inconsistencies and formatting bugs #203

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
4 changes: 2 additions & 2 deletions frontend/src/Components/DashBoard/PomodoroTimer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useContext } from "react";
import Navbar from "../Navbar/Navbar";
import ThemeContext from "../ui/theme-provider.jsx";
import { useTimer } from "../../context/TimerContext.jsx";
import Topbar from './Topbar';

// Circular Timer Component
function CircularTimer({ value, max, label, size = 140, isDarkMode }) {
Expand Down Expand Up @@ -88,7 +88,7 @@ export default function PomodoroTimer() {

return (
<div className={`min-h-screen flex flex-col transition-colors duration-500 ${isDarkMode ? "bg-[#232b34] text-white" : "bg-gradient-to-br from-blue-100 to-white text-black"}`}>
<Navbar />
<Topbar/>
<div className="flex flex-col items-center justify-center flex-1 px-4 py-6">
<h1 className="text-3xl md:text-4xl font-bold mb-10">
{sessionLabels[sessionType]}
Expand Down
246 changes: 138 additions & 108 deletions frontend/src/Components/Navbar/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
Phone,
HelpCircle,
X,
LayoutDashboard, // Make sure this is imported
} from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
import { FloatingNav } from "../ui/floating-navbar";
Expand All @@ -19,73 +20,85 @@ const publicNavItems = [
{ name: "Home", link: "/", icon: <Home className="h-4 w-4" /> },
{ name: "Features", link: "#features", icon: <Sparkle className="h-4 w-4" /> },
{ name: "About us", link: "#about", icon: <Info className="h-4 w-4" /> },
{ name: "Github", link: "https://github.com/DevSyncx/DevSync.git", icon: <Github className="h-4 w-4" /> },
{
name: "Github",
link: "https://github.com/DevSyncx/DevSync.git",
icon: <Github className="h-4 w-4" />,
},
{ name: "Contact Us", link: "#contact", icon: <Phone className="h-4 w-4" /> },
{ name: "FAQ", link: "#faq", icon: <HelpCircle className="h-4 w-4" /> },
];

const authenticatedNavItems = [
{ name: "Dashboard", link: "/dashboard", icon: <LayoutDashboard className="h-4 w-4" /> },
{ name: "Profile", link: "/profile", icon: <UserCircle className="h-4 w-4" /> },
{ name: "Timer", link: "/pomodoro", icon: <Clock className="h-4 w-4" /> },
];


// --- Mobile Navigation Overlay Component (defined in the same file) ---
const MobileNavOverlay = ({ isOpen, onClose, navItems, isAuthenticated, handleLogout }) => {
const overlayClasses = `mobile-nav-overlay ${isOpen ? "open" : ""}`;
const overlayClasses = `mobile-nav-overlay ${isOpen ? "open" : ""}`;

const handleLinkClick = () => {
onClose();
};

const handleLogoutClick = () => {
handleLogout();
onClose();
}

return (
<div className={overlayClasses}>
<button onClick={onClose} className="absolute top-8 right-8 text-foreground">
<X size={32} />
</button>
<nav className="flex flex-col items-center justify-center h-full">
<ul>
{!isAuthenticated ? (
navItems.map((item) => (
<li key={item.name}>
<a href={item.link} onClick={handleLinkClick}>
{item.name}
</a>
</li>
))
) : (
<>
<li>
<Link to="/profile" onClick={handleLinkClick}>
Profile
</Link>
</li>
{/* Add other authenticated links here */}
</>
)}
</ul>
</nav>
const handleLinkClick = () => {
onClose();
};

const handleLogoutClick = () => {
handleLogout();
onClose();
}

<div className="mobile-nav-footer">
return (
<div className={overlayClasses}>
<button onClick={onClose} className="absolute top-8 right-8 text-foreground">
<X size={32} />
</button>
<nav className="flex flex-col items-center justify-center h-full">
<ul>
{!isAuthenticated ? (
<>
<Link to="/register" className="w-full">
<button onClick={handleLinkClick} className="signup-btn-mobile">
Sign Up
</button>
</Link>
<DarkModeToggle />
</>
navItems.map((item) => (
<li key={item.name}>
<a href={item.link} onClick={handleLinkClick}>
{item.name}
</a>
</li>
))
) : (
<>
<button onClick={handleLogoutClick} className="logout-btn-mobile">
Logout
</button>
<DarkModeToggle />
</>
// --- MODIFIED SECTION: Use authenticatedNavItems for mobile menu ---
authenticatedNavItems.map((item) => (
<li key={item.name}>
<Link to={item.link} onClick={handleLinkClick}>
{item.name}
</Link>
</li>
))
// --- END OF MODIFIED SECTION ---
)}
</div>
</ul>
</nav>

<div className="mobile-nav-footer">
{!isAuthenticated ? (
<>
<Link to="/register" className="w-full">
<button onClick={handleLinkClick} className="signup-btn-mobile">
Sign Up
</button>
</Link>
<DarkModeToggle />
</>
) : (
<>
<button onClick={handleLogoutClick} className="logout-btn-mobile">
Logout
</button>
<DarkModeToggle />
</>
)}
</div>
);
</div>
);
};


Expand Down Expand Up @@ -162,57 +175,70 @@ const Navbar = () => {
</Link>

<nav className="hidden lg:flex space-x-6 lg:space-x-8 items-center">
{!isAuthenticated &&
publicNavItems.map((item) => (
<a
key={item.name}
href={item.link}
className="relative text-[15px] md:text-[16px] lg:text-[17px] font-medium transition-all duration-300 group flex items-center gap-2 hover:pb-1"
style={{ color: "var(--card-foreground)" }}
>
{item.icon} <span>{item.name}</span>
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
</a>
))}
{/* --- Public Nav Items --- */}
{!isAuthenticated &&
publicNavItems.map((item) => (
<a
key={item.name}
href={item.link}
className="relative text-[15px] md:text-[16px] lg:text-[17px] font-medium transition-all duration-300 group flex items-center gap-2 hover:pb-1"
style={{ color: "var(--card-foreground)" }}
>
{item.icon} <span>{item.name}</span>
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
</a>
))}

{/* --- MODIFIED SECTION: Authenticated Nav Items --- */}
{/* We now map over authenticatedNavItems instead of hardcoding 'Profile' */}
{isAuthenticated &&
authenticatedNavItems.map((item) => (
<Link
key={item.name}
to={item.link}
className="relative text-[15px] md:text-[16px] lg:text-[17px] font-medium transition-all duration-300 group flex items-center gap-2 hover:pb-1"
style={{ color: "var(--card-foreground)" }}
>
{item.icon} <span>{item.name}</span>
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
</Link>
))}
{/* --- END OF MODIFIED SECTION --- */}

{isAuthenticated && isRunning && (
<div
onClick={() => navigate("/pomodoro")}
className="flex items-center gap-2 cursor-pointer px-3 py-1 rounded-lg transition-all duration-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:shadow-md hover:shadow-[var(--primary)]/30"
>
<Clock className="w-5 h-5 text-blue-500 animate-pulse" />
<span className="text-sm font-mono">{displayTime}</span>
</div>
)}

{isAuthenticated ? (
<div className="flex items-center gap-3 ml-4">
<Link
to="/profile"
className="flex items-center gap-2 text-[16px] lg:text-[17px] font-medium relative group"
style={{ color: "var(--primary)" }}
>
<UserCircle className="h-4 w-4" /> <span>Profile</span>
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
</Link>
<button
onClick={handleLogout}
className="text-[16px] lg:text-[17px] font-medium text-red-500 transition-colors duration-300 hover:text-red-600"
>
Logout
</button>
<DarkModeToggle />
</div>
) : (
<div className="flex items-center gap-3 ml-4">
<Link to="/register">
<button className="px-4 md:px-5 lg:px-6 py-2 rounded-md font-semibold bg-[var(--primary)] text-[var(--primary-foreground)] shadow-md transition-transform duration-300 hover:scale-105 hover:shadow-lg cursor-pointer text-sm md:text-base">
Sign Up
</button>
</Link>
<DarkModeToggle />
</div>
)}
{/* --- Timer Display --- */}
{isAuthenticated && isRunning && (
<div
onClick={() => navigate("/pomodoro")}
className="flex items-center gap-2 cursor-pointer px-3 py-1 rounded-lg transition-all duration-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:shadow-md hover:shadow-[var(--primary)]/30"
>
<Clock className="w-5 h-5 text-blue-500 animate-pulse" />
<span className="text-sm font-mono">{displayTime}</span>
</div>
)}

{/* --- Auth/Public Buttons --- */}
{isAuthenticated ? (
<div className="flex items-center gap-3 ml-4">
{/* The Profile link is now part of the map above */}
<button
onClick={handleLogout}
className="text-[16px] lg:text-[17px] font-medium text-red-500 transition-colors duration-300 hover:text-red-600"
>
Logout
</button>
<DarkModeToggle />
</div>
) : (
<div className="flex items-center gap-3 ml-4">
<Link to="/register">
<button className="px-4 md:px-5 lg:px-6 py-2 rounded-md font-semibold bg-[var(--primary)] text-[var(--primary-foreground)] shadow-md transition-transform duration-300 hover:scale-105 hover:shadow-lg cursor-pointer text-sm md:text-base">
Sign Up
</button>
</Link>
<DarkModeToggle />
</div>
)}
</nav>

<div className="lg:hidden">
Expand Down Expand Up @@ -244,17 +270,21 @@ const Navbar = () => {
<MobileNavOverlay
isOpen={menuOpen}
onClose={() => setMenuOpen(false)}
navItems={publicNavItems}
navItems={publicNavItems} // This is correct, MobileNavOverlay handles auth logic internally
isAuthenticated={isAuthenticated}
handleLogout={handleLogout}
/>

{/* This part was already correct from our last change */}
{showFloating && (
<FloatingNav navItems={!isAuthenticated ? publicNavItems : []} />
<FloatingNav
navItems={isAuthenticated ? authenticatedNavItems : publicNavItems}
isAuthenticated={isAuthenticated}
handleLogout={handleLogout}
/>
)}
</div>
);
};

export default Navbar;

export default Navbar;
8 changes: 4 additions & 4 deletions frontend/src/Components/profile/Profile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,8 @@ const SuccessPopup = ({ isVisible, onClose, userName }) => {

<h3 className="text-3xl font-bold text-primary">Success!</h3>
<p className="text-lg text-foreground/90">
**{userName || "Your profile"}** has been **updated
successfully**.
<strong>{userName || "Your profile"}</strong> has been{" "}
<strong>updated successfully</strong>.
</p>
<p className="text-muted-foreground text-sm">
Your changes are now live and visible to the community.
Expand Down Expand Up @@ -590,7 +590,7 @@ const Profile = () => {
return (
// Outer Container: Full Viewport Height
<div className="h-screen w-full bg-background flex flex-col">
<div className="w-max">
<div className="w-max">
<BackButton />
</div>
{/* Success Popup */}
Expand Down Expand Up @@ -1162,4 +1162,4 @@ const Profile = () => {
);
};

export default Profile;
export default Profile;
Loading
Loading