dahjah/headplane
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore: switch from heroicons to primer icons

Browse Source
This commit is contained in:
Aarnav Tale 2024-05-04 15:03:21 -04:00
parent 61ae161496
commit c6cdcf35eb
No known key found for this signature in database
12 changed files with 1612 additions and 1471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/Attribute.tsx
View File

@ -1,4 +1,4 @@
import { ClipboardIcon } from '@heroicons/react/24/outline'
import { CopyIcon } from '@primer/octicons-react'
import { toast } from './Toaster'
@ -28,7 +28,7 @@ export default function Attribute({ name, value, isCopyable }: Properties) {
<dd className='min-w-0 truncate px-2 py-1'>
{value}
</dd>
<ClipboardIcon className='text-gray-600 dark:text-gray-200 pr-2 w-max h-4'/>
<CopyIcon className='text-gray-600 dark:text-gray-200 pr-2 w-max h-4'/>
</button>
) : (
<dd className='min-w-0 truncate px-2 py-1'>

6
app/components/Error.tsx
View File

@ -1,4 +1,4 @@
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
import { AlertIcon } from '@primer/octicons-react'
import { isRouteErrorResponse, useRouteError } from '@remix-run/react'
import { useState } from 'react'
@ -23,7 +23,7 @@ export function ErrorPopup({ type = 'full' }: Properties) {
<Dialog>
<Dialog.Panel
className={cn(
type === 'embedded' ? 'pointer-events-none bg-transparent dark:bg-transparent' : '',
type === 'embedded' ? 'pointer-events-none bg-transparent dark:bg-transparent' : ''
)}
control={open}
>
@ -33,7 +33,7 @@ export function ErrorPopup({ type = 'full' }: Properties) {
<Dialog.Title className='text-3xl mb-0'>
{routing ? error.status : 'Error'}
</Dialog.Title>
<ExclamationTriangleIcon className='w-12 h-12 text-red-500'/>
<AlertIcon className='w-12 h-12 text-red-500'/>
</div>
<Dialog.Text className='mt-4 text-lg'>
{routing ? (

4
app/components/Notice.tsx
View File

@ -1,4 +1,4 @@
import { InformationCircleIcon } from '@heroicons/react/24/outline'
import { InfoIcon } from '@primer/octicons-react'
import clsx from 'clsx'
import { type ReactNode } from 'react'
@ -9,7 +9,7 @@ export default function Notice({ children }: { readonly children: ReactNode }) {
'bg-slate-400 dark:bg-slate-700'
)}
>
<InformationCircleIcon className='h-6 w-6 text-white'/>
<InfoIcon className='h-6 w-6 text-white'/>
{children}
</div>
)

4
app/components/Toaster.tsx
View File

@ -1,4 +1,4 @@
import { XMarkIcon } from '@heroicons/react/24/outline'
import { XIcon } from '@primer/octicons-react'
import { type AriaToastProps, useToast, useToastRegion } from '@react-aria/toast'
import { ToastQueue, type ToastState, useToastQueue } from '@react-stately/toast'
import { type ReactNode, useRef } from 'react'
@ -35,7 +35,7 @@ function Toast({ state, ...properties }: ToastProperties) {
'hover:bg-main-600 dark:hover:bg-main-700'
)}
>
<XMarkIcon className='w-4 h-4'/>
<XIcon className='w-4 h-4'/>
</Button>
</div>
)

7
app/routes/_data.acls._index/route.tsx
View File

@ -1,10 +1,11 @@
import { BeakerIcon, CubeTransparentIcon, EyeIcon, PencilSquareIcon } from '@heroicons/react/24/outline'
import { BeakerIcon, EyeIcon, IssueDraftIcon, PencilIcon } from '@primer/octicons-react'
import { type ActionFunctionArgs, json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { useState } from 'react'
import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
import { ClientOnly } from 'remix-utils/client-only'
import Link from '~/components/Link'
import Notice from '~/components/Notice'
import { cn } from '~/utils/cn'
import { getAcl, getContext, patchAcl } from '~/utils/config'
@ -102,7 +103,7 @@ export default function Page() {
isSelected ? 'text-gray-900 dark:text-gray-100' : ''
)}
>
<PencilSquareIcon className='w-5 h-5'/>
<PencilIcon className='w-5 h-5'/>
<p>Edit file</p>
</Tab>
<Tab
@ -152,7 +153,7 @@ export default function Page() {
'p-16 flex flex-col items-center justify-center'
)}
>
<CubeTransparentIcon className='w-24 h-24 text-gray-300 dark:text-gray-500'/>
<IssueDraftIcon className='w-24 h-24 text-gray-300 dark:text-gray-500'/>
<p className='w-1/2 text-center mt-4'>
The Preview rules is very much still a work in progress.
It is a bit complicated to implement right now but hopefully it will be available soon.

6
app/routes/_data.dns._index/domains.tsx
View File

@ -15,7 +15,7 @@ import {
verticalListSortingStrategy
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { Bars3Icon, LockClosedIcon } from '@heroicons/react/24/outline'
import { LockIcon, ThreeBarsIcon } from '@primer/octicons-react'
import { type FetcherWithComponents, useFetcher } from '@remix-run/react'
import clsx from 'clsx'
import { useEffect, useState } from 'react'
@ -83,7 +83,7 @@ export default function Domains({ baseDomain, searchDomains, disabled }: Propert
{baseDomain ? (
<TableList.Item key='magic-dns-sd'>
<p className='font-mono text-sm'>{baseDomain}</p>
<LockClosedIcon className='h-4 w-4'/>
<LockIcon className='h-4 w-4'/>
</TableList.Item>
) : undefined}
<SortableContext
@ -190,7 +190,7 @@ function Domain({ domain, id, localDomains, isDrag, disabled, fetcher }: DomainP
>
<p className='font-mono text-sm flex items-center gap-4'>
{disabled ? undefined : (
<Bars3Icon
<ThreeBarsIcon
className='h-4 w-4 text-gray-400 focus:outline-none'
{...attributes}
{...listeners}

8
app/routes/_data.machines._index/machine.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable react/hook-use-state */
import { ChevronDownIcon, ClipboardIcon, EllipsisHorizontalIcon } from '@heroicons/react/24/outline'
import { ChevronDownIcon, CopyIcon, KebabHorizontalIcon } from '@primer/octicons-react'
import { type FetcherWithComponents, Link } from '@remix-run/react'
import { useState } from 'react'
@ -96,7 +96,7 @@ export default function MachineRow({ machine, routes, fetcher, magic }: MachineP
}}
>
{ip}
<ClipboardIcon className='w-3 h-3'/>
<CopyIcon className='w-3 h-3'/>
</Menu.ItemButton>
))}
{magic ? (
@ -113,7 +113,7 @@ export default function MachineRow({ machine, routes, fetcher, magic }: MachineP
}}
>
{machine.givenName}.{machine.user.name}.{magic}
<ClipboardIcon className='w-3 h-3'/>
<CopyIcon className='w-3 h-3'/>
</Menu.ItemButton>
) : undefined}
</Menu.Items>
@ -173,7 +173,7 @@ export default function MachineRow({ machine, routes, fetcher, magic }: MachineP
'group-hover:border-gray-200 dark:group-hover:border-zinc-700'
)}
>
<EllipsisHorizontalIcon className='w-5'/>
<KebabHorizontalIcon className='w-5'/>
</Menu.Button>
<Menu.Items>
<Menu.ItemButton control={renameState}>

4
app/routes/_data.machines._index/route.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { InformationCircleIcon } from '@heroicons/react/24/outline'
import { InfoIcon } from '@primer/octicons-react'
import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from '@remix-run/node'
import { useFetcher, useLoaderData } from '@remix-run/react'
import { Button, Tooltip, TooltipTrigger } from 'react-aria-components'
@ -121,7 +121,7 @@ export default function Page() {
{data.magic ? (
<TooltipTrigger delay={0}>
<Button>
<InformationCircleIcon className='w-4 h-4 text-gray-400'/>
<InfoIcon className='w-4 h-4'/>
</Button>
<Tooltip className={cn(
'text-sm max-w-xs p-2 rounded-lg mb-2',

6
app/routes/_data.settings._index.tsx
View File

@ -1,9 +1,9 @@
import { CubeTransparentIcon } from '@heroicons/react/24/outline'
import { IssueDraftIcon } from '@primer/octicons-react'
export default function Page() {
return (
<div className='w-96 mx-auto flex flex-col justify-center items-center text-center'>
<CubeTransparentIcon className='w-32 h-32 text-gray-500'/>
<div className='w-96 mx-auto flex flex-col justify-center items-center text-center my-8'>
<IssueDraftIcon className='w-24 h-24 text-gray-300 dark:text-gray-500'/>
<p className='text-lg mt-8'>
The settings page is currently unavailable.
It will be available in a future release.

7
app/routes/_data.users._index.tsx
View File

@ -1,13 +1,12 @@
/* eslint-disable unicorn/filename-case */
import { ClipboardIcon, UserIcon } from '@heroicons/react/24/outline'
import { PersonIcon } from '@primer/octicons-react'
import { type LoaderFunctionArgs } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { toast } from 'react-hot-toast/headless'
import Attribute from '~/components/Attribute'
import Card from '~/components/Card'
import StatusCircle from '~/components/StatusCircle'
import { type Machine, type User } from '~/types'
import { type Machine } from '~/types'
import { pull } from '~/utils/headscale'
import { getSession } from '~/utils/sessions'
import { useLiveData } from '~/utils/useLiveData'
@ -47,7 +46,7 @@ export default function Page() {
{data.map(user => (
<Card key={user.id}>
<div className='flex items-center gap-4'>
<UserIcon className='w-6 h-6'/>
<PersonIcon className='w-6 h-6'/>
<span className='text-lg font-mono'>
{user.name}
</span>

48
package.json
View File

@ -17,40 +17,40 @@
"@dnd-kit/modifiers": "^7.0.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@heroicons/react": "^2.1.3",
"@react-aria/toast": "3.0.0-beta.10",
"@primer/octicons-react": "^19.9.0",
"@react-aria/toast": "3.0.0-beta.11",
"@react-stately/toast": "3.0.0-beta.2",
"@remix-run/node": "^2.8.1",
"@remix-run/react": "^2.8.1",
"@remix-run/serve": "^2.8.1",
"@uiw/codemirror-theme-github": "^4.21.25",
"@uiw/react-codemirror": "^4.21.25",
"clsx": "^2.1.0",
"isbot": "^4.1.0",
"oauth4webapi": "^2.10.3",
"react": "^18.2.0",
"react-aria-components": "^1.1.1",
"react-codemirror-merge": "^4.21.25",
"react-dom": "^18.2.0",
"@remix-run/node": "^2.9.1",
"@remix-run/react": "^2.9.1",
"@remix-run/serve": "^2.9.1",
"@uiw/codemirror-theme-github": "^4.22.0",
"@uiw/react-codemirror": "^4.22.0",
"clsx": "^2.1.1",
"isbot": "^5.1.6",
"oauth4webapi": "^2.10.4",
"react": "^18.3.1",
"react-aria-components": "^1.2.0",
"react-codemirror-merge": "^4.22.0",
"react-dom": "^18.3.1",
"remix-utils": "^7.6.0",
"tailwind-merge": "^2.3.0",
"tailwindcss-react-aria-components": "^1.1.1",
"undici": "^6.10.2",
"usehooks-ts": "^3.0.2",
"yaml": "^2.4.1"
"tailwindcss-react-aria-components": "^1.1.2",
"undici": "^6.15.0",
"usehooks-ts": "^3.1.0",
"yaml": "^2.4.2"
},
"devDependencies": {
"@remix-run/dev": "^2.8.1",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@remix-run/dev": "^2.9.1",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-config-tale": "^1.0.16",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.1",
"tailwindcss": "^3.4.3",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"typescript": "^5.4.5",
"vite": "^5.2.11",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {

2979
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff