denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine admin dashboard and project management UI with cohesive color palette and improved readability

Browse Source 
- Update background colors and text styles for better contrast and legibility.
- Enhance button styles and hover effects for a more modern look.
- Remove unnecessary scaling effects and adjust border styles for consistency.
- Introduce a cohesive design language across components to improve user experience.
This commit is contained in:
denshooter
2026-01-10 02:40:50 +01:00
parent 7d84d35f09
commit b051d9d2ef
14 changed files with 387 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
components/ProjectManager.tsx
View File

@@ -52,7 +52,6 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState<string>('all');
// Editor is now a separate page - no modal state needed
const categories = ['all', 'Web Development', 'Full-Stack', 'Web Application', 'Mobile App', 'Design'];
@@ -77,10 +76,6 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
}
};
// closeEditor removed - editor is now separate page
// saveProject removed - editor is now separate page
const deleteProject = async (projectId: string) => {
if (!confirm('Are you sure you want to delete this project?')) return;
@@ -100,9 +95,9 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
const getStatusColor = (project: Project) => {
if (project.published) {
return project.featured ? 'text-purple-400 bg-purple-500/20' : 'text-green-400 bg-green-500/20';
return project.featured ? 'text-stone-700 bg-stone-200' : 'text-green-700 bg-green-100';
}
return 'text-yellow-400 bg-yellow-500/20';
return 'text-yellow-700 bg-yellow-100';
};
const getStatusText = (project: Project) => {
@@ -117,20 +112,20 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 className="text-3xl font-bold text-white">Project Management</h1>
<p className="text-white/80">{projects.length} projects • {projects.filter(p => p.published).length} published</p>
<h1 className="text-3xl font-bold text-stone-900">Project Management</h1>
<p className="text-stone-500">{projects.length} projects • {projects.filter(p => p.published).length} published</p>
</div>
<div className="flex items-center space-x-3">
<button
onClick={onProjectsChange}
className="flex items-center space-x-2 px-4 py-2 admin-glass-light rounded-xl hover:scale-105 transition-all duration-200"
className="flex items-center space-x-2 px-4 py-2 bg-stone-100 border border-stone-200 rounded-xl hover:bg-stone-200 transition-all duration-200"
>
<RefreshCw className="w-4 h-4 text-blue-400" />
<span className="text-white font-medium">Refresh</span>
<RefreshCw className="w-4 h-4 text-stone-600" />
<span className="text-stone-700 font-medium">Refresh</span>
</button>
<button
onClick={() => openEditor()}
className="flex items-center space-x-2 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all duration-200 shadow-lg"
className="flex items-center space-x-2 px-6 py-2 bg-stone-900 text-white rounded-xl hover:bg-stone-800 transition-all duration-200 shadow-md"
>
<Plus size={18} />
<span className="font-medium">New Project</span>
@@ -142,13 +137,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
<div className="flex flex-col sm:flex-row gap-4">
{/* Search */}
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/60" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-stone-400" />
<input
type="text"
placeholder="Search projects..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-3 admin-glass-light border border-white/30 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full pl-10 pr-4 py-3 bg-white border border-stone-200 rounded-xl text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400"
/>
</div>
@@ -156,23 +151,23 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
<select
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
className="px-4 py-3 admin-glass-light border border-white/30 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent"
className="px-4 py-3 bg-white border border-stone-200 rounded-xl text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-400"
>
{categories.map(category => (
<option key={category} value={category} className="bg-gray-800">
<option key={category} value={category} className="bg-white text-stone-900">
{category === 'all' ? 'All Categories' : category}
</option>
))}
</select>
{/* View Toggle */}
<div className="flex items-center space-x-1 admin-glass-light rounded-xl p-1">
<div className="flex items-center space-x-1 bg-white border border-stone-200 rounded-xl p-1">
<button
onClick={() => setViewMode('grid')}
className={`p-2 rounded-lg transition-all duration-200 ${
viewMode === 'grid'
? 'bg-blue-500/40 text-blue-300'
: 'text-white/70 hover:text-white hover:bg-white/10'
? 'bg-stone-100 text-stone-900'
: 'text-stone-400 hover:text-stone-900 hover:bg-stone-50'
}`}
>
<Grid className="w-4 h-4" />
@@ -181,8 +176,8 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
onClick={() => setViewMode('list')}
className={`p-2 rounded-lg transition-all duration-200 ${
viewMode === 'list'
? 'bg-blue-500/40 text-blue-300'
: 'text-white/70 hover:text-white hover:bg-white/10'
? 'bg-stone-100 text-stone-900'
: 'text-stone-400 hover:text-stone-900 hover:bg-stone-50'
}`}
>
<List className="w-4 h-4" />
@@ -198,24 +193,24 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
key={project.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="admin-glass-card p-6 rounded-xl hover:scale-105 transition-all duration-300 group"
className="admin-glass-card p-6 rounded-xl hover:shadow-lg transition-all duration-300 group bg-white border border-stone-200"
>
{/* Project Header */}
<div className="flex items-start justify-between mb-4">
<div className="flex-1">
<h3 className="text-xl font-bold text-white mb-1">{project.title}</h3>
<p className="text-white/70 text-sm">{project.category}</p>
<h3 className="text-xl font-bold text-stone-900 mb-1">{project.title}</h3>
<p className="text-stone-500 text-sm">{project.category}</p>
</div>
<div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => openEditor(project)}
className="p-2 text-white/70 hover:text-blue-400 hover:bg-white/10 rounded-lg transition-colors"
className="p-2 text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded-lg transition-colors"
>
<Edit size={16} />
</button>
<button
onClick={() => deleteProject(project.id)}
className="p-2 text-white/70 hover:text-red-400 hover:bg-white/10 rounded-lg transition-colors"
className="p-2 text-stone-500 hover:text-red-600 hover:bg-stone-100 rounded-lg transition-colors"
>
<Trash2 size={16} />
</button>
@@ -225,7 +220,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
{/* Project Content */}
<div className="space-y-4">
<div>
<p className="text-white/70 text-sm line-clamp-2 leading-relaxed">{project.description}</p>
<p className="text-stone-600 text-sm line-clamp-2 leading-relaxed">{project.description}</p>
</div>
{/* Tags */}
@@ -234,13 +229,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
{project.tags.slice(0, 3).map((tag) => (
<span
key={tag}
className="px-2 py-1 bg-white/10 text-white/70 rounded-full text-xs"
className="px-2 py-1 bg-stone-100 text-stone-600 border border-stone-200 rounded-full text-xs"
>
{tag}
</span>
))}
{project.tags.length > 3 && (
<span className="px-2 py-1 bg-white/10 text-white/70 rounded-full text-xs">
<span className="px-2 py-1 bg-stone-100 text-stone-600 border border-stone-200 rounded-full text-xs">
+{project.tags.length - 3}
</span>
)}
@@ -258,7 +253,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="p-1 text-white/60 hover:text-white transition-colors"
className="p-1 text-stone-400 hover:text-stone-900 transition-colors"
>
<Github size={14} />
</a>
@@ -268,7 +263,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
href={project.live}
target="_blank"
rel="noopener noreferrer"
className="p-1 text-white/60 hover:text-white transition-colors"
className="p-1 text-stone-400 hover:text-stone-900 transition-colors"
>
<Globe size={14} />
</a>
@@ -277,18 +272,18 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
</div>
{/* Analytics */}
<div className="grid grid-cols-3 gap-2 pt-3 border-t border-white/10">
<div className="grid grid-cols-3 gap-2 pt-3 border-t border-stone-100">
<div className="text-center">
<p className="text-white font-bold text-sm">{project.analytics?.views || 0}</p>
<p className="text-white/60 text-xs">Views</p>
<p className="text-stone-900 font-bold text-sm">{project.analytics?.views || 0}</p>
<p className="text-stone-500 text-xs">Views</p>
</div>
<div className="text-center">
<p className="text-white font-bold text-sm">{project.analytics?.likes || 0}</p>
<p className="text-white/60 text-xs">Likes</p>
<p className="text-stone-900 font-bold text-sm">{project.analytics?.likes || 0}</p>
<p className="text-stone-500 text-xs">Likes</p>
</div>
<div className="text-center">
<p className="text-white font-bold text-sm">{project.performance?.lighthouse || 90}</p>
<p className="text-white/60 text-xs">Score</p>
<p className="text-stone-900 font-bold text-sm">{project.performance?.lighthouse || 90}</p>
<p className="text-stone-500 text-xs">Score</p>
</div>
</div>
</div>
@@ -302,13 +297,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
key={project.id}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
className="admin-glass-card p-6 rounded-xl hover:scale-[1.01] transition-all duration-300 group"
className="admin-glass-card p-6 rounded-xl hover:shadow-md transition-all duration-300 group bg-white border border-stone-200"
>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="flex-1">
<h3 className="text-white font-bold text-lg">{project.title}</h3>
<p className="text-white/70 text-sm">{project.category}</p>
<h3 className="text-stone-900 font-bold text-lg">{project.title}</h3>
<p className="text-stone-500 text-sm">{project.category}</p>
</div>
</div>
@@ -316,7 +311,7 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(project)}`}>
{getStatusText(project)}
</span>
<div className="flex items-center space-x-3 text-white/60 text-sm">
<div className="flex items-center space-x-3 text-stone-500 text-sm">
<span>{project.analytics?.views || 0} views</span>
<span>•</span>
<span>{new Date(project.updatedAt).toLocaleDateString()}</span>
@@ -324,13 +319,13 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
<div className="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => openEditor(project)}
className="p-2 text-white/70 hover:text-blue-400 hover:bg-white/10 rounded-lg transition-colors"
className="p-2 text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded-lg transition-colors"
>
<Edit size={16} />
</button>
<button
onClick={() => deleteProject(project.id)}
className="p-2 text-white/70 hover:text-red-400 hover:bg-white/10 rounded-lg transition-colors"
className="p-2 text-stone-500 hover:text-red-600 hover:bg-stone-100 rounded-lg transition-colors"
>
<Trash2 size={16} />
</button>
@@ -341,8 +336,6 @@ export const ProjectManager: React.FC<ProjectManagerProps> = ({
))}
</div>
)}
{/* Editor is now a separate page at /editor */}
</div>
);
};