Skip to content

Commit 83702d7

Browse files
fezcodefezcode
committed
refactor: fezzila
1 parent 55ee7c0 commit 83702d7

File tree

6 files changed

+228
-229
lines changed

6 files changed

+228
-229
lines changed

‎public/images/asset/og-settings.png‎

-105 KB
Binary file not shown.

‎src/components/roadmap/RoadmapCard.js‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import { Link } from 'react-router-dom';
33
import { motion } from 'framer-motion';
44
import {
5-
KanbanIcon,
65
Lightning,
76
Circle,
87
ArrowsClockwise,
@@ -54,59 +53,53 @@ const RoadmapCard = ({ app, index }) => {
5453
>
5554
<Link to={`/roadmap/${app.id}`} className="block group relative h-full">
5655
{/* Main Card Container */}
57-
<div className="relative flex flex-col h-full bg-gray-900/80 backdrop-blur-xl border border-gray-800 rounded-xl p-4 overflow-hidden group-hover:border-primary-500 transition-all duration-300 shadow-xl">
56+
<div className="relative flex flex-col h-full bg-zinc-950 border border-white/5 p-5 rounded-sm overflow-hidden group-hover:border-emerald-500/50 transition-all duration-500">
5857
{/* Subtle Grid Background */}
5958
<div
60-
className="absolute inset-0 opacity-[0.03] pointer-events-none z-0"
59+
className="absolute inset-0 opacity-[0.02] pointer-events-none z-0 grayscale"
6160
style={{
6261
backgroundImage:
6362
'linear-gradient(to right, #ffffff 1px, transparent 1px), linear-gradient(to bottom, #ffffff 1px, transparent 1px)',
64-
backgroundSize: '20px 20px',
63+
backgroundSize: '16px 16px',
6564
}}
6665
></div>
67-
{/* Watermark Icon */}
68-
<div className="absolute -bottom-6 -right-6 text-gray-700 opacity-20 group-hover:opacity-30 group-hover:scale-110 transition-all duration-500 rotate-12 pointer-events-none z-0">
69-
<KanbanIcon size={120} weight="fill" />
70-
</div>
7166

7267
{/* Content */}
73-
<div className="relative z-10 flex-grow">
74-
<div className="flex items-center justify-between mb-3 gap-2">
68+
<div className="relative z-10 flex-grow space-y-4">
69+
<div className="flex flex-wrap items-center gap-2">
7570
<span
76-
className={`px-2 py-0.5 inline-flex items-center gap-1.5 text-[10px] font-mono font-bold uppercase tracking-wider rounded-md shadow-sm ${getStatusClasses(app.status || 'Planned')}`}
71+
className={`px-2 py-0.5 inline-flex items-center gap-1.5 text-[9px] font-mono font-black uppercase tracking-widest border rounded-sm ${getStatusClasses(app.status || 'Planned')}`}
7772
>
7873
{getStatusIcon(app.status || 'Planned')}
7974
{app.status || 'Planned'}
8075
</span>
8176
<span
82-
className={`px-2 py-0.5 inline-flex items-center gap-1.5 text-[10px] font-mono font-bold uppercase tracking-wider rounded-md shadow-sm ${getPriorityClasses(app.priority || 'Low')}`}
77+
className={`px-2 py-0.5 inline-flex items-center gap-1.5 text-[9px] font-mono font-black uppercase tracking-widest border rounded-sm ${getPriorityClasses(app.priority || 'Low')}`}
8378
>
8479
{getPriorityIcon(app.priority || 'Low')}
8580
{app.priority || 'Low'}
8681
</span>
8782
</div>
8883

8984
{app.epic && (
90-
<div className="mb-3 inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-purple-500/20 border border-purple-500/50 text-purple-300 text-[10px] font-mono uppercase tracking-wider font-bold w-fit">
91-
<Lightning weight="fill" size={12} />
85+
<div className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-sm bg-purple-500/5 border border-purple-500/20 text-purple-400 text-[9px] font-mono uppercase tracking-[0.2em] font-black">
86+
<Lightning weight="fill" size={10} />
9287
{app.epic}
9388
</div>
9489
)}
9590

96-
<h4 className="text-xl font-bold font-mono text-white mb-2 tracking-tight group-hover:text-primary-400 transition-colors">
91+
<h4 className="text-lg font-bold font-sans uppercase text-white tracking-tight group-hover:text-emerald-400 transition-colors leading-tight">
9792
{app.title}
9893
</h4>
99-
<p className="text-gray-400 font-mono text-sm leading-relaxed line-clamp-3">
94+
<p className="text-gray-500 font-sans text-xs leading-relaxed line-clamp-2">
10095
{app.description}
10196
</p>
10297
</div>
10398

10499
{app.notes && (
105-
<div className="relative z-10 mt-4 bg-black/20 rounded-lg p-3 border border-white/5">
106-
<p className="text-gray-500 text-xs italic line-clamp-2 font-mono">
107-
<span className="font-bold text-gray-400 not-italic mr-2">
108-
NOTE:
109-
</span>
100+
<div className="relative z-10 mt-6 pt-4 border-t border-white/5">
101+
<p className="text-[10px] font-mono text-gray-600 line-clamp-1 uppercase tracking-widest">
102+
<span className="text-emerald-500/50 font-black mr-2">LOG:</span>
110103
{app.notes}
111104
</p>
112105
</div>

‎src/components/roadmap/RoadmapView.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,27 +41,28 @@ const RoadmapView = ({ issuesData = [] }) => {
4141
return (
4242
<div
4343
key={status}
44-
className="bg-gray-900/70 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-gray-800"
44+
className="bg-white/[0.02] border border-white/10 p-6 rounded-sm space-y-8"
4545
>
46-
<h3 className={`mb-4 flex items-center justify-between`}>
46+
<h3 className={`flex items-center justify-between border-b border-white/5 pb-4`}>
4747
<span
48-
className={`inline-flex items-center gap-2 px-3 py-1 rounded-lg text-sm font-mono font-bold uppercase tracking-wider ${getStatusClasses(status)}`}
48+
className={`inline-flex items-center gap-2 text-[10px] font-mono font-black uppercase tracking-[0.2em] ${getStatusClasses(status)}`}
4949
>
50+
<span className="h-1.5 w-1.5 rounded-full bg-current" />
5051
{status}
51-
<span className="opacity-70">
52-
({groupIssues[status]?.length || 0})
52+
<span className="text-gray-600 font-normal">
53+
[{groupIssues[status]?.length || 0}]
5354
</span>
5455
</span>
5556
<button
5657
onClick={() => toggleColumnVisibility(status)}
57-
className="text-gray-400 hover:text-white transition-colors"
58+
className="text-gray-700 hover:text-white transition-colors"
5859
title={isHidden ? 'Show column' : 'Hide column'}
5960
>
60-
{isHidden ? <EyeSlashIcon size={20} /> : <EyeIcon size={20} />}
61+
{isHidden ? <EyeSlashIcon size={16} weight="bold" /> : <EyeIcon size={16} weight="bold" />}
6162
</button>
6263
</h3>
6364
{!isHidden && (
64-
<div className="space-y-4">
65+
<div className="space-y-6">
6566
{groupIssues[status]?.map((app, appIndex) => (
6667
<RoadmapCard key={app.id} app={app} index={appIndex} />
6768
))}

0 commit comments

Comments
 (0)