Skip to content

Commit 0da050c

Browse files
jakeaturnerjakeaturner
committed
fix(UI): switch to tabler icons only for consistency
1 parent 243f749 commit 0da050c

26 files changed

+104
-143
lines changed

‎admin/inertia/components/Alert.tsx‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import * as Icons from '@heroicons/react/24/solid'
1+
import * as Icons from '@tabler/icons-react'
22
import classNames from '~/lib/classNames'
3+
import DynamicIcon from './DynamicIcon'
34

45
export type AlertProps = React.HTMLAttributes<HTMLDivElement> & {
56
title: string
@@ -26,26 +27,18 @@ export default function Alert({
2627
const getDefaultIcon = (): keyof typeof Icons => {
2728
switch (type) {
2829
case 'warning':
29-
return 'ExclamationTriangleIcon'
30+
return 'IconAlertTriangle'
3031
case 'error':
31-
return 'XCircleIcon'
32+
return 'IconXboxX'
3233
case 'success':
33-
return 'CheckCircleIcon'
34+
return 'IconCircleCheck'
3435
case 'info':
35-
return 'InformationCircleIcon'
36+
return 'IconInfoCircle'
3637
default:
37-
return 'InformationCircleIcon'
38+
return 'IconInfoCircle'
3839
}
3940
}
4041

41-
const IconComponent = () => {
42-
const iconName = icon || getDefaultIcon()
43-
const Icon = Icons[iconName]
44-
if (!Icon) return null
45-
46-
return <Icon aria-hidden="true" className={classNames('size-5 shrink-0', getIconColor())} />
47-
}
48-
4942
const getIconColor = () => {
5043
if (variant === 'solid') return 'text-desert-white'
5144
switch (type) {
@@ -165,7 +158,7 @@ export default function Alert({
165158
return (
166159
<div {...props} className={classNames(getVariantStyles(), 'p-4', props.className)} role="alert">
167160
<div className="flex gap-3">
168-
<IconComponent />
161+
<DynamicIcon icon={getDefaultIcon()} className={getIconColor() + ' size-5 shrink-0'} />
169162

170163
<div className="flex-1 min-w-0">
171164
<h3 className={classNames('text-sm font-semibold', getTitleColor())}>{title}</h3>
@@ -192,7 +185,7 @@ export default function Alert({
192185
)}
193186
aria-label="Dismiss alert"
194187
>
195-
<Icons.XMarkIcon className="size-5" />
188+
<DynamicIcon icon="IconX" className="size-5" />
196189
</button>
197190
)}
198191
</div>

‎admin/inertia/components/BuilderTagSelector.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { IconRefresh } from '@tabler/icons-react'
12
import { useState, useEffect } from 'react'
2-
import { ArrowPathIcon } from '@heroicons/react/24/outline'
33
import {
44
ADJECTIVES,
55
NOUNS,
@@ -118,7 +118,7 @@ export default function BuilderTagSelector({
118118
className="p-2 text-desert-stone-dark hover:text-desert-green hover:bg-desert-stone-lighter rounded-lg transition-colors disabled:opacity-50"
119119
title="Randomize"
120120
>
121-
<ArrowPathIcon className="w-5 h-5" />
121+
<IconRefresh className="w-5 h-5" />
122122
</button>
123123
</div>
124124

‎admin/inertia/components/DownloadURLModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const DownloadURLModal: React.FC<DownloadURLModalProps> = ({
5555
onConfirm={() => runPreflightCheck(url)}
5656
open={true}
5757
confirmText="Download"
58-
confirmIcon="ArrowDownTrayIcon"
58+
confirmIcon="IconDownload"
5959
cancelText="Cancel"
6060
confirmVariant="primary"
6161
confirmLoading={loading}

‎admin/inertia/components/InfoTooltip.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { InformationCircleIcon } from '@heroicons/react/24/outline'
1+
import { IconInfoCircle } from '@tabler/icons-react'
22
import { useState } from 'react'
33

44
interface InfoTooltipProps {
@@ -20,7 +20,7 @@ export default function InfoTooltip({ text, className = '' }: InfoTooltipProps)
2020
onBlur={() => setIsVisible(false)}
2121
aria-label="More information"
2222
>
23-
<InformationCircleIcon className="w-4 h-4" />
23+
<IconInfoCircle className="w-4 h-4" />
2424
</button>
2525
{isVisible && (
2626
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50">

‎admin/inertia/components/InstallActivityFeed.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CheckCircleIcon } from '@heroicons/react/24/outline'
1+
import { IconCircleCheck } from '@tabler/icons-react'
22
import classNames from '~/lib/classNames'
33

44
export type InstallActivityFeedProps = {
@@ -41,7 +41,7 @@ const InstallActivityFeed: React.FC<InstallActivityFeedProps> = ({ activity, cla
4141
<>
4242
<div className="relative flex size-6 flex-none items-center justify-center bg-transparent">
4343
{activityItem.type === 'completed' ? (
44-
<CheckCircleIcon aria-hidden="true" className="size-6 text-indigo-600" />
44+
<IconCircleCheck aria-hidden="true" className="size-6 text-indigo-600" />
4545
) : (
4646
<div className="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300" />
4747
)}

‎admin/inertia/components/StyledButton.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import * as Icons from '@heroicons/react/24/outline'
21
import { useMemo } from 'react'
32
import clsx from 'clsx'
3+
import DynamicIcon, { DynamicIconName} from './DynamicIcon'
4+
import { IconRefresh } from '@tabler/icons-react'
45

56
export interface StyledButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
67
children: React.ReactNode
7-
// icon should be one of the HeroIcon names, e.g. ArrowTopRightOnSquareIcon
8-
icon?: keyof typeof Icons
8+
icon?: DynamicIconName
99
disabled?: boolean
1010
variant?: 'primary' | 'secondary' | 'danger' | 'action' | 'success' | 'ghost' | 'outline'
1111
size?: 'sm' | 'md' | 'lg'
@@ -26,12 +26,6 @@ const StyledButton: React.FC<StyledButtonProps> = ({
2626
return props.disabled || loading
2727
}, [props.disabled, loading])
2828

29-
const IconComponent = () => {
30-
if (!icon) return null
31-
const Icon = Icons[icon]
32-
return Icon ? <Icon className={getIconSize()} /> : null
33-
}
34-
3529
const getIconSize = () => {
3630
switch (size) {
3731
case 'sm':
@@ -136,7 +130,7 @@ const StyledButton: React.FC<StyledButtonProps> = ({
136130
const getLoadingSpinner = () => {
137131
const spinnerSize = size === 'sm' ? 'h-3.5 w-3.5' : size === 'lg' ? 'h-5 w-5' : 'h-4 w-4'
138132
return (
139-
<Icons.ArrowPathIcon
133+
<IconRefresh
140134
className={clsx(spinnerSize, 'animate-spin')}
141135
/>
142136
)
@@ -168,7 +162,7 @@ const StyledButton: React.FC<StyledButtonProps> = ({
168162
getLoadingSpinner()
169163
) : (
170164
<>
171-
{icon && <IconComponent />}
165+
{icon && <DynamicIcon icon={icon} className={getIconSize()} />}
172166
{children}
173167
</>
174168
)}

‎admin/inertia/components/StyledSidebar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { useMemo, useState } from 'react'
22
import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react'
3-
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
43
import classNames from '~/lib/classNames'
54
import { IconArrowLeft } from '@tabler/icons-react'
65
import { usePage } from '@inertiajs/react'
76
import { UsePageProps } from '../../types/system'
7+
import { IconMenu2, IconX } from '@tabler/icons-react'
88

99
type SidebarItem = {
1010
name: string
@@ -89,7 +89,7 @@ const StyledSidebar: React.FC<StyledSidebarProps> = ({ title, items }) => {
8989
className="absolute left-4 top-4 z-50 xl:hidden"
9090
onClick={() => setSidebarOpen(true)}
9191
>
92-
<Bars3Icon aria-hidden="true" className="size-8" />
92+
<IconMenu2 aria-hidden="true" className="size-8" />
9393
</button>
9494
{/* Mobile sidebar */}
9595
<Dialog open={sidebarOpen} onClose={setSidebarOpen} className="relative z-50 xl:hidden">
@@ -111,7 +111,7 @@ const StyledSidebar: React.FC<StyledSidebarProps> = ({ title, items }) => {
111111
className="-m-2.5 p-2.5"
112112
>
113113
<span className="sr-only">Close sidebar</span>
114-
<XMarkIcon aria-hidden="true" className="size-6 text-white" />
114+
<IconX aria-hidden="true" className="size-6 text-white" />
115115
</button>
116116
</div>
117117
</TransitionChild>

‎admin/inertia/components/chat/ChatButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline'
1+
import { IconMessages } from '@tabler/icons-react'
22

33
interface ChatButtonProps {
44
onClick: () => void
@@ -11,7 +11,7 @@ export default function ChatButton({ onClick }: ChatButtonProps) {
1111
className="fixed bottom-6 right-6 z-40 p-4 bg-desert-green text-white rounded-full shadow-lg hover:bg-desert-green/90 transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-desert-green focus:ring-offset-2 cursor-pointer"
1212
aria-label="Open chat"
1313
>
14-
<ChatBubbleLeftRightIcon className="h-6 w-6" />
14+
<IconMessages className="h-6 w-6" />
1515
</button>
1616
)
1717
}

‎admin/inertia/components/chat/ChatInterface.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { PaperAirplaneIcon } from '@heroicons/react/24/outline'
2-
import { IconWand } from '@tabler/icons-react'
1+
import { IconSend, IconWand } from '@tabler/icons-react'
32
import { useState, useRef, useEffect } from 'react'
43
import classNames from '~/lib/classNames'
54
import { ChatMessage } from '../../../types/chat'
@@ -139,7 +138,7 @@ export default function ChatInterface({
139138
{isLoading ? (
140139
<div className="h-6 w-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
141140
) : (
142-
<PaperAirplaneIcon className="h-6 w-6" />
141+
<IconSend className="h-6 w-6" />
143142
)}
144143
</button>
145144
</form>

‎admin/inertia/components/chat/ChatSidebar.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
21
import classNames from '~/lib/classNames'
32
import StyledButton from '../StyledButton'
43
import { router } from '@inertiajs/react'
54
import { ChatSession } from '../../../types/chat'
5+
import { IconMessage } from '@tabler/icons-react'
66

77
interface ChatSidebarProps {
88
sessions: ChatSession[]
@@ -24,7 +24,7 @@ export default function ChatSidebar({
2424
return (
2525
<div className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col h-full">
2626
<div className="p-4 border-b border-gray-200 h-[75px] flex items-center justify-center">
27-
<StyledButton onClick={onNewChat} icon="PlusIcon" variant="primary" fullWidth>
27+
<StyledButton onClick={onNewChat} icon="IconPlus" variant="primary" fullWidth>
2828
New Chat
2929
</StyledButton>
3030
</div>
@@ -46,7 +46,7 @@ export default function ChatSidebar({
4646
)}
4747
>
4848
<div className="flex items-start gap-2">
49-
<ChatBubbleLeftIcon
49+
<IconMessage
5050
className={classNames(
5151
'h-5 w-5 mt-0.5 flex-shrink-0',
5252
activeSessionId === session.id ? 'text-white' : 'text-gray-400'
@@ -83,7 +83,7 @@ export default function ChatSidebar({
8383
router.visit('/home')
8484
}
8585
}}
86-
icon={isInModal ? 'ArrowTopRightOnSquareIcon' : 'HomeIcon'}
86+
icon={isInModal ? 'IconExternalLink' : 'IconHome'}
8787
variant="outline"
8888
size="sm"
8989
fullWidth
@@ -94,7 +94,7 @@ export default function ChatSidebar({
9494
onClick={() => {
9595
router.visit('/settings/models')
9696
}}
97-
icon="CircleStackIcon"
97+
icon="IconDatabase"
9898
variant="primary"
9999
size="sm"
100100
fullWidth
@@ -105,7 +105,7 @@ export default function ChatSidebar({
105105
onClick={() => {
106106
router.visit('/knowledge-base')
107107
}}
108-
icon="AcademicCapIcon"
108+
icon="IconBrain"
109109
variant="primary"
110110
size="sm"
111111
fullWidth
@@ -114,7 +114,7 @@ export default function ChatSidebar({
114114
</StyledButton>
115115
<StyledButton
116116
onClick={onClearHistory}
117-
icon="TrashIcon"
117+
icon="IconTrash"
118118
variant="danger"
119119
size="sm"
120120
fullWidth

0 commit comments

Comments
 (0)