Skip to content

Commit c7899dd

Browse files
fezcodefezcode
committed
fix: reimagined achievements page colors.
1 parent 5e18e7f commit c7899dd

File tree

1 file changed

+101
-56
lines changed

1 file changed

+101
-56
lines changed

‎src/pages/AchievementsPage.js‎

Lines changed: 101 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import {
99
FunnelIcon,
1010
XCircle,
1111
CalendarBlank,
12+
Leaf, // Added a leaf icon for flavor if needed, or stick to Trophy
1213
} from '@phosphor-icons/react';
1314
import useSeo from '../hooks/useSeo';
1415
import { useAchievements } from '../context/AchievementContext';
1516
import { ACHIEVEMENTS } from '../config/achievements';
16-
// import colors from '../config/colors'; // Unused in this snippet, but kept if you need it elsewhere
1717

1818
const AchievementsPage = () => {
1919
useSeo({
@@ -32,13 +32,11 @@ const AchievementsPage = () => {
3232
const { unlockedAchievements, showAchievementToast } = useAchievements();
3333
const [selectedCategories, setSelectedCategories] = useState([]);
3434

35-
// Extract unique categories for filter pills
3635
const uniqueCategories = [
3736
'All',
3837
...new Set(ACHIEVEMENTS.map((ach) => ach.category)),
3938
].sort();
4039

41-
// Calculate progress
4240
const unlockedCount = Object.keys(unlockedAchievements).filter(
4341
(key) => unlockedAchievements[key].unlocked,
4442
).length;
@@ -69,154 +67,201 @@ const AchievementsPage = () => {
6967
});
7068

7169
return (
72-
<div className="py-16 sm:py-24 bg-gray-950">
70+
// Changed main background to stone-950 for an earthy dark feel
71+
<div className="py-16 sm:py-24 bg-stone-950 min-h-screen">
7372
<div className="mx-auto max-w-7xl px-6 lg:px-8">
74-
{/* Header Section - Kept mostly the same for consistency */}
73+
74+
{/* Navigation */}
7575
<Link
7676
to="/"
77-
className="group text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4 transition-all"
77+
className="group text-emerald-500 hover:text-emerald-400 flex items-center justify-center gap-2 text-lg mb-4 transition-all"
7878
>
7979
<ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1" />{' '}
8080
Back to Home
8181
</Link>
82+
83+
{/* Title Section */}
8284
<div className="mx-auto max-w-2xl text-center relative z-10">
83-
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl flex flex-col sm:flex-row items-center justify-center gap-4">
85+
<h1 className="text-4xl font-bold tracking-tight text-stone-100 sm:text-6xl flex flex-col sm:flex-row items-center justify-center gap-4">
8486
<div className="relative">
85-
<div className="absolute inset-0 bg-yellow-500 blur-2xl opacity-20 rounded-full"></div>
86-
<Trophy size={56} weight="duotone" className="text-yellow-400 relative z-10 drop-shadow-[0_0_10px_rgba(234,179,8,0.5)]" />
87+
{/* Nature Glow behind Trophy */}
88+
<div className="absolute inset-0 bg-emerald-500 blur-2xl opacity-20 rounded-full"></div>
89+
<Trophy size={56} weight="duotone" className="text-emerald-400 relative z-10 drop-shadow-[0_0_15px_rgba(52,211,153,0.4)]" />
8790
</div>
8891
Achievements
8992
</h1>
90-
<p className="mt-6 text-lg leading-8 text-gray-300">
91-
Discover hidden features and explore the depths of Fezcodex.
93+
<p className="mt-6 text-lg leading-8 text-stone-400">
94+
Discover the wild secrets hidden within Fezcodex.
9295
</p>
9396

94-
{/* Filters & Progress section (Kept identical to your code) */}
97+
{/* Filter Pills - Nature Themed */}
9598
<div className="flex flex-wrap items-center justify-center gap-2 mt-8 max-w-2xl mx-auto">
96-
<div className="flex items-center gap-2 mr-2 text-gray-500 font-mono text-sm">
99+
<div className="flex items-center gap-2 mr-2 text-stone-500 font-mono text-sm">
97100
<FunnelIcon size={16} />
98101
<span>Filter:</span>
99102
</div>
100103
{uniqueCategories.map((category) => {
101104
const isSelected = selectedCategories.includes(category) || (category === 'All' && selectedCategories.length === 0);
102-
const colorClass = isSelected ? 'bg-yellow-500/20 text-yellow-300 border-yellow-500/50' : 'bg-gray-900/50 text-gray-400 border-gray-700 hover:border-gray-500 hover:text-gray-200';
105+
// Stone/Emerald Logic for pills
106+
const colorClass = isSelected
107+
? 'bg-emerald-900/40 text-emerald-300 border-emerald-500/50 shadow-[0_0_10px_rgba(16,185,129,0.2)]'
108+
: 'bg-stone-900/50 text-stone-500 border-stone-800 hover:border-stone-600 hover:text-stone-300';
103109
return (
104-
<button key={category} onClick={() => toggleCategory(category)} className={`px-3 py-1 rounded-full text-sm font-medium border transition-colors duration-200 ${colorClass}`}>
110+
<button
111+
key={category}
112+
onClick={() => toggleCategory(category)}
113+
className={`px-3 py-1 rounded-full text-sm font-medium border transition-colors duration-200 ${colorClass}`}
114+
>
105115
{category}
106116
</button>
107117
);
108118
})}
119+
109120
{selectedCategories.length > 0 && (
110-
<button onClick={clearFilters} className="ml-2 text-sm text-red-400 hover:text-red-300 flex items-center gap-1 transition-colors">
121+
<button
122+
onClick={clearFilters}
123+
className="ml-2 text-sm text-red-400 hover:text-red-300 flex items-center gap-1 transition-colors"
124+
>
111125
<XCircle size={20} /> Clear
112126
</button>
113127
)}
114128
</div>
115129

130+
{/* Progress Bar - Nature Themed */}
116131
<div className="mt-8 max-w-md mx-auto">
117-
<div className="flex justify-between text-sm text-gray-400 mb-2">
118-
<span>Progress</span>
119-
<span>{unlockedCount} / {totalCount}</span>
132+
<div className="flex justify-between text-sm text-stone-400 mb-2">
133+
<span>Nature's Progress</span>
134+
<span>
135+
{unlockedCount} / {totalCount}
136+
</span>
120137
</div>
121-
<div className="w-full bg-gray-800 rounded-full h-4 overflow-hidden border border-gray-700 shadow-inner">
122-
<div className="bg-gradient-to-r from-yellow-600 to-yellow-300 h-4 rounded-full transition-all duration-1000 ease-out shadow-[0_0_10px_rgba(234,179,8,0.5)]" style={{ width: `${progressPercentage}%` }}></div>
138+
<div className="w-full bg-stone-900 rounded-full h-4 overflow-hidden border border-stone-800 shadow-inner">
139+
<div
140+
// Gradient from deep green to bright teal
141+
className="bg-gradient-to-r from-emerald-700 via-teal-500 to-emerald-400 h-4 rounded-full transition-all duration-1000 ease-out shadow-[0_0_10px_rgba(52,211,153,0.4)]"
142+
style={{ width: `${progressPercentage}%` }}
143+
></div>
123144
</div>
124-
{/* Achievement Toast Status (Kept identical) */}
125-
<div className={`mt-8 flex items-center gap-4 p-4 rounded-xl border backdrop-blur-sm transition-all duration-300 shadow-lg ${showAchievementToast ? 'bg-emerald-900/20 border-emerald-500/30 text-emerald-100 shadow-emerald-900/10' : 'bg-rose-900/20 border-rose-500/30 text-rose-100 shadow-rose-900/10'}`}>
126-
<div className={`p-2.5 rounded-full shrink-0 ${showAchievementToast ? 'bg-emerald-500/20 text-emerald-400' : 'bg-rose-500/20 text-rose-400'}`}>
127-
{showAchievementToast ? (<Info size={24} weight="duotone" />) : (<BellSlash size={24} weight="duotone" />)}
145+
146+
{/* Notification Toast Status - Keeping colors functional but tweaking background */}
147+
<div
148+
className={`mt-8 flex items-center gap-4 p-4 rounded-xl border backdrop-blur-sm transition-all duration-300 shadow-lg ${
149+
showAchievementToast
150+
? 'bg-teal-950/30 border-teal-500/30 text-teal-100 shadow-teal-900/10'
151+
: 'bg-stone-800/20 border-stone-700/30 text-stone-300 shadow-stone-900/10'
152+
}`}
153+
>
154+
<div
155+
className={`p-2.5 rounded-full shrink-0 ${
156+
showAchievementToast
157+
? 'bg-teal-500/20 text-teal-400'
158+
: 'bg-stone-500/20 text-stone-400'
159+
}`}
160+
>
161+
{showAchievementToast ? (
162+
<Info size={24} weight="duotone" />
163+
) : (
164+
<BellSlash size={24} weight="duotone" />
165+
)}
128166
</div>
129167
<div className="flex-1 text-left">
130-
<p className="font-medium text-sm tracking-wide">ACHIEVEMENT NOTIFICATIONS ARE <span className="font-bold">{showAchievementToast ? 'ACTIVE' : 'MUTED'}</span></p>
131-
<p className={`text-xs mt-1 ${showAchievementToast ? 'text-emerald-400/80' : 'text-rose-400/80'}`}>You can toggle these popups in the <Link to="/settings" className="underline underline-offset-2 hover:text-white transition-colors">Settings</Link>.</p>
168+
<p className="font-medium text-sm tracking-wide">
169+
NOTIFICATIONS: <span className="font-bold">{showAchievementToast ? 'ACTIVE' : 'MUTED'}</span>
170+
</p>
171+
<p className={`text-xs mt-1 ${showAchievementToast ? 'text-teal-400/70' : 'text-stone-500'}`}>
172+
Manage in <Link to="/settings" className="underline underline-offset-2 hover:text-white transition-colors">Settings</Link>.
173+
</p>
132174
</div>
133175
</div>
134176
</div>
135177
</div>
136178

137-
{/* NEW CARDS GRID */}
179+
{/* Cards Grid */}
138180
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-16">
139181
{filteredAchievements.map((achievement) => {
140182
const isUnlocked = unlockedAchievements[achievement.id]?.unlocked;
141-
const unlockedDate = isUnlocked ? new Date(unlockedAchievements[achievement.id].unlockedAt) : null;
183+
const unlockedDate = isUnlocked
184+
? new Date(unlockedAchievements[achievement.id].unlockedAt)
185+
: null;
142186

143187
return (
144188
<div
145189
key={achievement.id}
146-
// Container defining shape, height, and base hover movement
147190
className={`relative group flex flex-col h-full overflow-hidden rounded-2xl border transition-all duration-500 ease-out ${
148191
isUnlocked
149-
? 'border-yellow-600/40 hover:-translate-y-2 hover:shadow-[0_10px_30px_-10px_rgba(234,179,8,0.5)]'
150-
: 'border-gray-800 bg-gray-900/50 grayscale opacity-70 hover:opacity-100 hover:border-gray-700'
192+
? 'border-emerald-500/30 hover:-translate-y-2 hover:shadow-[0_15px_40px_-10px_rgba(16,185,129,0.3)]'
193+
: 'border-stone-800 bg-stone-900/50 grayscale opacity-70 hover:opacity-100 hover:border-stone-700'
151194
}`}
152195
>
153-
{/* Dynamic Background Layer */}
196+
{/* Card Background */}
154197
<div
155198
className={`absolute inset-0 z-0 transition-all duration-500 ${
156199
isUnlocked
157-
? 'bg-gradient-to-br from-yellow-900/30 via-gray-950 to-black opacity-100 group-hover:opacity-100'
158-
// Subtle radial glow that follows mouse could go here, but keeping it simple for now
159-
: 'bg-gray-950'
200+
// A deep forest gradient
201+
? 'bg-gradient-to-br from-emerald-950/80 via-stone-950 to-stone-950 opacity-100'
202+
: 'bg-stone-950'
160203
}`}
161204
>
162-
{/* Subtle decorative pattern for unlocked cards */}
205+
{/* Unlocked "Magical Spores" overlay pattern */}
163206
{isUnlocked && (
164-
<div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-yellow-500 via-transparent to-transparent size-full"></div>
207+
<div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-emerald-500/40 via-transparent to-transparent size-full"></div>
165208
)}
166209
</div>
167210

168-
{/* Card Content - Flex Column for vertical centering */}
169211
<div className="relative z-10 flex flex-col items-center text-center p-6 flex-grow font-sans">
170212

171-
{/* Category Banner */}
172-
<span className={`mb-6 px-3 py-1 text-xs font-bold tracking-wider uppercase rounded-full border ${
173-
isUnlocked ? 'bg-yellow-500/10 text-yellow-400 border-yellow-500/30' : 'bg-gray-800 text-gray-400 border-gray-700'
213+
{/* Category Pill */}
214+
<span className={`mb-6 px-3 py-1 text-[10px] font-bold tracking-widest uppercase rounded-full border ${
215+
isUnlocked
216+
? 'bg-emerald-900/50 text-emerald-300 border-emerald-500/30'
217+
: 'bg-stone-800 text-stone-500 border-stone-700'
174218
}`}>
175219
{achievement.category}
176220
</span>
177221

178-
{/* Main Icon Container */}
222+
{/* Icon Container */}
179223
<div className="relative mb-6 group-hover:scale-105 transition-transform duration-300">
180-
{/* Glowing Ring background for unlocked */}
181-
{isUnlocked && <div className="absolute inset-0 bg-yellow-500 blur-xl opacity-30 rounded-full animate-pulse-slow"></div>}
224+
{/* Magical Glow */}
225+
{isUnlocked && <div className="absolute inset-0 bg-emerald-500 blur-2xl opacity-20 rounded-full animate-pulse-slow"></div>}
182226

183227
<div
184228
className={`relative h-24 w-24 rounded-full flex items-center justify-center border-[3px] shadow-2xl ${
185229
isUnlocked
186-
? 'bg-gradient-to-b from-yellow-800 to-yellow-950 border-yellow-400 text-yellow-300 shadow-yellow-900/50 ring-4 ring-yellow-500/20'
187-
: 'bg-gray-800 border-gray-700 text-gray-500 shadow-black/50'
230+
// Emerald to Teal gradient for the ring
231+
? 'bg-gradient-to-b from-stone-900 to-emerald-950 border-emerald-500/50 text-emerald-300 shadow-emerald-900/50 ring-4 ring-emerald-500/10'
232+
: 'bg-stone-900 border-stone-800 text-stone-600 shadow-black/50'
188233
}`}
189234
>
190-
<div className="scale-[1.4]">
235+
<div className="scale-[1.4] drop-shadow-lg">
191236
{isUnlocked ? achievement.icon : <Lock weight="fill" />}
192237
</div>
193238
</div>
194239
</div>
195240

196-
{/* Title & Description */}
241+
{/* Text Content */}
197242
<h3
198-
className={`text-xl font-playfairDisplay tracking-tight mb-3 ${
199-
isUnlocked ? 'text-white drop-shadow-[0_2px_2px_rgba(0,0,0,0.8)]' : 'text-gray-400'
243+
className={`text-2xl font-playfairDisplay tracking-tight mb-3 ${
244+
isUnlocked ? 'text-transparent bg-clip-text bg-gradient-to-r from-emerald-200 to-teal-100' : 'text-stone-600'
200245
}`}
201246
>
202247
{achievement.title}
203248
</h3>
204-
<p className={`text-sm font-arvo leading-relaxed ${isUnlocked ? 'text-gray-300' : 'text-gray-500'}`}>
249+
<p className={`text-sm font-arvo leading-relaxed ${isUnlocked ? 'text-stone-300' : 'text-stone-600'}`}>
205250
{achievement.description}
206251
</p>
207252
</div>
208253

209-
{/* Footer Section (Date or Locked Status) */}
254+
{/* Footer / Date */}
210255
<div className={`relative z-10 mt-auto p-4 w-full border-t ${
211-
isUnlocked ? 'border-yellow-900/30 bg-yellow-950/30' : 'border-gray-800/50 bg-gray-900/30'
256+
isUnlocked ? 'border-emerald-500/10 bg-emerald-950/20' : 'border-stone-800/50 bg-stone-900/30'
212257
}`}>
213258
{isUnlocked ? (
214-
<div className="flex items-center justify-center gap-2 text-xs text-yellow-500/80 font-medium font-mono uppercase tracking-widest">
259+
<div className="flex items-center justify-center gap-2 text-xs text-emerald-400/70 font-medium font-mono uppercase tracking-widest">
215260
<CalendarBlank weight="duotone" size={16} />
216261
<span>Unlocked: {unlockedDate.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}</span>
217262
</div>
218263
) : (
219-
<div className="text-center text-xs text-gray-600 font-mono uppercase tracking-widest flex items-center justify-center gap-2">
264+
<div className="text-center text-xs text-stone-600 font-mono uppercase tracking-widest flex items-center justify-center gap-2">
220265
<Lock size={14} /> Locked
221266
</div>
222267
)}

0 commit comments

Comments
 (0)