Skip to content

Commit 272b090

Browse files
tannerlinsleytannerlinsley
committed
More consistency for buttons
1 parent 345c8d0 commit 272b090

28 files changed

+168
-188
lines changed

‎src/components/BottomCTA.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import * as React from 'react'
22
import type { LinkProps } from '@tanstack/react-router'
33
import { Link } from '@tanstack/react-router'
4-
import { twMerge } from 'tailwind-merge'
5-
import { buttonStyles } from './Button'
4+
import { Button } from './Button'
65

76
type BottomCTAProps = {
87
linkProps: Omit<LinkProps, 'className' | 'children'>
@@ -24,16 +23,13 @@ export function BottomCTA({
2423
Only one thing left to do...
2524
</div>
2625
<div>
27-
<Link
26+
<Button
27+
as={Link}
2828
{...linkProps}
29-
className={twMerge(
30-
buttonStyles,
31-
'inline-flex py-2 px-4 font-black shadow-xs hover:shadow-sm',
32-
className,
33-
)}
29+
className={`py-2 px-4 text-sm shadow-xs hover:shadow-sm ${className}`}
3430
>
3531
{label}
36-
</Link>
32+
</Button>
3733
</div>
3834
</div>
3935
)

‎src/components/CookieConsent.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Link } from '@tanstack/react-router'
22
import { useEffect, useState } from 'react'
3+
import { Button } from './Button'
34

45
declare global {
56
interface Window {
@@ -174,25 +175,25 @@ export default function CookieConsent() {
174175
</Link>{' '}
175176
for details.
176177
</span>
177-
<div className="flex gap-2 flex-wrap items-center text-white font-black">
178-
<button
178+
<div className="flex gap-2 flex-wrap items-center">
179+
<Button
179180
onClick={rejectAllCookies}
180-
className="rounded-md px-2 py-0.5 bg-rose-500 uppercase hover:bg-rose-600"
181+
className="bg-rose-500 border-rose-500 hover:bg-rose-600 text-white"
181182
>
182183
Reject All
183-
</button>
184-
<button
184+
</Button>
185+
<Button
185186
onClick={openSettings}
186-
className="rounded-md px-2 py-0.5 bg-gray-500 uppercase hover:bg-gray-600"
187+
className="bg-gray-500 border-gray-500 hover:bg-gray-600 text-white"
187188
>
188189
Customize
189-
</button>
190-
<button
190+
</Button>
191+
<Button
191192
onClick={acceptAllCookies}
192-
className="rounded-md px-2 py-0.5 bg-emerald-500 uppercase hover:bg-emerald-600"
193+
className="bg-emerald-500 border-emerald-500 hover:bg-emerald-600 text-white"
193194
>
194195
Accept All
195-
</button>
196+
</Button>
196197
</div>
197198
</div>
198199
)}
@@ -255,12 +256,12 @@ export default function CookieConsent() {
255256
</label>
256257
</div>
257258
<div className="mt-6">
258-
<button
259+
<Button
259260
onClick={closeSettings}
260-
className="bg-emerald-500 text-white px-4 py-2 rounded-md hover:bg-emerald-600"
261+
className="bg-emerald-500 border-emerald-500 hover:bg-emerald-600 text-white"
261262
>
262263
Save
263-
</button>
264+
</Button>
264265
</div>
265266
</div>
266267
</div>

‎src/components/DefaultCatchBoundary.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
useMatch,
77
useRouter,
88
} from '@tanstack/react-router'
9+
import { Button } from './Button'
910

1011
// type DefaultCatchBoundaryType = {
1112
// status: number
@@ -33,32 +34,34 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
3334
</h1>
3435
<ErrorComponent error={error} />
3536
<div className="flex gap-2 items-center flex-wrap">
36-
<button
37+
<Button
3738
onClick={() => {
3839
router.invalidate()
3940
}}
40-
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
41+
className="bg-gray-600 border-gray-600 hover:bg-gray-700 text-white"
4142
>
4243
Try Again
43-
</button>
44+
</Button>
4445
{isRoot ? (
45-
<Link
46+
<Button
47+
as={Link}
4648
to="/"
47-
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
49+
className="bg-gray-600 border-gray-600 hover:bg-gray-700 text-white"
4850
>
4951
TanStack Home
50-
</Link>
52+
</Button>
5153
) : (
52-
<Link
54+
<Button
55+
as={Link}
5356
to="/"
54-
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
55-
onClick={(e) => {
57+
className="bg-gray-600 border-gray-600 hover:bg-gray-700 text-white"
58+
onClick={(e: React.MouseEvent) => {
5659
e.preventDefault()
5760
window.history.back()
5861
}}
5962
>
6063
Go Back
61-
</Link>
64+
</Button>
6265
)}
6366
</div>
6467
</div>

‎src/components/LazySponsorSection.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useSuspenseQuery } from '@tanstack/react-query'
33
import { twMerge } from 'tailwind-merge'
44
import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
55
import { getSponsorsForSponsorPack } from '~/server/sponsors'
6-
import { buttonStyles } from './Button'
6+
import { Button } from './Button'
77
import SponsorPack from './SponsorPack'
88
import PlaceholderSponsorPack from './PlaceholderSponsorPack'
99

@@ -28,7 +28,7 @@ export function LazySponsorSection({
2828
title = 'Sponsors',
2929
aspectRatio = '1/1',
3030
showCTA = true,
31-
ctaClassName = 'bg-emerald-500 text-white',
31+
ctaClassName = 'bg-emerald-500 border-emerald-500 hover:bg-emerald-600 text-white',
3232
}: LazySponsorSectionProps) {
3333
const { ref, isIntersecting } = useIntersectionObserver({
3434
rootMargin: '50%', // Half viewport height - triggers when about half a page away
@@ -55,17 +55,14 @@ export function LazySponsorSection({
5555
)}
5656
</div>
5757
{showCTA ? (
58-
<div className="text-center">
59-
<a
58+
<div className="flex justify-center">
59+
<Button
60+
as="a"
6061
href="https://github.com/sponsors/tannerlinsley"
61-
className={twMerge(
62-
buttonStyles,
63-
'inline-flex py-2 px-4 uppercase font-extrabold',
64-
ctaClassName,
65-
)}
62+
className={twMerge('py-2 px-4 text-sm', ctaClassName)}
6663
>
6764
Become a Sponsor!
68-
</a>
65+
</Button>
6966
</div>
7067
) : null}
7168
</div>

‎src/components/LibraryHero.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react'
22
import { twMerge } from 'tailwind-merge'
33
import { Link, LinkProps } from '@tanstack/react-router'
44
import type { Library } from '~/libraries'
5+
import { Button } from './Button'
56

67
type LibraryHeroProps = {
78
project: Library
@@ -48,15 +49,13 @@ export function LibraryHero({ project, cta, actions }: LibraryHeroProps) {
4849
{actions ? (
4950
<div>{actions}</div>
5051
) : cta ? (
51-
<Link
52+
<Button
53+
as={Link}
5254
{...cta.linkProps}
53-
className={twMerge(
54-
'inline-block py-2 px-4 rounded uppercase font-extrabold transition-colors',
55-
cta.className,
56-
)}
55+
className={twMerge('py-2 px-4 text-sm', cta.className)}
5756
>
5857
{cta.label}
59-
</Link>
58+
</Button>
6059
) : null}
6160
</div>
6261
)

‎src/components/NotFound.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Link } from '@tanstack/react-router'
22
import { Ghost } from 'lucide-react'
3+
import { Button } from './Button'
34

45
export function NotFound({ children }: { children?: any }) {
56
return (
@@ -12,18 +13,19 @@ export function NotFound({ children }: { children?: any }) {
1213
<p>The page you are looking for does not exist.</p>
1314
{children || (
1415
<p className="flex items-center gap-2 flex-wrap">
15-
<button
16+
<Button
1617
onClick={() => window.history.back()}
17-
className="bg-emerald-500 text-white p-2 rounded uppercase font-black"
18+
className="bg-emerald-500 border-emerald-500 hover:bg-emerald-600 text-white"
1819
>
1920
Go back
20-
</button>
21-
<Link
21+
</Button>
22+
<Button
23+
as={Link}
2224
to="/"
23-
className="bg-cyan-600 text-white p-2 rounded uppercase font-black"
25+
className="bg-cyan-600 border-cyan-600 hover:bg-cyan-700 text-white"
2426
>
2527
Start Over
26-
</Link>
28+
</Button>
2729
</p>
2830
)}
2931
</div>

‎src/components/PartnersSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function PartnersSection({
3737
<PartnersGrid />
3838
<PartnershipCallout libraryId={libraryId} />
3939
{showPreviousLink ? (
40-
<div className="text-center mt-6">
40+
<div className="flex justify-center mt-6">
4141
<Button
4242
as={Link}
4343
to="/partners"

‎src/components/QueryGGBanner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export function QueryGGBanner() {
5252
{body}
5353
<a
5454
href="https://query.gg?s=tanstack"
55-
className="mt-4 mb-1 xl:mb-2 px-6 py-2 inline-block bg-[#fcba28] text-[#231f20] rounded-full uppercase border border-black cursor-pointer font-black"
55+
className="mt-4 mb-1 xl:mb-2 px-6 py-2 inline-block bg-[#fcba28] text-[#231f20] rounded-full border border-black cursor-pointer font-black"
5656
>
5757
{ppp?.discount ? `Get ${ppp.discount * 100}% off` : 'Join now'}
5858
</a>

‎src/components/RedirectVersionBanner.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useLocalStorage } from '~/utils/useLocalStorage'
22
import { useMounted } from '~/hooks/useMounted'
33
import { Link, useMatches } from '@tanstack/react-router'
4+
import { Button } from './Button'
45

56
export function RedirectVersionBanner(props: {
67
version: string
@@ -39,22 +40,23 @@ export function RedirectVersionBanner(props: {
3940
version?
4041
</p>
4142
<div className="flex gap-2 flex-col lg:flex-row items-center">
42-
<Link
43+
<Button
44+
as={Link}
4345
to={activeMatch.fullPath}
4446
params={{
4547
version: 'latest',
4648
}}
4749
replace
48-
className="bg-black dark:bg-white dark:text-black text-white w-full lg:w-auto py-1 px-2 rounded-md uppercase font-black text-xs"
50+
className="bg-black border-black hover:bg-gray-800 dark:bg-white dark:border-white dark:hover:bg-gray-200 dark:text-black text-white w-full lg:w-auto justify-center"
4951
>
5052
Latest
51-
</Link>
52-
<button
53+
</Button>
54+
<Button
5355
onClick={() => setShowModal(false)}
54-
className="bg-black dark:bg-white dark:text-black text-white w-full lg:w-auto py-1 px-2 rounded-md uppercase font-black text-xs"
56+
className="bg-black border-black hover:bg-gray-800 dark:bg-white dark:border-white dark:hover:bg-gray-200 dark:text-black text-white w-full lg:w-auto justify-center"
5557
>
5658
Hide
57-
</button>
59+
</Button>
5860
</div>
5961
</div>
6062
)

‎src/components/ShowcaseGallery.tsx‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query'
33
import { Link, useNavigate, useSearch } from '@tanstack/react-router'
44
import { getApprovedShowcasesQueryOptions } from '~/queries/showcases'
55
import { ShowcaseCard, ShowcaseCardSkeleton } from './ShowcaseCard'
6+
import { SubmitShowcasePlaceholder } from './ShowcaseSection'
67
import { PaginationControls } from './PaginationControls'
78
import { libraries } from '~/libraries'
89
import { SHOWCASE_USE_CASES, type ShowcaseUseCase } from '~/db/schema'
@@ -201,28 +202,26 @@ export function ShowcaseGallery() {
201202
</div>
202203
)}
203204
</>
204-
) : (
205+
) : hasFilters ? (
205206
<div className="text-center py-16">
206207
<p className="text-gray-600 dark:text-gray-400 text-lg">
207-
No showcases found{hasFilters ? ' matching your filters' : ' yet'}
208-
.
208+
No projects found matching your filters.
209209
</p>
210-
{hasFilters && (
211-
<button
212-
onClick={clearFilters}
213-
className="mt-4 text-blue-600 dark:text-blue-400 hover:underline"
214-
>
215-
Clear filters
216-
</button>
217-
)}
218-
<Button
219-
as={Link}
220-
to="/showcase/submit"
221-
className="inline-flex mt-6 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg border-none"
210+
<button
211+
onClick={clearFilters}
212+
className="mt-4 text-blue-600 dark:text-blue-400 hover:underline"
222213
>
223-
<Plus className="w-5 h-5" />
224-
Submit Your Project
225-
</Button>
214+
Clear filters
215+
</button>
216+
</div>
217+
) : (
218+
<div className="text-center py-16">
219+
<p className="text-gray-600 dark:text-gray-400 text-lg mb-8">
220+
No projects found.
221+
</p>
222+
<div className="max-w-sm mx-auto">
223+
<SubmitShowcasePlaceholder />
224+
</div>
226225
</div>
227226
)}
228227
</div>

0 commit comments

Comments
 (0)