Skip to content

Comprehensive UI improvements with enhanced animations, shadows, and micro-interactions #7

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

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Comprehensive UI improvements with enhanced animations, shadows, and micro-interactions #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0538a0d
Initial plan
Copilot Sep 1, 2025
491a50f
Comprehensive UI improvements with enhanced animations, shadows, and …
Copilot Sep 1, 2025
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
21 changes: 11 additions & 10 deletions frontend/src/components/Layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,21 +90,22 @@ const Layout = ({ setIsAuthenticated }) => {
{/* Theme Toggle */}
<button
onClick={toggleTheme}
className="p-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all duration-300 hover:scale-105"
className="p-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all duration-300 hover:scale-105 hover:shadow-lg active:scale-95 relative overflow-hidden group"
>
<div className="absolute inset-0 bg-gradient-to-r from-primary-500/10 to-secondary-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
{theme === "light" ? (
<Moon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
<Moon className="h-5 w-5 text-gray-600 dark:text-gray-400 relative z-10 group-hover:rotate-12 transition-transform duration-300" />
) : (
<Sun className="h-5 w-5 text-yellow-500" />
<Sun className="h-5 w-5 text-yellow-500 relative z-10 group-hover:rotate-12 transition-transform duration-300" />
)}
</button>

{/* Logout Button */}
<button
onClick={handleLogout}
className="btn-secondary p-2.5"
className="btn-secondary p-2.5 hover:shadow-lg active:scale-95 group"
>
<LogOut className="h-5 w-5" />
<LogOut className="h-5 w-5 group-hover:-rotate-12 transition-transform duration-300" />
<span className="hidden sm:inline-block ml-2">
Logout
</span>
Expand All @@ -129,7 +130,7 @@ const Layout = ({ setIsAuthenticated }) => {
<div className="p-4 flex justify-end">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hidden lg:block transition-all duration-300 p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800"
className="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hidden lg:block transition-all duration-300 p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 hover:scale-110 active:scale-95"
>
{isExpanded ? (
<ChevronLeft size={20} />
Expand All @@ -144,19 +145,19 @@ const Layout = ({ setIsAuthenticated }) => {
key={index}
to={item.path}
className={({ isActive }) => `
group w-full flex items-center px-4 py-4 mb-2 relative transition-all duration-300 rounded-xl
group w-full flex items-center px-4 py-4 mb-2 relative transition-all duration-300 rounded-xl hover:shadow-lg hover:-translate-y-0.5
${
isActive
? "bg-gradient-to-r from-primary-500/10 to-secondary-500/10 text-primary-600 dark:text-primary-400 border-l-4 border-primary-600"
? "bg-gradient-to-r from-primary-500/10 to-secondary-500/10 text-primary-600 dark:text-primary-400 border-l-4 border-primary-600 shadow-lg"
: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white"
}
`}
>
<div
className={`relative transition-transform duration-300 group-hover:scale-110`}
className={`relative transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6`}
>
<item.icon size={20} />
<span className="absolute -top-1 -right-1 h-2 w-2 bg-gradient-to-r from-primary-600 to-secondary-600 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span className="absolute -top-1 -right-1 h-2 w-2 bg-gradient-to-r from-primary-600 to-secondary-600 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg shadow-primary-500/50"></span>
</div>
{isExpanded ? (
<span className="ml-4 font-medium">
Expand Down
20 changes: 16 additions & 4 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,37 @@

@layer components {
.btn-primary {
@apply inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-700 hover:to-secondary-700 text-white font-medium rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl hover:shadow-primary-500/25 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none;
@apply inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-700 hover:to-secondary-700 text-white font-medium rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl hover:shadow-primary-500/30 transform hover:scale-105 hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none active:scale-95;
}

.btn-secondary {
@apply inline-flex items-center justify-center px-6 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 font-medium rounded-xl transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
@apply inline-flex items-center justify-center px-6 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 font-medium rounded-xl transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 active:scale-95;
}

.card {
@apply bg-white dark:bg-gray-800 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl shadow-xl shadow-primary-500/10 dark:shadow-primary-500/5 transition-all duration-300;
@apply bg-white dark:bg-gray-800 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl shadow-xl shadow-primary-500/10 dark:shadow-primary-500/5 transition-all duration-300 hover:shadow-2xl hover:shadow-primary-500/15 hover:-translate-y-1;
}

.input-field {
@apply w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl focus:bg-white dark:focus:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-300 outline-none text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400;
@apply w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl focus:bg-white dark:focus:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-300 outline-none text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 hover:border-gray-300 dark:hover:border-gray-600;
}

.gradient-text {
@apply bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent;
}

.feature-card {
@apply card p-8 cursor-pointer hover:border-primary-200 dark:hover:border-primary-800 hover:bg-gradient-to-br hover:from-primary-50/50 dark:hover:from-primary-900/20 hover:to-transparent;
}

.stat-card {
@apply text-center;
}

.step-card {
@apply text-center p-8 rounded-2xl bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-700;
}

.bg-pattern {
background-image: radial-gradient(
circle at 1px 1px,
Expand Down
34 changes: 18 additions & 16 deletions frontend/src/pages/Dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,38 +191,39 @@ const Dashboard = () => {
Array.from({ length: 4 }).map((_, index) => (
<div key={index} className="card p-6 animate-pulse">
<div className="flex items-center justify-between mb-4">
<div className="w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
<div className="w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-xl animate-shimmer"></div>
</div>
<div className="space-y-2">
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
<div className="h-6 bg-gray-300 dark:bg-gray-600 rounded w-1/2"></div>
<div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-2/3"></div>
<div className="space-y-3">
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 animate-shimmer"></div>
<div className="h-6 bg-gray-300 dark:bg-gray-600 rounded w-1/2 animate-shimmer"></div>
<div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-2/3 animate-shimmer"></div>
</div>
</div>
))
: stats.map((stat, index) => (
<div
key={index}
className="card p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
className="card p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group animate-fade-in-scale"
style={{ animationDelay: `${index * 0.1}s` }}
>
<div className="flex items-center justify-between mb-4">
<div
className={`p-3 bg-${stat.color}-100 dark:bg-${stat.color}-900/20 rounded-xl`}
className={`p-3 bg-${stat.color}-100 dark:bg-${stat.color}-900/20 rounded-xl group-hover:scale-110 transition-transform duration-300 shadow-lg group-hover:shadow-xl`}
>
<stat.icon
className={`h-6 w-6 text-${stat.color}-600 dark:text-${stat.color}-400`}
className={`h-6 w-6 text-${stat.color}-600 dark:text-${stat.color}-400 group-hover:rotate-6 transition-transform duration-300`}
/>
</div>
</div>
<div>
<p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">
<p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1 uppercase tracking-wider">
{stat.title}
</p>
<p className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
<p className="text-2xl font-bold text-gray-900 dark:text-white mb-1 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300">
{stat.value}
</p>
<p
className={`text-sm ${
className={`text-sm font-medium ${
stat.trend === "up"
? "text-green-600 dark:text-green-400"
: stat.trend === "building"
Expand Down Expand Up @@ -260,19 +261,20 @@ const Dashboard = () => {
recentProjects.map((project, index) => (
<div
key={index}
className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors cursor-pointer"
className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-all duration-300 cursor-pointer group hover:shadow-lg hover:-translate-y-0.5 animate-slide-in-up"
style={{ animationDelay: `${index * 0.1}s` }}
>
<div className="flex items-center gap-4">
<div className="p-2 bg-primary-100 dark:bg-primary-900/20 rounded-lg">
<Activity className="h-5 w-5 text-primary-600 dark:text-primary-400" />
<div className="p-2 bg-primary-100 dark:bg-primary-900/20 rounded-lg group-hover:scale-110 transition-transform duration-300 shadow-sm group-hover:shadow-md">
<Activity className="h-5 w-5 text-primary-600 dark:text-primary-400 group-hover:rotate-12 transition-transform duration-300" />
</div>
<div>
<h3 className="font-medium text-gray-900 dark:text-white">
<h3 className="font-medium text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300">
{project.name}
</h3>
<div className="flex items-center gap-4 mt-1">
<span
className={`text-xs px-2 py-1 rounded-full font-medium ${
className={`text-xs px-2 py-1 rounded-full font-medium transition-transform duration-300 group-hover:scale-105 ${
project.status === "Active"
? "bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400"
: "bg-yellow-100 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400"
Expand Down
Loading