Skip to content

Commit 027776a

Browse files
techmannihtechmannih
authored
Fix: Make entire button area clickable by applying styles directly to <Link> (#1579)
* Fix: Make entire button area clickable by applying styles directly to <a> tag * replacing a tag to link for routing
1 parent b612950 commit 027776a

File tree

4 files changed

+52
-37
lines changed

4 files changed

+52
-37
lines changed

‎components/Layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -343,9 +343,9 @@ const Footer = () => (
343343
</a>
344344
</div>
345345
<div className='flex flex-col text-center sm:text-left'>
346-
<a href='/overview/code-of-conduct' className='text-white mb-2'>
346+
<Link href='/overview/code-of-conduct' className='text-white mb-2'>
347347
Code of Conduct
348-
</a>
348+
</Link>
349349
</div>
350350
</div>
351351
<div className='grid grid-cols-3 md:grid-cols-1 mx-auto md:mt-8 mb-4 md:mb-0 gap-x-4 gap-y-4 md:gap-x-0 md:gap-y-0'>

‎pages/blog/index.page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export default function StaticMarkdownPage({
189189
</div>
190190

191191
<div className='flex h-full flex-col justify-center items-center text-sm sm:text-base px-4 my-2'>
192-
<a
192+
<Link
193193
href='/rss/feed.xml'
194194
className='flex items-center text-blue-500 hover:text-blue-600 cursor-pointer'
195195
>
@@ -201,7 +201,7 @@ export default function StaticMarkdownPage({
201201
width={20}
202202
/>
203203
RSS&nbsp;Feed
204-
</a>
204+
</Link>
205205
</div>
206206
</div>
207207
{/* Filter Buttons */}

‎pages/community/index.page.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -164,13 +164,13 @@ export default function communityPages(props: any) {
164164
className='mt-10 mx-auto flex justify-center items-center'
165165
data-testid='HomeCard-button'
166166
>
167-
<a
167+
<Link
168168
href='/ambassadors'
169169
rel='noopener noreferrer'
170170
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
171171
>
172172
Become an ambassador
173-
</a>
173+
</Link>
174174
</div>
175175
</div>
176176
</div>
@@ -191,13 +191,13 @@ export default function communityPages(props: any) {
191191
projects, and connect with +5000 practitioners and experts.
192192
</h2>
193193
<div className='mt-10'>
194-
<a
194+
<Link
195195
href='/slack'
196196
rel='noopener noreferrer'
197197
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
198198
>
199199
Join Slack
200-
</a>
200+
</Link>
201201
</div>
202202
</div>
203203
</div>
@@ -298,13 +298,13 @@ export default function communityPages(props: any) {
298298
</p>
299299
</h2>
300300
<div className='mt-10'>
301-
<a
301+
<Link
302302
href='/blog'
303303
rel='noopener noreferrer'
304304
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
305305
>
306306
Read blog
307-
</a>
307+
</Link>
308308
</div>
309309
</div>
310310
</div>
@@ -376,13 +376,13 @@ export default function communityPages(props: any) {
376376
</div>
377377
</Link>
378378
<div className='mx-auto '>
379-
<a
379+
<Link
380380
href='/blog'
381381
rel='noopener noreferrer'
382382
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none mt-4'
383383
>
384384
Read more posts
385-
</a>
385+
</Link>
386386
</div>
387387
</div>
388388
</div>

‎pages/index.page.tsx‎

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -301,9 +301,13 @@ const Home = (props: any) => {
301301
<h2 className='text-h3mobile lg:text-h3 text-white mb-6'>
302302
Start learning JSON Schema
303303
</h2>
304-
<button className='w-[170px] h-[45px] mx-auto hover:bg-blue-700 transition-all duration-300 ease-in-out rounded border-2 bg-primary text-white font-semibold dark:border-none'>
305-
<a href='/docs '>Read the docs</a>
306-
</button>
304+
<Link
305+
href='/docs'
306+
rel='noopener noreferrer'
307+
className='w-[170px] h-[45px] mx-auto hover:bg-blue-700 transition-all duration-300 ease-in-out rounded border-2 bg-primary text-white font-semibold dark:border-none flex items-center justify-center'
308+
>
309+
Read the docs
310+
</Link>
307311
</div>
308312
</section>
309313

@@ -331,9 +335,13 @@ const Home = (props: any) => {
331335
Generators, Linters, and other JSON Schema Utilities made by this
332336
amazing Community.
333337
</p>
334-
<button className='w-full md:w-1/2 md:ml-28 lg:ml-0 mx-auto hover:bg-blue-700 transition-all duration-300 ease-in-out h-[45px] rounded border-2 bg-primary text-white dark:border-none'>
335-
<a href='/tools/'>Explore</a>
336-
</button>
338+
<Link
339+
href='/tools/'
340+
rel='noopener noreferrer'
341+
className='w-full md:w-1/2 md:ml-28 lg:ml-0 mx-auto hover:bg-blue-700 transition-all duration-300 ease-in-out h-[45px] rounded border-2 bg-primary text-white dark:border-none flex items-center justify-center'
342+
>
343+
Explore
344+
</Link>
337345
</div>
338346
</section>
339347

@@ -504,16 +512,21 @@ const Home = (props: any) => {
504512
third Monday of the month at 12:00 PT.
505513
</p>
506514
<div className=''>
507-
<button className='max-w-[300px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] mb-4 flex items-center justify-center mx-auto dark:border-none'>
508-
<a href='https://github.com/orgs/json-schema-org/discussions/35'>
509-
Open Community Working Meetings
510-
</a>
511-
</button>
512-
<button className='max-w-[200px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'>
513-
<a href='https://github.com/orgs/json-schema-org/discussions/34/'>
514-
Office Hours
515-
</a>
516-
</button>
515+
<a
516+
href='https://github.com/orgs/json-schema-org/discussions/35'
517+
rel='noopener noreferrer'
518+
className='max-w-[300px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] mb-4 flex items-center justify-center mx-auto dark:border-none'
519+
>
520+
Open Community Working Meetings
521+
</a>
522+
523+
<a
524+
href='https://github.com/orgs/json-schema-org/discussions/34/'
525+
rel='noopener noreferrer'
526+
className='max-w-[200px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'
527+
>
528+
Office Hours
529+
</a>
517530
</div>
518531
</div>
519532
<div className='p-2'>
@@ -560,11 +573,13 @@ const Home = (props: any) => {
560573
<h2 className='text-h3mobile lg:text-h3 text-white mb-6 dark:text-slate-200'>
561574
Start contributing to JSON Schema
562575
</h2>
563-
<button className='w-[170px] h-[45px] mx-auto rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white font-semibold dark:border-none'>
564-
<a href='https://github.com/json-schema-org#-contributing-to-json-schema'>
565-
Contribute
566-
</a>
567-
</button>
576+
<Link
577+
href='https://github.com/json-schema-org#-contributing-to-json-schema'
578+
rel='noopener noreferrer'
579+
className='w-[170px] h-[45px] mx-auto rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white font-semibold dark:border-none flex items-center justify-center'
580+
>
581+
Contribute
582+
</Link>
568583
</div>
569584
</section>
570585

@@ -606,7 +621,7 @@ const Home = (props: any) => {
606621
<h3 className='p-4 text-h4mobile md:text-h4 font-semibold my-4 dark:text-slate-200'>
607622
Gold Sponsors
608623
</h3>
609-
<a
624+
<Link
610625
href='https://opencollective.com/json-schema/contribute/golden-sponsor-68354/checkout?interval=month&amount=1000&name=&legalName=&email='
611626
target='_blank'
612627
rel='noreferrer'
@@ -627,11 +642,11 @@ const Home = (props: any) => {
627642
/>
628643
</svg>
629644
<p className='block'>Your logo here</p>
630-
</a>
645+
</Link>
631646
<h3 className='p-4 text-h4mobile md:text-h4 font-semibold my-4 dark:text-slate-200'>
632647
Silver Sponsors
633648
</h3>
634-
<a
649+
<Link
635650
href='https://opencollective.com/json-schema/contribute/silver-sponsor-68353/checkout?interval=month&amount=500&name=&legalName=&email='
636651
target='_blank'
637652
rel='noreferrer'
@@ -652,7 +667,7 @@ const Home = (props: any) => {
652667
/>
653668
</svg>
654669
<p>Your logo here</p>
655-
</a>
670+
</Link>
656671
<h3 className='p-4 text-h4mobile md:text-h4 font-semibold my-4 dark:text-slate-200'>
657672
Bronze Sponsors
658673
</h3>

0 commit comments

Comments
 (0)