Skip to content

Commit dbce690

Browse files
fezcodefezcode
committed
feat: hover effects
1 parent dbcee70 commit dbce690

13 files changed

+28
-64
lines changed

‎src/pages/apps/AsciiConverterPage.js‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ 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';
78

89
function AsciiConverterPage() {
910
usePageTitle('Text to ASCII Converter');
@@ -138,63 +139,51 @@ function AsciiConverterPage() {
138139
<div className="flex justify-center gap-4 mb-4">
139140
<button
140141
onClick={textToAscii}
141-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
142+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
142143
style={{
143144
backgroundColor: 'rgba(0, 0, 0, 0.2)',
144145
color: cardStyle.color,
145146
borderColor: cardStyle.borderColor,
146147
border: '1px solid',
147-
'--hover-bg-color': colors['app-alpha-50'],
148148
}}
149-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
150-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
151149
>
152150
Text to ASCII
153151
</button>
154152
<button
155153
onClick={asciiToText}
156-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
154+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
157155
style={{
158156
backgroundColor: 'rgba(0, 0, 0, 0.2)',
159157
color: cardStyle.color,
160158
borderColor: cardStyle.borderColor,
161159
border: '1px solid',
162-
'--hover-bg-color': colors['app-alpha-50'],
163160
}}
164-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
165-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
166161
>
167162
ASCII to Text
168163
</button>
169164
</div>
170165
<div className="flex justify-center gap-4 mb-4">
171166
<button
172167
onClick={textToBinary}
173-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
168+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
174169
style={{
175170
backgroundColor: 'rgba(0, 0, 0, 0.2)',
176171
color: cardStyle.color,
177172
borderColor: cardStyle.borderColor,
178173
border: '1px solid',
179-
'--hover-bg-color': colors['app-alpha-50'],
180174
}}
181-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
182-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
183175
>
184176
Text to Binary
185177
</button>
186178
<button
187179
onClick={binaryToText}
188-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
180+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
189181
style={{
190182
backgroundColor: 'rgba(0, 0, 0, 0.2)',
191183
color: cardStyle.color,
192184
borderColor: cardStyle.borderColor,
193185
border: '1px solid',
194-
'--hover-bg-color': colors['app-alpha-50'],
195186
}}
196-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
197-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
198187
>
199188
Binary to Text
200189
</button>

‎src/pages/apps/Base64ConverterPage.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ 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';
78

89
function Base64ConverterPage() {
910
usePageTitle('Base64 Converter');
@@ -106,31 +107,25 @@ function Base64ConverterPage() {
106107
<div className="flex justify-center gap-4 mb-4">
107108
<button
108109
onClick={encodeBase64}
109-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
110+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
110111
style={{
111112
backgroundColor: 'rgba(0, 0, 0, 0.2)',
112113
color: cardStyle.color,
113114
borderColor: cardStyle.borderColor,
114115
border: '1px solid',
115-
'--hover-bg-color': colors['app-alpha-50'],
116116
}}
117-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
118-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
119117
>
120118
Encode Base64
121119
</button>
122120
<button
123121
onClick={decodeBase64}
124-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
122+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
125123
style={{
126124
backgroundColor: 'rgba(0, 0, 0, 0.2)',
127125
color: cardStyle.color,
128126
borderColor: cardStyle.borderColor,
129127
border: '1px solid',
130-
'--hover-bg-color': colors['app-alpha-50'],
131128
}}
132-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
133-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
134129
>
135130
Decode Base64
136131
</button>

‎src/pages/apps/ColorPaletteGeneratorPage.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ 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';
78

89
function ColorPaletteGeneratorPage() {
910
usePageTitle('Color Palette Generator');
@@ -77,16 +78,13 @@ function ColorPaletteGeneratorPage() {
7778
<div className="flex justify-center gap-4 mb-4">
7879
<button
7980
onClick={generatePalette}
80-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
81+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
8182
style={{
8283
backgroundColor: 'rgba(0, 0, 0, 0.2)',
8384
color: cardStyle.color,
8485
borderColor: cardStyle.borderColor,
8586
border: '1px solid',
86-
'--hover-bg-color': colors['app-alpha-50'],
8787
}}
88-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
89-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
9088
>
9189
Generate New Palette
9290
</button>

‎src/pages/apps/DiceRollerPage.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,3 @@
5050
opacity: 1;
5151
}
5252
}
53-
54-
.roll-button:not(:disabled):hover {
55-
background-color: rgba(158, 197, 171, 0.5) !important;
56-
}

‎src/pages/apps/DiceRollerPage.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import colors from '../../config/colors';
66
import { useToast } from '../../hooks/useToast';
77
import Dice from '../../components/Dice';
88
import './DiceRollerPage.css'; // Import the CSS for animations
9+
import '../../styles/app-buttons.css';
910

1011
const DiceRollerPage = () => {
1112
usePageTitle('Dice Roller');

‎src/pages/apps/FantasyNameGeneratorPage.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
44
import { ArrowLeftIcon, CopySimpleIcon } from '@phosphor-icons/react';
55
import colors from '../../config/colors';
66
import { useToast } from '../../hooks/useToast';
7+
import '../../styles/app-buttons.css';
78

89
const FantasyNameGeneratorPage = () => {
910
usePageTitle('Fantasy Name Generator');
@@ -157,16 +158,13 @@ const FantasyNameGeneratorPage = () => {
157158
</div>
158159
<button
159160
onClick={generateName}
160-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
161+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
161162
style={{
162163
backgroundColor: 'rgba(0, 0, 0, 0.2)',
163164
color: cardStyle.color,
164165
borderColor: cardStyle.borderColor,
165166
border: '1px solid',
166-
'--hover-bg-color': colors['app-alpha-50'],
167167
}}
168-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
169-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
170168
>
171169
Generate Name
172170
</button>

‎src/pages/apps/HashGeneratorPage.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ 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';
78

89
function HashGeneratorPage() {
910
usePageTitle('Hash Generator');
@@ -114,16 +115,13 @@ function HashGeneratorPage() {
114115
<div className="flex justify-center gap-4 mb-4">
115116
<button
116117
onClick={generateAllHashes}
117-
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
118+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out app-button-hover"
118119
style={{
119120
backgroundColor: 'rgba(0, 0, 0, 0.2)',
120121
color: cardStyle.color,
121122
borderColor: cardStyle.borderColor,
122123
border: '1px solid',
123-
'--hover-bg-color': colors['app-alpha-50'],
124124
}}
125-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
126-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
127125
>
128126
Generate All Hashes
129127
</button>

‎src/pages/apps/IpPage.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ArrowLeftIcon, Clipboard as ClipboardIcon } 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';
78

89
function IpPage() {
910
usePageTitle('Show my IP');
@@ -97,15 +98,12 @@ function IpPage() {
9798
<div className="mt-6 flex justify-center">
9899
<button
99100
onClick={handleCopy}
100-
className="flex items-center gap-2 text-lg font-semibold px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out"
101+
className="flex items-center gap-2 text-lg font-semibold px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out app-button-hover"
101102
style={{
102103
backgroundColor: 'rgba(0, 0, 0, 0.2)',
103104
color: cardStyle.color,
104105
borderColor: cardStyle.borderColor,
105-
'--hover-bg-color': colors['app-alpha-50'],
106106
}}
107-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
108-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
109107
>
110108
<ClipboardIcon size={24} />
111109
Copy

‎src/pages/apps/TournamentBracketPage.js‎

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

89
function TournamentBracketPage() {
910
usePageTitle('Tournament Bracket');
@@ -17,10 +18,6 @@ function TournamentBracketPage() {
1718

1819
// const detailTextColor = colors['app-light'];
1920

20-
const buttonStyle = {
21-
borderColor: colors['app-alpha-50'],
22-
};
23-
2421
const [competitors, setCompetitors] = useState([]);
2522
const [newCompetitor, setNewCompetitor] = useState('');
2623
const [newCompetitorCharLimitError, setNewCompetitorCharLimitError] = useState(false);

‎src/pages/apps/UrlConverterPage.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ 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';
78

89
function UrlConverterPage() {
910
usePageTitle('URL Encoder/Decoder');
@@ -107,31 +108,25 @@ function UrlConverterPage() {
107108
<div className="flex justify-center gap-4 mb-4">
108109
<button
109110
onClick={encodeUrl}
110-
className="px-6 py-2 rounded-md text-lg font-semibold transition-colors duration-300 ease-in-out"
111+
className="px-6 py-2 rounded-md text-lg font-semibold transition-colors duration-300 ease-in-out app-button-hover"
111112
style={{
112113
backgroundColor: 'rgba(0, 0, 0, 0.2)',
113114
color: cardStyle.color,
114115
borderColor: cardStyle.borderColor,
115116
border: '1px solid',
116-
'--hover-bg-color': colors['app-alpha-50'],
117117
}}
118-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
119-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
120118
>
121119
Encode URL
122120
</button>
123121
<button
124122
onClick={decodeUrl}
125-
className="px-6 py-2 rounded-md text-lg font-semibold transition-colors duration-300 ease-in-out"
123+
className="px-6 py-2 rounded-md text-lg font-semibold transition-colors duration-300 ease-in-out app-button-hover"
126124
style={{
127125
backgroundColor: 'rgba(0, 0, 0, 0.2)',
128126
color: cardStyle.color,
129127
borderColor: cardStyle.borderColor,
130128
border: '1px solid',
131-
'--hover-bg-color': colors['app-alpha-50'],
132129
}}
133-
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
134-
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
135130
>
136131
Decode URL
137132
</button>

0 commit comments

Comments
 (0)