Skip to content

Commit ad82285

Browse files
fezcodefezcode
committed
coloooooooooors.
1 parent 997fb77 commit ad82285

File tree

9 files changed

+259
-188
lines changed

9 files changed

+259
-188
lines changed

‎src/components/ColorLegends.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
import React from 'react';
2+
import colors from '../config/colors';
23

34
export const categoryStyles = {
45
Book: {
5-
backgroundColor: 'rgba(59, 130, 246, 0.1)',
6-
borderColor: 'rgba(59, 130, 246, 0.5)',
6+
backgroundColor: colors['book-alpha-10'],
7+
borderColor: colors['book-alpha-50'],
78
},
89
Movie: {
9-
backgroundColor: 'rgba(239, 68, 68, 0.1)',
10-
borderColor: 'rgba(239, 68, 68, 0.5)',
10+
backgroundColor: colors['movie-alpha-10'],
11+
borderColor: colors['movie-alpha-50'],
1112
},
1213
Game: {
13-
backgroundColor: 'rgba(34, 197, 94, 0.1)',
14-
borderColor: 'rgba(34, 197, 94, 0.5)',
14+
backgroundColor: colors['game-alpha-10'],
15+
borderColor: colors['game-alpha-50'],
1516
},
1617
Article: {
17-
backgroundColor: 'rgba(249, 115, 22, 0.1)',
18-
borderColor: 'rgba(249, 115, 22, 0.5)',
18+
backgroundColor: colors['article-alpha-10'],
19+
borderColor: colors['article-alpha-50'],
1920
},
2021
Music: {
21-
backgroundColor: 'rgba(168, 85, 247, 0.1)',
22-
borderColor: 'rgba(168, 85, 247, 0.5)',
22+
backgroundColor: colors['music-alpha-10'],
23+
borderColor: colors['music-alpha-50'],
2324
},
2425
Series: {
25-
backgroundColor: 'rgba(236, 72, 153, 0.1)',
26-
borderColor: 'rgba(236, 72, 153, 0.5)',
26+
backgroundColor: colors['series-alpha-10'],
27+
borderColor: colors['series-alpha-50'],
2728
},
2829
};
2930

‎src/components/Layout.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { useState, useEffect } from 'react';
22
import Navbar from './Navbar';
3-
import Footer from './Footer';
43
import Sidebar from './Sidebar';
5-
import { List } from '@phosphor-icons/react';
4+
import Footer from './Footer';
65

76
const Layout = ({ children }) => {
87
const [isSidebarOpen, setIsSidebarOpen] = useState(window.innerWidth > 768);

‎src/components/LogCard.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import React from 'react';
12
import { Link } from 'react-router-dom';
3+
import colors from '../config/colors';
24
import { BookOpen, FilmStrip, GameController, Article, MusicNote, Television } from '@phosphor-icons/react';
35

46
const categoryIcons = {
@@ -12,28 +14,28 @@ const categoryIcons = {
1214

1315
const categoryStyles = {
1416
Book: {
15-
backgroundColor: 'rgba(59, 130, 246, 0.1)',
16-
borderColor: 'rgba(59, 130, 246, 0.5)',
17+
backgroundColor: colors['book-alpha-10'],
18+
borderColor: colors['book-alpha-50'],
1719
},
1820
Movie: {
19-
backgroundColor: 'rgba(239, 68, 68, 0.1)',
20-
borderColor: 'rgba(239, 68, 68, 0.5)',
21+
backgroundColor: colors['movie-alpha-10'],
22+
borderColor: colors['movie-alpha-50'],
2123
},
2224
Game: {
23-
backgroundColor: 'rgba(34, 197, 94, 0.1)',
24-
borderColor: 'rgba(34, 197, 94, 0.5)',
25+
backgroundColor: colors['game-alpha-10'],
26+
borderColor: colors['game-alpha-50'],
2527
},
2628
Article: {
27-
backgroundColor: 'rgba(249, 115, 22, 0.1)',
28-
borderColor: 'rgba(249, 115, 22, 0.5)',
29+
backgroundColor: colors['article-alpha-10'],
30+
borderColor: colors['article-alpha-50'],
2931
},
3032
Music: {
31-
backgroundColor: 'rgba(168, 85, 247, 0.1)',
32-
borderColor: 'rgba(168, 85, 247, 0.5)',
33+
backgroundColor: colors['music-alpha-10'],
34+
borderColor: colors['music-alpha-50'],
3335
},
3436
Series: {
35-
backgroundColor: 'rgba(236, 72, 153, 0.1)',
36-
borderColor: 'rgba(236, 72, 153, 0.5)',
37+
backgroundColor: colors['series-alpha-10'],
38+
borderColor: colors['series-alpha-50'],
3739
},
3840
};
3941

‎src/components/Sidebar.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -132,14 +132,6 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
132132
)}
133133

134134
<div className="flex-grow p-4">
135-
<button
136-
onClick={toggleAllSections}
137-
className="flex items-center justify-center w-full text-sm font-medium uppercase tracking-wider mb-4 focus:outline-none bg-gray-700 text-white hover:bg-gray-600 rounded-md p-2"
138-
>
139-
<span>{allSectionsOpen ? 'Collapse All' : 'Expand All'}</span>
140-
<List size={20} className={`transition-transform ${allSectionsOpen ? 'transform rotate-180' : ''}`} />
141-
</button>
142-
143135
<div className="mt-8">
144136

145137
<button
@@ -311,7 +303,13 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
311303
</div>
312304

313305
<div className="p-4 text-xs text-gray-500">
314-
306+
<button
307+
onClick={toggleAllSections}
308+
className="flex items-center justify-center w-full text-sm font-medium uppercase tracking-wider mb-4 focus:outline-none bg-gray-700 text-white hover:bg-gray-600 rounded-md p-2"
309+
>
310+
<span>{allSectionsOpen ? 'Collapse All' : 'Expand All'}</span>
311+
<List size={20} className={`transition-transform ${allSectionsOpen ? 'transform rotate-180' : ''}`} />
312+
</button>
315313
<hr className="border-gray-700 my-4" />
316314

317315
<div className="flex space-x-2">

‎src/components/Toast.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react';
22
import { motion } from 'framer-motion';
3-
4-
import { X } from '@phosphor-icons/react';
3+
import { XIcon } from '@phosphor-icons/react';
4+
import colors from '../config/colors';
55

66
const Toast = ({ id, title, message, duration, removeToast }) => {
77
useEffect(() => {
@@ -21,14 +21,14 @@ const Toast = ({ id, title, message, duration, removeToast }) => {
2121
exit={{ opacity: 0 }}
2222
transition={{ type: 'spring', stiffness: 120, damping: 20 }}
2323
className="text-gray-300 py-4 px-10 rounded-lg shadow-lg border backdrop-blur-sm flex items-center justify-between w-96 mb-4"
24-
style={{ backgroundColor: 'rgba(68, 64, 59, 0.8)', borderColor: '#5a5e64' }}
24+
style={{ backgroundColor: colors['toast-background'], borderColor: colors['toast-border'] }}
2525
>
2626
<div className="flex flex-col text-sm">
2727
<span>{title}</span>
2828
<span>{message}</span>
2929
</div>
3030
<button onClick={() => removeToast(id)} className="pr-2">
31-
<X size={24} weight="bold" />
31+
<XIcon size={24} weight="bold" />
3232
</button>
3333
</motion.div>
3434
);

‎src/config/colors.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
module.exports = {
2+
primary: {
3+
400: '#f87171', // red-400
4+
500: '#ef4444', // red-500
5+
600: '#dc2626', // red-600
6+
},
7+
secondary: {
8+
400: '#fb923c', // orange-400
9+
},
10+
book: '#3b82f6', // blue-500
11+
movie: '#ef4444', // red-500
12+
game: '#22c55e', // green-500
13+
article: '#f97316', // orange-500
14+
music: '#a855f7', // purple-500
15+
series: '#ec4899', // pink-500
16+
'title-hover': '#fdd4a6', // orange-200
17+
'markdown-title-color': '#fed7aa', // orange-200
18+
'markdown-hx-color': '#ffedd5', // orange-100
19+
'dev-card-bg': 'rgba(68, 64, 59, 0.3)', // stone-700
20+
'dev-card-bg-hover': 'rgba(68, 64, 59, 0.55)', // stone-700/20
21+
'takes-card-bg': 'rgba(6, 95, 70, 0.175)', // emerald-900/15
22+
'takes-card-bg-hover': 'rgba(16, 185, 129, 0.275)', // emerald-500/20
23+
24+
// Category RGBA variations for ColorLegends and LogCard
25+
'book-alpha-10': 'rgba(59, 130, 246, 0.1)',
26+
'book-alpha-50': 'rgba(59, 130, 246, 0.5)',
27+
'movie-alpha-10': 'rgba(239, 68, 68, 0.1)',
28+
'movie-alpha-50': 'rgba(239, 68, 68, 0.5)',
29+
'game-alpha-10': 'rgba(34, 197, 94, 0.1)',
30+
'game-alpha-50': 'rgba(34, 197, 94, 0.5)',
31+
'article-alpha-10': 'rgba(249, 115, 22, 0.1)',
32+
'article-alpha-50': 'rgba(249, 115, 22, 0.5)',
33+
'music-alpha-10': 'rgba(168, 85, 247, 0.1)',
34+
'music-alpha-50': 'rgba(168, 85, 247, 0.5)',
35+
'series-alpha-10': 'rgba(236, 72, 153, 0.1)',
36+
'series-alpha-50': 'rgba(236, 72, 153, 0.5)',
37+
38+
// Toast colors
39+
'toast-background': 'rgba(68, 64, 59, 0.8)',
40+
'toast-border': '#5a5e64',
41+
42+
// Code Theme Colors (from src/utils/customTheme.js)
43+
codeTheme: {
44+
'text-default': '#d1d5db',
45+
'background': '#1f2937',
46+
'selection-background': '#3c526d',
47+
'comment': '#8da1b9',
48+
'punctuation': '#e3eaf2',
49+
'keyword-important': '#66cccc',
50+
'tag': '#66cccc',
51+
'variable-scss': '#66cccc',
52+
'attr-name': '#e6d37a',
53+
'boolean': '#e6d37a',
54+
'number': '#e6d37a',
55+
'constant': '#e6d37a',
56+
'string-url-link': '#e6d37a',
57+
'brace-level-1': '#e6d37a',
58+
'class-name': '#6cb8e6',
59+
'key': '#6cb8e6',
60+
'property': '#6cb8e6',
61+
'function-markdown-title': '#6cb8e6',
62+
'brace-level-3': '#6cb8e6',
63+
'attr-value': '#91d076',
64+
'inserted': '#91d076',
65+
'string': '#91d076',
66+
'brace-level-markdown-url': '#91d076',
67+
'builtin': '#f4adf4',
68+
'regex': '#f4adf4',
69+
'brace-level-2': '#f4adf4',
70+
'function': '#c699e3',
71+
'selector-class': '#c699e3',
72+
'brace-level-4': '#c699e3',
73+
'atrule-rule': '#e9ae7e',
74+
'keyword': '#e9ae7e',
75+
'operator': '#e9ae7e',
76+
'selector': '#e9ae7e',
77+
'deleted': '#cd6660',
78+
'important': '#cd6660',
79+
'toolbar-text': '#111b27',
80+
'toolbar-background': '#6cb8e6', // Added for clarity, as it's used with toolbar-text
81+
'toolbar-hover-background': '#6cb8e6da',
82+
'line-highlight-hover': '#8da1b918',
83+
'line-numbers-border': '#0b121b',
84+
'line-numbers-background': '#0b121b7a',
85+
'line-numbers-text': '#8da1b9da',
86+
'diff-deleted-background': '#cd66601f',
87+
'diff-inserted-background': '#91d0761f',
88+
'line-highlight-gradient': 'linear-gradient(to right, #3c526d5f 70%, #3c526d55)',
89+
'line-highlight-start': '#3c526d5f',
90+
'line-highlight-end': '#3c526d55',
91+
},
92+
};

‎src/pages/BlogPostPage.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,17 @@ import React, { useState, useEffect, useRef } from 'react';
22
import { useParams, Link } from 'react-router-dom';
33
import ReactMarkdown from 'react-markdown';
44
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
5+
import { ArrowSquareOut, ArrowsOutSimple, Clipboard, ArrowLeft } from '@phosphor-icons/react';
56
import { customTheme } from '../utils/customTheme';
67
import PostMetadata from '../components/PostMetadata';
78
import CodeModal from '../components/CodeModal';
89
import { useToast } from '../hooks/useToast';
9-
import { AnimatePresence } from 'framer-motion';
10-
import { ArrowLeftIcon, ArrowSquareOutIcon, ClipboardIcon, ArrowsOutSimpleIcon } from '@phosphor-icons/react';
1110

1211
const LinkRenderer = ({ href, children }) => {
1312
const isExternal = href.startsWith('http') || href.startsWith('https');
1413
return (
1514
<a href={href} className="text-primary-400 hover:text-primary-600 transition-colors inline-flex items-center gap-1" target={isExternal ? "_blank" : undefined} rel={isExternal ? "noopener noreferrer" : undefined}>
16-
{children} {isExternal && <ArrowSquareOutIcon className="text-xs" />}
15+
{children} {isExternal && <ArrowSquareOut className="text-xs" />}
1716
</a>
1817
);
1918
};
@@ -51,10 +50,10 @@ const CodeBlock = ({ node, inline, className, children, openModal, ...props }) =
5150
<div className="relative">
5251
<div className="absolute top-2 right-2 flex gap-2">
5352
<button onClick={() => openModal(String(children).replace(/\n$/, ''))} className="text-white bg-gray-700 p-1 rounded opacity-75 hover:opacity-100">
54-
<ArrowsOutSimpleIcon size={20} />
53+
<ArrowsOutSimple size={20} />
5554
</button>
5655
<button onClick={handleCopy} className="text-white bg-gray-700 p-1 rounded opacity-75 hover:opacity-100">
57-
<ClipboardIcon size={20} />
56+
<Clipboard size={20} />
5857
</button>
5958
</div>
6059
<SyntaxHighlighter
@@ -191,7 +190,7 @@ const BlogPostPage = () => {
191190
<div className="lg:grid lg:grid-cols-4 lg:gap-8">
192191
<div className="lg:col-span-3">
193192
<Link to="/blog" className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4">
194-
<ArrowLeftIcon size={24} /> Back to Blog
193+
<ArrowLeft size={24} /> Back to Blog
195194
</Link>
196195
<div ref={contentRef} className="prose prose-xl prose-dark max-w-none">
197196
<ReactMarkdown components={{ a: LinkRenderer, code: (props) => <CodeBlock {...props} openModal={openModal} /> }}>{post.body}</ReactMarkdown>

0 commit comments

Comments
 (0)