Skip to content

Commit 725a742

Browse files
fezcodefezcode
committed
fix: football emblem creator fixes
1 parent 9fb7817 commit 725a742

File tree

1 file changed

+41
-32
lines changed

1 file changed

+41
-32
lines changed

‎src/pages/apps/FootballEmblemCreatorPage.js‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import {
5252
LightbulbIcon,
5353
InfinityIcon,
5454
BrainIcon,
55+
PercentIcon,
5556
} from '@phosphor-icons/react';
5657
import CustomDropdown from '../../components/CustomDropdown'; // Add this line
5758
import colors from '../../config/colors';
@@ -86,14 +87,7 @@ const FootballEmblemCreatorPage = () => {
8687
const [fontSize, setFontSize] = useState('10');
8788
const [foundedYearFontSize, setFoundedYearFontSize] = useState('6');
8889
const [showEstPrefix, setShowEstPrefix] = useState(true);
89-
90-
const cardStyle = {
91-
backgroundColor: colors['app-alpha-10'],
92-
borderColor: colors['app-alpha-50'],
93-
color: colors.app,
94-
};
95-
96-
const buttonStyle = `px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out roll-button`;
90+
const [opacity, setOpacity] = useState("0.5");
9791

9892
const icons = {
9993
soccer: <SoccerBallIcon weight="fill" />,
@@ -204,49 +198,49 @@ const FootballEmblemCreatorPage = () => {
204198
<g clipPath="url(#shieldClip)">
205199
{pattern === 'stripes' && (
206200
<React.Fragment>
207-
<rect x="30" y="0" width="10" height="100" fill={secondaryColor} opacity="0.5" />
208-
<rect x="60" y="0" width="10" height="100" fill={secondaryColor} opacity="0.5" />
201+
<rect x="30" y="11" width="10" height="100" fill={secondaryColor} opacity={opacity} />
202+
<rect x="60" y="11" width="10" height="100" fill={secondaryColor} opacity={opacity} />
209203
</React.Fragment>
210204
)}
211205
{pattern === 'half' && (
212-
<rect x="50" y="0" width="50" height="100" fill={secondaryColor} opacity="0.5" />
206+
<rect x="50" y="0" width="50" height="100" fill={secondaryColor} opacity={opacity} />
213207
)}
214208
{pattern === 'cross' && (
215209
<React.Fragment>
216-
<rect x="40" y="0" width="20" height="100" fill={secondaryColor} opacity="0.5" />
217-
<rect x="0" y="40" width="100" height="20" fill={secondaryColor} opacity="0.5" />
210+
<rect x="40" y="0" width="20" height="100" fill={secondaryColor} opacity={opacity} />
211+
<rect x="0" y="40" width="100" height="20" fill={secondaryColor} opacity={opacity} />
218212
</React.Fragment>
219213
)}
220214
{pattern === 'diagonal' && (
221-
<path d="M0,0 L100,100 L100,80 L20,0 Z" fill={secondaryColor} opacity="0.5" />
215+
<path d="M0,0 L100,100 L100,80 L20,0 Z" fill={secondaryColor} opacity={opacity} />
222216
)}
223217
{pattern === 'hoops' && (
224218
<React.Fragment>
225-
<rect x="0" y="20" width="100" height="10" fill={secondaryColor} opacity="0.5" />
226-
<rect x="0" y="40" width="100" height="10" fill={secondaryColor} opacity="0.5" />
227-
<rect x="0" y="60" width="100" height="10" fill={secondaryColor} opacity="0.5" />
228-
<rect x="0" y="80" width="100" height="10" fill={secondaryColor} opacity="0.5" />
219+
<rect x="0" y="20" width="100" height="10" fill={secondaryColor} opacity={opacity} />
220+
<rect x="0" y="40" width="100" height="10" fill={secondaryColor} opacity={opacity} />
221+
<rect x="0" y="60" width="100" height="10" fill={secondaryColor} opacity={opacity} />
222+
<rect x="0" y="80" width="100" height="10" fill={secondaryColor} opacity={opacity} />
229223
</React.Fragment>
230224
)}
231225
{pattern === 'checkered' && (
232226
<React.Fragment>
233-
<rect x="0" y="0" width="20" height="20" fill={secondaryColor} opacity="0.5" />
234-
<rect x="40" y="0" width="20" height="20" fill={secondaryColor} opacity="0.5" />
235-
<rect x="80" y="0" width="20" height="20" fill={secondaryColor} opacity="0.5" />
227+
<rect x="0" y="0" width="20" height="20" fill={secondaryColor} opacity={opacity} />
228+
<rect x="40" y="0" width="20" height="20" fill={secondaryColor} opacity={opacity} />
229+
<rect x="80" y="0" width="20" height="20" fill={secondaryColor} opacity={opacity} />
236230

237-
<rect x="20" y="20" width="20" height="20" fill={secondaryColor} opacity="0.5" />
238-
<rect x="60" y="20" width="20" height="20" fill={secondaryColor} opacity="0.5" />
231+
<rect x="20" y="20" width="20" height="20" fill={secondaryColor} opacity={opacity} />
232+
<rect x="60" y="20" width="20" height="20" fill={secondaryColor} opacity={opacity} />
239233

240-
<rect x="0" y="40" width="20" height="20" fill={secondaryColor} opacity="0.5" />
241-
<rect x="40" y="40" width="20" height="20" fill={secondaryColor} opacity="0.5" />
242-
<rect x="80" y="40" width="20" height="20" fill={secondaryColor} opacity="0.5" />
234+
<rect x="0" y="40" width="20" height="20" fill={secondaryColor} opacity={opacity} />
235+
<rect x="40" y="40" width="20" height="20" fill={secondaryColor} opacity={opacity} />
236+
<rect x="80" y="40" width="20" height="20" fill={secondaryColor} opacity={opacity} />
243237

244-
<rect x="20" y="60" width="20" height="20" fill={secondaryColor} opacity="0.5" />
245-
<rect x="60" y="60" width="20" height="20" fill={secondaryColor} opacity="0.5" />
238+
<rect x="20" y="60" width="20" height="20" fill={secondaryColor} opacity={opacity} />
239+
<rect x="60" y="60" width="20" height="20" fill={secondaryColor} opacity={opacity} />
246240

247-
<rect x="0" y="80" width="20" height="20" fill={secondaryColor} opacity="0.5" />
248-
<rect x="40" y="80" width="20" height="20" fill={secondaryColor} opacity="0.5" />
249-
<rect x="80" y="80" width="20" height="20" fill={secondaryColor} opacity="0.5" />
241+
<rect x="0" y="80" width="20" height="20" fill={secondaryColor} opacity={opacity} />
242+
<rect x="40" y="80" width="20" height="20" fill={secondaryColor} opacity={opacity} />
243+
<rect x="80" y="80" width="20" height="20" fill={secondaryColor} opacity={opacity} />
250244
</React.Fragment>
251245
)}
252246
{pattern === 'diamonds' && (
@@ -320,7 +314,7 @@ const FootballEmblemCreatorPage = () => {
320314
</div>
321315
</div>
322316
<div>
323-
<div className="grid grid-cols-2 gap-2">
317+
<div className="grid grid-cols-3 gap-2">
324318
<div className="col-span-1">
325319
<label className="block text-sm font-medium text-gray-400 mb-1">Team Font Size</label>
326320
<CustomDropdown
@@ -349,6 +343,21 @@ const FootballEmblemCreatorPage = () => {
349343
icon={TextAaIcon}
350344
/>
351345
</div>
346+
<div className="col-span-1">
347+
<label className="block text-sm font-medium text-gray-400 mb-1">Sec. Color Opacity</label>
348+
<CustomDropdown
349+
options={[
350+
{ label: '25%', value: "0.25" },
351+
{ label: '50%', value: "0.5" },
352+
{ label: '75%', value: "0.75" },
353+
{ label: '100%', value: "1.0" },
354+
]}
355+
value={opacity}
356+
onChange={setOpacity}
357+
label="Select Opacity"
358+
icon={PercentIcon}
359+
/>
360+
</div>
352361
</div>
353362
</div>
354363

0 commit comments

Comments
 (0)