Skip to content

Commit c6d27e4

Browse files
fezcodefezcode
committed
style: major coloring refactor
1 parent 1a0ec51 commit c6d27e4

22 files changed

+89
-250
lines changed

‎src/components/ListInputModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const ListInputModal = ({ isOpen, onClose, onSave }) => {
3232
</button>
3333
<button
3434
onClick={handleSave}
35-
className="flex items-center gap-2 text-lg font-arvo font-normal px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out bg-app/50 text-white hover:bg-app/70"
35+
className="flex items-center gap-2 text-lg font-arvo font-normal px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out border-app/100 bg-app/50 text-white hover:bg-app/70"
3636
>
3737
Save
3838
</button>

‎src/components/PickerWheel.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -190,15 +190,15 @@ const PickerWheel = () => {
190190
/>
191191
<button
192192
onClick={addEntry}
193-
className="flex items-center gap-2 text-lg font-arvo font-normal px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out bg-app/50 text-white hover:bg-app/70"
193+
className="flex items-center gap-2 text-lg font-arvo font-normal px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out border-app/100 bg-app/50 text-white hover:bg-app/70"
194194
disabled={entries.length >= 30}
195195
>
196196
Add
197197
</button>
198198
</div>
199199
<button
200200
onClick={() => setIsModalOpen(true)}
201-
className="flex items-center justify-center w-full gap-2 text-lg font-arvo font-normal px-4 py-2 mt-4 rounded-md border transition-colors duration-300 ease-in-out bg-app/50 text-white hover:bg-app/70"
201+
className="flex items-center justify-center w-full gap-2 text-lg font-arvo font-normal px-4 py-2 mt-4 rounded-md border transition-colors duration-300 ease-in-out border-app/100 bg-app/50 text-white hover:bg-app/70"
202202
>
203203
Load from List
204204
</button>
@@ -210,7 +210,7 @@ const PickerWheel = () => {
210210
<span className="flex-grow text-center">{entry}</span>
211211
<button
212212
onClick={() => deleteEntry(index)}
213-
className="flex items-center gap-2 text-lg font-mono font-normal px-2 py-2 rounded-md border transition-colors duration-300 ease-in-out bg-app/50 text-white hover:bg-app/70"
213+
className="flex items-center gap-2 text-lg font-mono font-normal px-2 py-2 rounded-md border transition-colors duration-300 ease-in-out border-app/100 bg-app/50 text-white hover:bg-app/70"
214214
>
215215
<Trash size={20} />
216216
</button>

‎src/config/colors.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ module.exports = {
77
secondary: {
88
400: '#fb923c', // orange-400
99
},
10+
tb: '#00000033',
1011
book: '#9EC5AB',
1112
movie: '#c75146',
1213
game: '#80ed99',
1314
article: '#FA8072', // Salmon
14-
app: '#9EC5AB', // Duplicated from book
15+
app: '#fb8476', // Duplicated from article-ish
1516
music: '#A07B90',
1617
series: '#edc531',
1718
food: '#F4A259',
@@ -50,8 +51,8 @@ module.exports = {
5051
'game-alpha-50': 'rgba(0, 255, 127, 0.5)',
5152
'article-alpha-10': 'rgba(250, 128, 114, 0.1)',
5253
'article-alpha-50': 'rgba(250, 128, 114, 0.5)',
53-
'app-alpha-10': 'rgba(158, 197, 171, 0.1)', // Duplicated from book-alpha-10
54-
'app-alpha-50': 'rgba(158, 197, 171, 0.5)', // Duplicated from book-alpha-50
54+
'app-alpha-10': 'rgba(160, 123, 144, 0.1)', // Duplicated from music
55+
'app-alpha-50': 'rgba(160, 123, 144, 0.5)', // Duplicated from music
5556
'music-alpha-10': 'rgba(160, 123, 144, 0.1)',
5657
'music-alpha-50': 'rgba(160, 123, 144, 0.5)',
5758
'series-alpha-10': 'rgba(237, 197, 49, 0.1)',

‎src/pages/apps/AsciiConverterPage.js‎

Lines changed: 14 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { ArrowLeftIcon } from '@phosphor-icons/react';
44
import colors from '../../config/colors';
55
import usePageTitle from '../../utils/usePageTitle';
66
import { useToast } from '../../hooks/useToast';
7-
import '../../styles/app-buttons.css';
87

98
function AsciiConverterPage() {
109
usePageTitle('Text to ASCII Converter');
@@ -87,12 +86,6 @@ function AsciiConverterPage() {
8786
});
8887
};
8988

90-
const cardStyle = {
91-
backgroundColor: colors['app-alpha-10'],
92-
borderColor: colors['app-alpha-50'],
93-
color: colors.app,
94-
};
95-
9689
const detailTextColor = colors['app-light'];
9790

9891
return (
@@ -114,8 +107,7 @@ function AsciiConverterPage() {
114107
<hr className="border-gray-700" />
115108
<div className="flex justify-center items-center mt-16">
116109
<div
117-
className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-4xl"
118-
style={cardStyle}
110+
className="group border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-4xl bg-app-alpha-10 hover:bg-app/15 text-app border-app"
119111
>
120112
<div
121113
className="absolute top-0 left-0 w-full h-full opacity-10"
@@ -129,10 +121,10 @@ function AsciiConverterPage() {
129121
<hr className="border-gray-700 mb-4" />
130122
<div className="relative z-10 p-1">
131123
<div className="mb-4">
132-
<label className="block text-lg font-semibold mb-2" style={{ color: cardStyle.color }}>Input Text</label>
124+
<label className="block text-lg font-semibold mb-2 text-app" >Input Text</label>
133125
<textarea
134-
className="w-full h-32 p-4 bg-gray-900/50 font-mono resize-y border rounded-md focus:ring-0"
135-
style={{ borderColor: cardStyle.borderColor, color: detailTextColor }}
126+
className="w-full h-32 p-4 bg-gray-900/50 font-mono resize-y focus:ring-0 border rounded-md border-app"
127+
style={{ color: detailTextColor }}
136128
value={inputText}
137129
onChange={(e) => setInputText(e.target.value)}
138130
placeholder="Enter text or ASCII codes (space-separated) to convert..."
@@ -141,62 +133,38 @@ function AsciiConverterPage() {
141133
<div className="flex justify-center gap-4 mb-4">
142134
<button
143135
onClick={textToAscii}
144-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
145-
style={{
146-
backgroundColor: 'rgba(0, 0, 0, 0.2)',
147-
color: cardStyle.color,
148-
borderColor: cardStyle.borderColor,
149-
border: '1px solid',
150-
}}
136+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out bg-tb hover:bg-app/30 text-app border-app border"
151137
>
152138
Text to ASCII
153139
</button>
154140
<button
155141
onClick={asciiToText}
156-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
157-
style={{
158-
backgroundColor: 'rgba(0, 0, 0, 0.2)',
159-
color: cardStyle.color,
160-
borderColor: cardStyle.borderColor,
161-
border: '1px solid',
162-
}}
142+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out bg-tb hover:bg-app/30 text-app border-app border"
163143
>
164144
ASCII to Text
165145
</button>
166146
</div>
167147
<div className="flex justify-center gap-4 mb-4">
168148
<button
169149
onClick={textToBinary}
170-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
171-
style={{
172-
backgroundColor: 'rgba(0, 0, 0, 0.2)',
173-
color: cardStyle.color,
174-
borderColor: cardStyle.borderColor,
175-
border: '1px solid',
176-
}}
150+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out bg-tb hover:bg-app/30 text-app border-app border"
177151
>
178152
Text to Binary
179153
</button>
180154
<button
181155
onClick={binaryToText}
182-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
183-
style={{
184-
backgroundColor: 'rgba(0, 0, 0, 0.2)',
185-
color: cardStyle.color,
186-
borderColor: cardStyle.borderColor,
187-
border: '1px solid',
188-
}}
156+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out bg-tb hover:bg-app/30 text-app border-app border"
189157
>
190158
Binary to Text
191159
</button>
192160
</div>
193161
<div>
194-
<label className="block text-lg font-semibold mb-2" style={{ color: cardStyle.color }}>ASCII Output</label>
162+
<label className="block text-lg font-semibold mb-2 text-app" >ASCII Output</label>
195163
<div className="relative">
196164
<textarea
197165
readOnly
198-
className="w-full h-32 p-4 bg-gray-800/50 font-mono resize-y border rounded-md mb-4"
199-
style={{ borderColor: cardStyle.borderColor, color: detailTextColor }}
166+
className="w-full h-32 p-4 bg-gray-800/50 font-mono resize-y border rounded-md mb-4 border-app"
167+
style={{ color: detailTextColor }}
200168
value={asciiOutput}
201169
placeholder="Converted ASCII will appear here..."
202170
/>
@@ -209,12 +177,12 @@ function AsciiConverterPage() {
209177
</div>
210178
</div>
211179
<div>
212-
<label className="block text-lg font-semibold mb-2" style={{ color: cardStyle.color }}>Binary Output</label>
180+
<label className="block text-lg font-semibold mb-2 text-app" >Binary Output</label>
213181
<div className="relative">
214182
<textarea
215183
readOnly
216-
className="w-full h-32 p-4 bg-gray-800/50 font-mono resize-y border rounded-md"
217-
style={{ borderColor: cardStyle.borderColor, color: detailTextColor }}
184+
className="w-full h-32 p-4 bg-gray-800/50 font-mono resize-y border rounded-md border-app"
185+
style={{ color: detailTextColor }}
218186
value={binaryOutput}
219187
placeholder="Converted Binary will appear here..."
220188
/>

‎src/pages/apps/Base64ConverterPage.js‎

Lines changed: 7 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React, { useState } from 'react';
22
import { Link } from 'react-router-dom';
33
import { ArrowLeftIcon } from '@phosphor-icons/react';
4-
import colors from '../../config/colors';
54
import usePageTitle from '../../utils/usePageTitle';
65
import { useToast } from '../../hooks/useToast';
7-
import '../../styles/app-buttons.css';
86

97
function Base64ConverterPage() {
108
usePageTitle('Base64 Converter');
@@ -56,14 +54,6 @@ function Base64ConverterPage() {
5654
});
5755
};
5856

59-
const cardStyle = {
60-
backgroundColor: colors['app-alpha-10'],
61-
borderColor: colors['app-alpha-50'],
62-
color: colors.app,
63-
};
64-
65-
const detailTextColor = colors['app-light'];
66-
6757
return (
6858
<div className="py-16 sm:py-24">
6959
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
@@ -83,8 +73,7 @@ function Base64ConverterPage() {
8373
<hr className="border-gray-700" />
8474
<div className="flex justify-center items-center mt-16">
8575
<div
86-
className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-4xl"
87-
style={cardStyle}
76+
className="group bg-app-alpha-10 hover:bg-app/15 text-app border-app border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-4xl"
8877
>
8978
<div
9079
className="absolute top-0 left-0 w-full h-full opacity-10"
@@ -97,10 +86,9 @@ function Base64ConverterPage() {
9786
<h1 className="text-3xl font-arvo font-normal mb-4 text-app"> Base64 Converter </h1>
9887
<hr className="border-gray-700 mb-4" />
9988
<div className="mb-4">
100-
<label className="block text-lg font-semibold mb-2" style={{ color: cardStyle.color }}>Input Text</label>
89+
<label className="block text-lg font-semibold mb-2 text-app">Input Text</label>
10190
<textarea
102-
className="w-full h-32 p-4 bg-gray-900/50 font-mono resize-y border rounded-md focus:ring-0"
103-
style={{ borderColor: cardStyle.borderColor, color: detailTextColor }}
91+
className="w-full h-32 p-4 bg-gray-900/50 font-mono resize-y border rounded-md border-app-alpha-50 text-app-light"
10492
value={inputText}
10593
onChange={(e) => setInputText(e.target.value)}
10694
placeholder="Enter text to encode or decode..."
@@ -109,36 +97,23 @@ function Base64ConverterPage() {
10997
<div className="flex justify-center gap-4 mb-4">
11098
<button
11199
onClick={encodeBase64}
112-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
113-
style={{
114-
backgroundColor: 'rgba(0, 0, 0, 0.2)',
115-
color: cardStyle.color,
116-
borderColor: cardStyle.borderColor,
117-
border: '1px solid',
118-
}}
100+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out bg-tb hover:bg-app/30 text-app border-app border"
119101
>
120102
Encode Base64
121103
</button>
122104
<button
123105
onClick={decodeBase64}
124-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
125-
style={{
126-
backgroundColor: 'rgba(0, 0, 0, 0.2)',
127-
color: cardStyle.color,
128-
borderColor: cardStyle.borderColor,
129-
border: '1px solid',
130-
}}
106+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out bg-tb hover:bg-app/30 text-app border-app border"
131107
>
132108
Decode Base64
133109
</button>
134110
</div>
135111
<div>
136-
<label className="block text-lg font-semibold mb-2" style={{ color: cardStyle.color }}>Output Text</label>
112+
<label className="block text-lg font-semibold mb-2 text-app" >Output Text</label>
137113
<div className="relative">
138114
<textarea
139115
readOnly
140-
className="w-full h-32 p-4 bg-gray-800/50 font-mono resize-y border rounded-md"
141-
style={{ borderColor: cardStyle.borderColor, color: detailTextColor }}
116+
className="w-full h-32 p-4 bg-gray-800/50 font-mono resize-y border rounded-md border-app-alpha-50 text-app-light"
142117
value={outputText}
143118
placeholder="Converted text will appear here..."
144119
/>

‎src/pages/apps/CodenameGeneratorPage.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ const CodenameGeneratorPage = () => {
105105
<h1 className="text-3xl font-arvo font-normal mb-4 text-app"> Codename Generator </h1>
106106
<hr className="border-gray-700 mb-4" />
107107
<div className="flex flex-col items-center gap-8">
108-
<div className="relative text-4xl text-lime-100 font-bold text-center h-16 mt-12">
108+
<div className="relative text-4xl text-indigo-100 font-bold text-center h-16 mt-12">
109109
<div
110110
className="relative underline"
111111
style={{ fontFamily: 'Playfair Display', textDecorationThickness: '10px' }}
@@ -117,13 +117,15 @@ const CodenameGeneratorPage = () => {
117117
<button
118118
onClick={generateCodename}
119119
className="flex items-center gap-2 text-lg font-arvo font-normal px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out bg-app/50 text-white hover:bg-app/70"
120+
style={{ borderColor: colors['app-alpha-50'] }}
120121
>
121122
<Sparkle size={20} /> Generate
122123
</button>
123124
<button
124125
onClick={handleCopy}
125126
className="flex items-center gap-2 text-lg font-arvo font-normal px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out bg-app/50 text-white hover:bg-app/70"
126127
disabled={!codename}
128+
style={{ borderColor: colors['app-alpha-50'] }}
127129
>
128130
<Copy size={20} /> Copy
129131
</button>

‎src/pages/apps/ColorContrastCheckerPage.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
44
import { ArrowLeftIcon, CheckCircle, XCircle } from '@phosphor-icons/react'; // Using Palette for now
55
import colors from '../../config/colors';
66
import { useToast } from '../../hooks/useToast';
7-
import '../../styles/app-buttons.css';
87

98
// Helper function to convert hex to RGB
109
const hexToRgb = (hex) => {

‎src/pages/apps/ColorPaletteGeneratorPage.js‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React, { useState } from 'react';
22
import { Link } from 'react-router-dom';
33
import { ArrowLeftIcon } from '@phosphor-icons/react';
4-
import colors from '../../config/colors';
54
import usePageTitle from '../../utils/usePageTitle';
65
import { useToast } from '../../hooks/useToast';
7-
import '../../styles/app-buttons.css';
86

97
function ColorPaletteGeneratorPage() {
108
usePageTitle('Color Palette Generator');
@@ -38,12 +36,6 @@ function ColorPaletteGeneratorPage() {
3836
});
3937
};
4038

41-
const cardStyle = {
42-
backgroundColor: colors['app-alpha-10'],
43-
borderColor: colors['app-alpha-50'],
44-
color: colors.app,
45-
};
46-
4739
return (
4840
<div className="py-16 sm:py-24">
4941
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
@@ -63,8 +55,7 @@ function ColorPaletteGeneratorPage() {
6355
<hr className="border-gray-700" />
6456
<div className="flex justify-center items-center mt-16">
6557
<div
66-
className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-4xl"
67-
style={cardStyle}
58+
className="group border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-4xl bg-app-alpha-10 border-app-alpha-50 text-app hover:bg-app/15"
6859
>
6960
<div
7061
className="absolute top-0 left-0 w-full h-full opacity-10"
@@ -80,13 +71,7 @@ function ColorPaletteGeneratorPage() {
8071
<div className="flex justify-center gap-4 mb-4">
8172
<button
8273
onClick={generatePalette}
83-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
84-
style={{
85-
backgroundColor: 'rgba(0, 0, 0, 0.2)',
86-
color: cardStyle.color,
87-
borderColor: cardStyle.borderColor,
88-
border: '1px solid',
89-
}}
74+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out bg-tb hover:bg-app/30 text-app border-app border"
9075
>
9176
Generate New Palette
9277
</button>

0 commit comments

Comments
 (0)