Skip to content

Commit b9c3884

Browse files
fezcodefezcode
committed
chore: modernized components
1 parent 78fe6e9 commit b9c3884

File tree

8 files changed

+95
-150
lines changed

8 files changed

+95
-150
lines changed

‎src/index.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ body {
1010
body {
1111
margin: 0;
1212
background-color: #020617;
13-
font-family: 'Space Mono', 'JetBrains Mono', monospace, sans-serif !important;
14-
font-weight: 400 !important;
15-
font-style: normal !important;
13+
font-family: 'Space Mono', 'JetBrains Mono', monospace, sans-serif;
14+
font-weight: 400;
15+
font-style: normal;
1616
-webkit-font-smoothing: antialiased;
1717
-moz-osx-font-smoothing: grayscale;
1818
transition:
@@ -379,7 +379,7 @@ body.vaporwave-mode {
379379
color: #01cdfe !important; /* Neon Cyan Text */
380380
text-shadow: 2px 2px 0px rgba(255, 113, 206, 0.4); /* Pink shadow */
381381
font-family:
382-
'Brush Script MT', 'Comic Sans MS', cursive !important; /* A E S T H E T I C font choice, or fallback */
382+
'Brush Script MT', 'Comic Sans MS', monospace !important; /* A E S T H E T I C font choice, or fallback */
383383
}
384384

385385
body.vaporwave-mode * {
@@ -488,7 +488,7 @@ body.comic-mode {
488488
background-image: radial-gradient(#e5e5f7 2px, transparent 2px);
489489
background-size: 10px 10px; /* Halftone dots */
490490
color: #000000 !important;
491-
font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif !important;
491+
font-family: 'Comic Sans MS', 'Chalkboard SE', monospace !important;
492492
}
493493

494494
body.comic-mode * {
@@ -516,7 +516,7 @@ body.sketchbook-mode {
516516
);
517517
background-size: 100% 30px;
518518
color: #333333 !important;
519-
font-family: 'Segoe Print', 'Bradley Hand', cursive !important;
519+
font-family: 'Segoe Print', 'Bradley Hand', monospace !important;
520520
}
521521

522522
body.sketchbook-mode * {
@@ -541,7 +541,7 @@ body.sketchbook-mode img {
541541
body.hellenic-mode {
542542
background-color: #fdfbf7 !important;
543543
color: #2c3e50 !important;
544-
font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif !important;
544+
font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', monospace !important;
545545
background-image:
546546
radial-gradient(
547547
circle at 100% 150%,

‎src/pages/ProjectPage.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useProjects } from '../utils/projectParser';
88
import { useProjectContent } from '../hooks/useProjectContent';
99
import useSeo from '../hooks/useSeo';
1010
import GenerativeArt from '../components/GenerativeArt';
11-
import { ArrowLeft, ArrowUpRight, GithubLogo } from '@phosphor-icons/react';
11+
import { ArrowLeftIcon, ArrowUpRightIcon, GithubLogoIcon } from '@phosphor-icons/react';
1212

1313
const NOISE_BG = `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E")`;
1414

@@ -87,7 +87,7 @@ const ProjectPage = () => {
8787
to="/projects"
8888
className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 px-4 py-1.5 text-xs font-mono font-bold uppercase tracking-widest text-white backdrop-blur-md transition-colors hover:bg-white hover:text-black"
8989
>
90-
<ArrowLeft weight="bold" />
90+
<ArrowLeftIcon weight="bold" />
9191
<span>Back</span>
9292
</Link>
9393
<span className="font-mono text-[10px] text-gray-400 uppercase tracking-widest border border-white/10 px-2 py-1.5 rounded-full bg-black/40 backdrop-blur-sm">
@@ -159,7 +159,7 @@ const ProjectPage = () => {
159159
<span className="font-mono text-sm font-bold uppercase tracking-widest">
160160
Visit Live Site
161161
</span>
162-
<ArrowUpRight weight="bold" size={20} />
162+
<ArrowUpRightIcon weight="bold" size={20} />
163163
</a>
164164
)}
165165
{/* Assuming GitHub link is available or derived (placeholder logic) */}
@@ -173,7 +173,7 @@ const ProjectPage = () => {
173173
<span className="font-mono text-sm font-bold uppercase tracking-widest">
174174
Source Code
175175
</span>
176-
<GithubLogo weight="bold" size={20} />
176+
<GithubLogoIcon weight="bold" size={20} />
177177
</a>
178178
</div>
179179

‎src/pages/ProjectsPage.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ProjectCard from '../components/ProjectCard';
55
import GenerativeArt from '../components/GenerativeArt';
66
import { useProjects } from '../utils/projectParser';
77
import useSeo from '../hooks/useSeo';
8-
import { ArrowLeft, Cpu } from '@phosphor-icons/react';
8+
import { ArrowLeftIcon, CpuIcon } from '@phosphor-icons/react';
99
import { useAchievements } from '../context/AchievementContext';
1010

1111
const ProjectsPage = () => {
@@ -83,7 +83,7 @@ const ProjectsPage = () => {
8383
to="/"
8484
className="mb-8 inline-flex items-center gap-2 text-xs font-mono text-gray-500 hover:text-white transition-colors uppercase tracking-widest"
8585
>
86-
<ArrowLeft weight="bold" />
86+
<ArrowLeftIcon weight="bold" />
8787
<span>Home</span>
8888
</Link>
8989
<h1 className="text-6xl md:text-8xl font-black tracking-tighter text-white mb-4 leading-none">
@@ -176,7 +176,7 @@ const ProjectsPage = () => {
176176
<span className="text-sm font-bold uppercase tracking-widest">
177177
Visit Live Site
178178
</span>
179-
<ArrowLeft className="rotate-135" weight="bold" />
179+
<ArrowLeftIcon className="rotate-135" weight="bold" />
180180
</a>
181181
</motion.div>
182182
)}
@@ -188,7 +188,7 @@ const ProjectsPage = () => {
188188
{/* Placeholder / Empty State */}
189189
{!activeProject && (
190190
<div className="absolute inset-0 flex items-center justify-center text-gray-700">
191-
<Cpu size={64} weight="thin" className="animate-pulse" />
191+
<CpuIcon size={64} weight="thin" className="animate-pulse" />
192192
</div>
193193
)}
194194
</div>

‎src/pages/apps/AbstractWavesPage.js‎

Lines changed: 52 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
import useSeo from '../../hooks/useSeo';
99
import { useToast } from '../../hooks/useToast';
1010
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
11+
import CustomSlider from '../../components/CustomSlider';
1112

1213
const AbstractWavesPage = () => {
1314
useSeo({
@@ -206,106 +207,57 @@ const AbstractWavesPage = () => {
206207
</div>
207208

208209
<div className="space-y-4">
209-
<div>
210-
<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">
211-
<span>Line Count</span>
212-
<span className="text-gray-500">{lineCount}</span>
213-
</label>
214-
<input
215-
type="range"
216-
min="10"
217-
max="100"
218-
value={lineCount}
219-
onChange={(e) => setLineCount(Number(e.target.value))}
220-
className="w-full accent-black"
221-
/>
222-
</div>
223-
<div>
224-
<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">
225-
<span>Amplitude (Height)</span>
226-
<span className="text-gray-500">{Math.round(amplitude)}</span>
227-
</label>
228-
<input
229-
type="range"
230-
min="0"
231-
max="150"
232-
value={amplitude}
233-
onChange={(e) => setAmplitude(Number(e.target.value))}
234-
className="w-full accent-black"
235-
/>
236-
</div>
237-
<div>
238-
<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">
239-
<span>Frequency (Width)</span>
240-
<span className="text-gray-500">{frequency.toFixed(3)}</span>
241-
</label>
242-
<input
243-
type="range"
244-
min="0.001"
245-
max="0.05"
246-
step="0.001"
247-
value={frequency}
248-
onChange={(e) => setFrequency(Number(e.target.value))}
249-
className="w-full accent-black"
250-
/>
251-
</div>
252-
<div>
253-
<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">
254-
<span>Spacing</span>
255-
<span className="text-gray-500">{perspective}px</span>
256-
</label>
257-
<input
258-
type="range"
259-
min="2"
260-
max="40"
261-
value={perspective}
262-
onChange={(e) => setPerspective(Number(e.target.value))}
263-
className="w-full accent-black"
264-
/>
265-
</div>
266-
<div>
267-
<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">
268-
<span>Noise / Distortion</span>
269-
<span className="text-gray-500">{Math.round(noise)}</span>
270-
</label>
271-
<input
272-
type="range"
273-
min="0"
274-
max="100"
275-
value={noise}
276-
onChange={(e) => setNoise(Number(e.target.value))}
277-
className="w-full accent-black"
278-
/>
279-
</div>
280-
<div>
281-
<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">
282-
<span>Phase Shift</span>
283-
<span className="text-gray-500">{phase.toFixed(1)}</span>
284-
</label>
285-
<input
286-
type="range"
287-
min="0"
288-
max="10"
289-
step="0.1"
290-
value={phase}
291-
onChange={(e) => setPhase(Number(e.target.value))}
292-
className="w-full accent-black"
293-
/>
294-
</div>
295-
<div>
296-
<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">
297-
<span>Line Width</span>
298-
<span className="text-gray-500">{lineWidth}px</span>
299-
</label>
300-
<input
301-
type="range"
302-
min="1"
303-
max="10"
304-
value={lineWidth}
305-
onChange={(e) => setLineWidth(Number(e.target.value))}
306-
className="w-full accent-black"
307-
/>
308-
</div>
210+
<CustomSlider
211+
label="Line Count"
212+
min={10}
213+
max={100}
214+
value={lineCount}
215+
onChange={setLineCount}
216+
/>
217+
<CustomSlider
218+
label="Amplitude (Height)"
219+
min={0}
220+
max={150}
221+
value={Math.round(amplitude)}
222+
onChange={setAmplitude}
223+
/>
224+
<CustomSlider
225+
label="Frequency (Width)"
226+
min={0.001}
227+
max={0.05}
228+
step={0.001}
229+
value={frequency}
230+
onChange={setFrequency}
231+
/>
232+
<CustomSlider
233+
label="Spacing"
234+
min={2}
235+
max={40}
236+
value={perspective}
237+
onChange={setPerspective}
238+
/>
239+
<CustomSlider
240+
label="Noise / Distortion"
241+
min={0}
242+
max={100}
243+
value={Math.round(noise)}
244+
onChange={setNoise}
245+
/>
246+
<CustomSlider
247+
label="Phase Shift"
248+
min={0}
249+
max={10}
250+
step={0.1}
251+
value={phase}
252+
onChange={setPhase}
253+
/>
254+
<CustomSlider
255+
label="Line Width"
256+
min={1}
257+
max={10}
258+
value={lineWidth}
259+
onChange={setLineWidth}
260+
/>
309261
</div>
310262
<div className="bg-gray-100 p-3 rounded-lg text-xs text-gray-600">
311263
<strong>Tip:</strong> "Opaque Lines" hides the waves behind the

‎src/pages/apps/AssetStudioPage.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
import useSeo from '../../hooks/useSeo';
1414
import { useToast } from '../../hooks/useToast';
1515
import GenerativeArt from '../../components/GenerativeArt';
16+
import CustomSlider from '../../components/CustomSlider';
1617

1718
const AssetStudioPage = () => {
1819
const appName = 'Asset Studio';
@@ -221,14 +222,13 @@ const AssetStudioPage = () => {
221222
Scale Percentage
222223
</h3>
223224
<div className="space-y-4">
224-
<div className="flex justify-between font-mono text-[10px] uppercase text-gray-500">
225-
<span>Multiplier</span>
226-
<span className="text-white font-black">{scale}X</span>
227-
</div>
228-
<input
229-
type="range" min="0.1" max="4" step="0.1" value={scale}
230-
onChange={(e) => setScale(parseFloat(e.target.value))}
231-
className="w-full accent-white h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer"
225+
<CustomSlider
226+
label="Multiplier"
227+
min={0.1}
228+
max={4}
229+
step={0.1}
230+
value={scale}
231+
onChange={setScale}
232232
/>
233233
</div>
234234
<AssetButton

‎src/pages/apps/LogicArchitectPage.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
} from '@phosphor-icons/react';
1010
import useSeo from '../../hooks/useSeo';
1111
import { useToast } from '../../hooks/useToast';
12+
import BrutalistDialog from '../../components/BrutalistDialog';
1213

1314
const GATES_META = {
1415
and: { label: 'AND', inputs: 2, color: '#10b981' },
@@ -22,6 +23,7 @@ const GATES_META = {
2223
const LogicArchitectPage = () => {
2324
const appName = 'Logic Architect';
2425
const { addToast } = useToast();
26+
const [isClearDialogOpen, setIsClearDialogOpen] = useState(false);
2527

2628
useSeo({
2729
title: `${appName} | Fezcodex`,
@@ -161,14 +163,29 @@ const LogicArchitectPage = () => {
161163
</button>
162164
))}
163165
<button
164-
onClick={() => { if(window.confirm('Clear workspace?')) { setNodes([]); setConnections([]); } }}
166+
onClick={() => setIsClearDialogOpen(true)}
165167
className="px-3 py-1 border border-red-500/20 text-red-500 hover:bg-red-500 hover:text-black text-[10px] font-bold uppercase transition-all ml-4"
166168
>
167169
Flush_All
168170
</button>
169171
</div>
170172
</div>
171173

174+
<BrutalistDialog
175+
isOpen={isClearDialogOpen}
176+
onClose={() => setIsClearDialogOpen(false)}
177+
onConfirm={() => {
178+
setNodes([]);
179+
setConnections([]);
180+
setIsClearDialogOpen(false);
181+
addToast({ title: 'Workspace Flushed', message: 'All modules and pathways have been purged.', type: 'info' });
182+
}}
183+
title="FLUSH_WORKSPACE"
184+
message="This will permanently delete all logic gates and connections. proceed with protocol?"
185+
confirmText="CONFIRM_PURGE"
186+
cancelText="ABORT_FLUSH"
187+
/>
188+
172189
<div className="flex-grow relative bg-[radial-gradient(#ffffff05_1px,transparent_1px)] [background-size:40px_40px]" ref={workspaceRef}>
173190
<svg className="absolute inset-0 w-full h-full pointer-events-none z-0">
174191
{connections.map((conn, i) => {

‎src/styles/dnd.css‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -588,27 +588,3 @@
588588
.dnd-list-item-link:hover {
589589
color: #ffb03a;
590590
}
591-
592-
@media (max-width: 768px) {
593-
.dnd-page-container,
594-
.dnd-navbar,
595-
.dnd-footer {
596-
font-family: serif !important;
597-
}
598-
599-
.dnd-books-section {
600-
display: none;
601-
}
602-
603-
.dnd-breadcrumbs {
604-
display: none;
605-
}
606-
607-
.dnd-navbar-center {
608-
display: none;
609-
}
610-
611-
.dnd-footer-logo-section {
612-
display: none;
613-
}
614-
}

0 commit comments

Comments
 (0)