Skip to content

Commit e077daf

Browse files
LadyBluenotesLadyBluenotes
committed
update icons
1 parent ec60911 commit e077daf

File tree

7 files changed

+88
-212
lines changed

7 files changed

+88
-212
lines changed

‎src/components/FeedFilters.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import * as React from 'react'
22
import { useState } from 'react'
3-
import { LuHelpCircle, LuRotateCcw } from 'react-icons/lu'
3+
import { RotateCcw } from 'lucide-react'
44
import { useDebouncedValue } from '@tanstack/react-pacer'
55
import { Library, type LibraryId } from '~/libraries'
66
import { partners } from '~/utils/partners'
7-
import { Tooltip } from '~/components/Tooltip'
87
import {
98
FEED_CATEGORIES,
109
RELEASE_LEVELS,
@@ -477,7 +476,7 @@ export function FeedFilters({
477476
onClick={onClearFilters}
478477
className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded transition-colors"
479478
>
480-
<LuRotateCcw className="w-3.5 h-3.5" />
479+
<RotateCcw className="w-3.5 h-3.5" />
481480
<span>Reset Filters</span>
482481
</button>
483482
</div>

‎src/components/FilterComponents.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import * as React from 'react'
22
import { useState } from 'react'
33
import { MdExpandMore } from 'react-icons/md'
4-
import { LuTable, LuList } from 'react-icons/lu'
5-
import { LuRotateCcw } from 'react-icons/lu'
4+
import { Table, List } from 'lucide-react'
65
import { useDebouncedValue } from '@tanstack/react-pacer'
76
import { twMerge } from 'tailwind-merge'
87

@@ -269,8 +268,8 @@ export function ViewModeToggle({
269268
'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-white/50 dark:hover:bg-gray-700/50'
270269

271270
const compactViewModes = [
272-
{ mode: 'table' as const, icon: LuTable, title: 'Table view' },
273-
{ mode: 'timeline' as const, icon: LuList, title: 'Timeline view' },
271+
{ mode: 'table' as const, icon: Table, title: 'Table view' },
272+
{ mode: 'timeline' as const, icon: List, title: 'Timeline view' },
274273
]
275274

276275
if (compact) {
@@ -299,13 +298,13 @@ export function ViewModeToggle({
299298
const viewModes = [
300299
{
301300
mode: 'table' as const,
302-
icon: LuTable,
301+
icon: Table,
303302
label: 'Table',
304303
title: 'Table view',
305304
},
306305
{
307306
mode: 'timeline' as const,
308-
icon: LuList,
307+
icon: List,
309308
label: 'Timeline',
310309
title: 'Timeline view',
311310
},

‎src/components/Navbar.tsx‎

Lines changed: 46 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
11
import * as React from 'react'
22
import { twMerge } from 'tailwind-merge'
33
import { BrandContextMenu } from './BrandContextMenu'
4+
import { Link, useLocation, useMatches } from '@tanstack/react-router'
5+
import { TbBrandX, TbBrandBesky } from 'react-icons/tb'
46
import {
5-
Link,
6-
useLocation,
7-
useMatches,
8-
} from '@tanstack/react-router'
9-
import { TbBrandX, TbBrandBluesky } from 'react-icons/tb'
10-
import {
11-
LuCode,
12-
LuUsers,
13-
LuMusic,
14-
LuHelpCircle,
15-
LuBookOpen,
16-
LuTrendingUp,
17-
LuShirt,
18-
LuShieldCheck,
19-
LuPaintbrush,
20-
LuHammer,
21-
LuUser,
22-
LuLock,
23-
LuX,
24-
LuMenu,
25-
LuRss,
26-
} from 'react-icons/lu'
7+
Code,
8+
Users,
9+
Music,
10+
HelpCircle,
11+
BookOpen,
12+
TrendingUp,
13+
Shirt,
14+
ShieldCheck,
15+
Paintbrush,
16+
Hammer,
17+
User,
18+
Lock,
19+
X,
20+
Menu,
21+
Rss,
22+
} from 'lucide-react'
2723
import { ThemeToggle } from './ThemeToggle'
2824
import { SearchButton } from './SearchButton'
2925
import { FeedTicker } from './FeedTicker'
@@ -46,7 +42,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
4642
[...matches].reverse().find((m) => m.staticData.Title)?.staticData.Title ??
4743
null
4844

49-
const canAdmin = capabilities.includes('admin')
45+
const canAdmin = capabilities.incdes('admin')
5046

5147
const containerRef = React.useRef<HTMLDivElement>(null)
5248

@@ -84,7 +80,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
8480
className="flex items-center gap-1 bg-gray-500/20 rounded-lg p-2 opacity-80
8581
hover:opacity-100 whitespace-nowrap uppercase font-black text-xs"
8682
>
87-
<LuUser className="scale-125" />
83+
<User className="scale-125" />
8884
<div className="">Log In</div>
8985
</Link>
9086
)
@@ -100,7 +96,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
10096
<Authenticated>
10197
{!canAdmin ? (
10298
<div className="flex items-center gap-2 px-2 py-1 rounded-lg">
103-
<LuUser />
99+
<User />
104100
<Link
105101
to="/account"
106102
className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white whitespace-nowrap"
@@ -111,7 +107,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
111107
) : null}
112108
{canAdmin ? (
113109
<div className="flex items-center gap-2 px-2 py-1 rounded-lg">
114-
<LuLock />
110+
<Lock />
115111
<Link
116112
to="/admin"
117113
className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
@@ -136,9 +132,9 @@ export function Navbar({ children }: { children: React.ReactNode }) {
136132
<a
137133
href="https://bsky.app/profile/tanstack.com"
138134
className="opacity-70 hover:opacity-100"
139-
aria-label="Follow TanStack on Bluesky"
135+
aria-label="Follow TanStack on Besky"
140136
>
141-
<TbBrandBluesky className="text-xl" />
137+
<TbBrandBesky className="text-xl" />
142138
</a>
143139
<a
144140
href="https://instagram.com/tan_stack"
@@ -160,7 +156,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
160156
const navbar = (
161157
<div
162158
className={twMerge(
163-
'w-full p-2 fixed top-0 z-[100] bg-white/70 dark:bg-black/70 backdrop-blur-lg shadow-xl shadow-black/3',
159+
'w-full p-2 fixed top-0 z-[100] bg-white/70 dark:bg-black/70 backdrop-br-lg shadow-xl shadow-black/3',
164160
'flex items-center justify-between gap-4',
165161
'dark:border-b border-gray-500/20',
166162
)}
@@ -187,7 +183,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
187183
setShowMenu(true)
188184
}}
189185
>
190-
{showMenu ? <LuX /> : <LuMenu />}
186+
{showMenu ? <X /> : <Menu />}
191187
</button>
192188
<Link
193189
to="/"
@@ -272,7 +268,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
272268
textStyle: string
273269
badge?: string
274270
colorFrom: string
275-
} => d.to !== undefined && sidebarLibraryIds.includes(d.id),
271+
} => d.to !== undefined && sidebarLibraryIds.incdes(d.id),
276272
)
277273
.sort((a, b) => {
278274
const indexA = sidebarLibraryIds.indexOf(a.id)
@@ -380,7 +376,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
380376
'rounded-lg hover:bg-gray-500/10 dark:hover:bg-gray-500/30',
381377
)}
382378
>
383-
<LuUsers />
379+
<Users />
384380
Contributors
385381
</Link>
386382
</div>
@@ -422,7 +418,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
422418
<div>
423419
<Authenticated>
424420
{capabilities.some((capability) =>
425-
(['builder', 'admin'] as const).includes(
421+
(['builder', 'admin'] as const).incdes(
426422
capability as 'builder' | 'admin',
427423
),
428424
) ? (
@@ -437,7 +433,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
437433
>
438434
<div className="flex items-center gap-2">
439435
<div className="flex items-center gap-4 justify-between">
440-
<LuHammer />
436+
<Hammer />
441437
</div>
442438
<div>Builder</div>
443439
</div>
@@ -449,27 +445,27 @@ export function Navbar({ children }: { children: React.ReactNode }) {
449445
label: (
450446
<>
451447
<span>Feed</span>
452-
<span className="px-1.5 py-0.5 text-[.6rem] font-black bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-md uppercase">
448+
<span className="px-1.5 py-0.5 text-[.6rem] font-black bg-gradient-to-r from-be-400 to-be-600 text-white rounded-md uppercase">
453449
Beta
454450
</span>
455451
</>
456452
),
457-
icon: <LuRss />,
453+
icon: <Rss />,
458454
to: '/feed',
459455
},
460456
{
461457
label: 'Maintainers',
462-
icon: <LuCode />,
458+
icon: <Code />,
463459
to: '/maintainers',
464460
},
465461
{
466462
label: 'Partners',
467-
icon: <LuUsers />,
463+
icon: <Users />,
468464
to: '/partners',
469465
},
470466
{
471467
label: 'Blog',
472-
icon: <LuMusic />,
468+
icon: <Music />,
473469
to: '/blog',
474470
},
475471
{
@@ -481,17 +477,17 @@ export function Navbar({ children }: { children: React.ReactNode }) {
481477
</span>
482478
</>
483479
),
484-
icon: <LuBookOpen />,
480+
icon: <BookOpen />,
485481
to: '/learn',
486482
},
487483
{
488484
label: 'Support',
489-
icon: <LuHelpCircle />,
485+
icon: <HelpCircle />,
490486
to: '/support',
491487
},
492488
{
493489
label: 'Stats',
494-
icon: <LuTrendingUp />,
490+
icon: <TrendingUp />,
495491
to: '/stats/npm',
496492
},
497493
{
@@ -502,7 +498,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
502498
},
503499
{
504500
label: 'Merch',
505-
icon: <LuShirt />,
501+
icon: <Shirt />,
506502
to: '/merch',
507503
},
508504
{
@@ -512,26 +508,26 @@ export function Navbar({ children }: { children: React.ReactNode }) {
512508
},
513509
{
514510
label: 'Ethos',
515-
icon: <LuShieldCheck />,
511+
icon: <ShieldCheck />,
516512
to: '/ethos',
517513
},
518514
{
519515
label: 'Tenets',
520-
icon: <LuBookOpen />,
516+
icon: <BookOpen />,
521517
to: '/tenets',
522518
},
523519
{
524520
label: 'Brand Guide',
525-
icon: <LuPaintbrush />,
521+
icon: <Paintbrush />,
526522
to: '/brand-guide',
527523
},
528524
]
529525
.filter((item) => {
530526
// Filter out items that require capabilities the user doesn't have
531527
if (item.requiresCapability) {
532528
return (
533-
capabilities.includes(item.requiresCapability) ||
534-
capabilities.includes('admin')
529+
capabilities.incdes(item.requiresCapability) ||
530+
capabilities.incdes('admin')
535531
)
536532
}
537533
return true
@@ -566,7 +562,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
566562

567563
const smallMenu = showMenu ? (
568564
<div
569-
className="lg:hidden bg-white/50 dark:bg-black/60 backdrop-blur-[20px] z-50
565+
className="lg:hidden bg-white/50 dark:bg-black/60 backdrop-br-[20px] z-50
570566
fixed top-[var(--navbar-height)] left-0 right-0 max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto
571567
"
572568
>
@@ -612,7 +608,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
612608
inlineMenu
613609
? ''
614610
: [
615-
'fixed bg-white/70 dark:bg-black/50 backdrop-blur-lg -translate-x-full',
611+
'fixed bg-white/70 dark:bg-black/50 backdrop-br-lg -translate-x-full',
616612
showMenu && 'translate-x-0',
617613
],
618614
)}

0 commit comments

Comments
 (0)