Skip to content

Commit f419a50

Browse files
JexsieJexsie
authored
fix ui for the initiatives (#167)
* fix ui for the initiatives Signed-off-by: Jessie Ssebuliba <[email protected]> * add tests Signed-off-by: Jessie Ssebuliba <[email protected]> * try mouseleave and mousenter event listeners Signed-off-by: Jessie Ssebuliba <[email protected]> * rebuild tests Signed-off-by: Jessie Ssebuliba <[email protected]> * remove plus on mobile Signed-off-by: Jessie Ssebuliba <[email protected]> * fix positioning of the become sustainer component Signed-off-by: Jessie Ssebuliba <[email protected]> --------- Signed-off-by: Jessie Ssebuliba <[email protected]>
1 parent 983f0b3 commit f419a50

File tree

3 files changed

+108
-45
lines changed

3 files changed

+108
-45
lines changed

‎src/app/[locale]/sustainers/__tests__/__snapshots__/page.test.tsx.snap‎

Lines changed: 74 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ exports[`Sustainers page > renders correctly 1`] = `
9191
</div>
9292
</div>
9393
<div
94-
class="flex flex-col md:flex-row gap-6 justify-center absolute items-center mt-[30px] md:-mt-[98px] w-full z-10"
94+
class="flex flex-col md:flex-row gap-6 justify-center absolute items-center mt-[30px] md:-mt-[72px] w-full z-10"
9595
>
9696
<a
9797
class="transform transition-transform duration-300 hover:scale-105"
@@ -279,9 +279,13 @@ exports[`Sustainers page > renders correctly 1`] = `
279279
id="toggle-0"
280280
type="checkbox"
281281
/>
282+
<span
283+
class="hidden lg:peer-checked:hidden lg:block absolute bottom-[10px] right-[20px] text-[#ff1464]"
284+
>
285+
+
286+
</span>
282287
<div
283-
class="relative group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
284-
role="button"
288+
class="relative transform false group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 lg:peer-checked:backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
285289
>
286290
<label
287291
for="toggle-0"
@@ -314,13 +318,18 @@ exports[`Sustainers page > renders correctly 1`] = `
314318
</label>
315319
</div>
316320
<div
317-
class="hidden lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
321+
class="hidden transform false lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
318322
>
319323
<p
320324
class="text-white text-sm px-4 text-center leading-relaxed"
321325
>
322326
Contribute to rigorous security practices, including regular audits and vulnerability management. Your support ensures the continuation of our Secure Development efforts, encompassing SBOM, reproducible builds, SLSA, OpenChain Conformance, security audits, and vulnerability reports.
323327
</p>
328+
<span
329+
class="absolute bottom-[10px] right-[20px] text-[#ff1464]"
330+
>
331+
_
332+
</span>
324333
</div>
325334
</div>
326335
<div
@@ -332,9 +341,13 @@ exports[`Sustainers page > renders correctly 1`] = `
332341
id="toggle-1"
333342
type="checkbox"
334343
/>
344+
<span
345+
class="hidden lg:peer-checked:hidden lg:block absolute bottom-[10px] right-[20px] text-[#ff1464]"
346+
>
347+
+
348+
</span>
335349
<div
336-
class="relative group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
337-
role="button"
350+
class="relative transform false group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 lg:peer-checked:backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
338351
>
339352
<label
340353
for="toggle-1"
@@ -367,13 +380,18 @@ exports[`Sustainers page > renders correctly 1`] = `
367380
</label>
368381
</div>
369382
<div
370-
class="hidden lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
383+
class="hidden transform false lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
371384
>
372385
<p
373386
class="text-white text-sm px-4 text-center leading-relaxed"
374387
>
375388
Ensure your Java environments stay up-to-date with the latest advancements by sponsoring additional infrastructure services. This support will enable us to publish feature and CPU releases within our ambitious delivery targets, keeping your systems at the forefront of innovation.
376389
</p>
390+
<span
391+
class="absolute bottom-[10px] right-[20px] text-[#ff1464]"
392+
>
393+
_
394+
</span>
377395
</div>
378396
</div>
379397
<div
@@ -385,9 +403,13 @@ exports[`Sustainers page > renders correctly 1`] = `
385403
id="toggle-2"
386404
type="checkbox"
387405
/>
406+
<span
407+
class="hidden lg:peer-checked:hidden lg:block absolute bottom-[10px] right-[20px] text-[#ff1464]"
408+
>
409+
+
410+
</span>
388411
<div
389-
class="relative group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
390-
role="button"
412+
class="relative transform false group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 lg:peer-checked:backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
391413
>
392414
<label
393415
for="toggle-2"
@@ -420,13 +442,18 @@ exports[`Sustainers page > renders correctly 1`] = `
420442
</label>
421443
</div>
422444
<div
423-
class="hidden lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
445+
class="hidden transform false lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
424446
>
425447
<p
426448
class="text-white text-sm px-4 text-center leading-relaxed"
427449
>
428450
Ensure access to Java versions tailored to your specific architecture and operating system needs. Get the precise build for your software services and save money by avoiding the costs of creating your own builds. Your funding allows us to deliver across a broad range of platforms and architectures
429451
</p>
452+
<span
453+
class="absolute bottom-[10px] right-[20px] text-[#ff1464]"
454+
>
455+
_
456+
</span>
430457
</div>
431458
</div>
432459
<div
@@ -438,9 +465,13 @@ exports[`Sustainers page > renders correctly 1`] = `
438465
id="toggle-3"
439466
type="checkbox"
440467
/>
468+
<span
469+
class="hidden lg:peer-checked:hidden lg:block absolute bottom-[10px] right-[20px] text-[#ff1464]"
470+
>
471+
+
472+
</span>
441473
<div
442-
class="relative group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
443-
role="button"
474+
class="relative transform lg:peer-checked:translate-y-[-236px] group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 lg:peer-checked:backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
444475
>
445476
<label
446477
for="toggle-3"
@@ -473,13 +504,18 @@ exports[`Sustainers page > renders correctly 1`] = `
473504
</label>
474505
</div>
475506
<div
476-
class="hidden lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
507+
class="hidden transform lg:peer-checked:translate-y-[-236px] lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
477508
>
478509
<p
479510
class="text-white text-sm px-4 text-center leading-relaxed"
480511
>
481512
Support the continuous improvement of Temurin and other Adoptium projects. We are leaders in Secure Development, Quality Assurance, Migration Tools, and many other areas where we have been developing bleeding-edge, innovative solutions. Your funding allows us to continue to develop improvements that benefit the entire Java ecosystem.
482513
</p>
514+
<span
515+
class="absolute bottom-[10px] right-[20px] text-[#ff1464]"
516+
>
517+
_
518+
</span>
483519
</div>
484520
</div>
485521
<div
@@ -491,9 +527,13 @@ exports[`Sustainers page > renders correctly 1`] = `
491527
id="toggle-4"
492528
type="checkbox"
493529
/>
530+
<span
531+
class="hidden lg:peer-checked:hidden lg:block absolute bottom-[10px] right-[20px] text-[#ff1464]"
532+
>
533+
+
534+
</span>
494535
<div
495-
class="relative group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
496-
role="button"
536+
class="relative transform lg:peer-checked:translate-y-[-236px] group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 lg:peer-checked:backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
497537
>
498538
<label
499539
for="toggle-4"
@@ -526,13 +566,18 @@ exports[`Sustainers page > renders correctly 1`] = `
526566
</label>
527567
</div>
528568
<div
529-
class="hidden lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
569+
class="hidden transform lg:peer-checked:translate-y-[-236px] lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
530570
>
531571
<p
532572
class="text-white text-sm px-4 text-center leading-relaxed"
533573
>
534574
Help us maintain and optimize our testing infrastructure across all necessary platforms and versions, ensuring robust and reliable releases. Your funding allows us to assess and include tests that your organization cares about and proactively discover and mitigate defects before they land in your domain.
535575
</p>
576+
<span
577+
class="absolute bottom-[10px] right-[20px] text-[#ff1464]"
578+
>
579+
_
580+
</span>
536581
</div>
537582
</div>
538583
<div
@@ -544,9 +589,13 @@ exports[`Sustainers page > renders correctly 1`] = `
544589
id="toggle-5"
545590
type="checkbox"
546591
/>
592+
<span
593+
class="hidden lg:peer-checked:hidden lg:block absolute bottom-[10px] right-[20px] text-[#ff1464]"
594+
>
595+
+
596+
</span>
547597
<div
548-
class="relative group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
549-
role="button"
598+
class="relative transform lg:peer-checked:translate-y-[-236px] group h-[212px] w-full border-[1px] border-[#39314a] hover:border-[#ff1464]/40 rounded-[20px] cursor-pointer overflow-visible transition-all duration-300 lg:peer-checked:border-[#ff1464]/70 lg:peer-checked:border-b-0 lg:peer-checked:rounded-bl-none lg:peer-checked:rounded-br-none bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 lg:peer-checked:backdrop-blur-sm shadow-lg hover:shadow-[#ff1464]/5"
550599
>
551600
<label
552601
for="toggle-5"
@@ -579,13 +628,18 @@ exports[`Sustainers page > renders correctly 1`] = `
579628
</label>
580629
</div>
581630
<div
582-
class="hidden lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
631+
class="hidden transform lg:peer-checked:translate-y-[-236px] lg:peer-checked:block absolute backdrop-blur-xl h-auto min-h-[236px] top-full left-0 w-full mt-[-1px] border-[1px] border-t-0 border-[#ff1464]/70 rounded-b-[20px] z-10 p-6 bg-gradient-to-b from-[#1e1133]/60 to-[#0d0129]/60 shadow-lg shadow-[#ff1464]/10"
583632
>
584633
<p
585634
class="text-white text-sm px-4 text-center leading-relaxed"
586635
>
587636
Support the growth of a diverse and vibrant Java community. Your sponsorship helps maintain and enhance Adoptium projects, ensuring a stable, scalable, and interoperable Java ecosystem. Additionally, you will have the opportunity to support events and marketing initiatives and actively participating in community activities, spreading awareness and fostering collaboration.
588637
</p>
638+
<span
639+
class="absolute bottom-[10px] right-[20px] text-[#ff1464]"
640+
>
641+
_
642+
</span>
589643
</div>
590644
</div>
591645
</div>
@@ -1355,7 +1409,7 @@ exports[`Sustainers page > renders correctly 1`] = `
13551409
</div>
13561410
</div>
13571411
<div
1358-
class="flex flex-col md:flex-row gap-6 justify-center absolute items-center mt-[30px] md:-mt-[98px] w-full z-10 md:mt-10 md:mx-auto"
1412+
class="flex flex-col md:flex-row gap-6 justify-center absolute items-center mt-[30px] md:-mt-[72px] w-full z-10 md:mt-10 md:mx-auto"
13591413
>
13601414
<a
13611415
class="transform transition-transform duration-300 hover:scale-105"

‎src/components/Sustainers/BecomeSustainer/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface BecomeSustainerProps {
1212
const BecomeSustainer: React.FC<BecomeSustainerProps> = ({ classes = "" }) => (
1313
<div
1414
className={classNames(
15-
"flex flex-col md:flex-row gap-6 justify-center absolute items-center mt-[30px] md:-mt-[98px] w-full z-10",
15+
"flex flex-col md:flex-row gap-6 justify-center absolute items-center mt-[30px] md:-mt-[72px] w-full z-10",
1616
classes,
1717
)}
1818
>

0 commit comments

Comments
 (0)