Skip to content

Commit 629c94a

Browse files
charlieparkdavid-crespo
charliepark
and
david-crespo
authored
Add plus icon to all "new" buttons above tables (#2168)
* Add plus icon to all table control buttons and links * Switch to CreateButton and CreateLink * text-accent-secondary on icon * must save 2 lines --------- Co-authored-by: David Crespo <[email protected]>
1 parent c008d36 commit 629c94a

File tree

19 files changed

+78
-95
lines changed

19 files changed

+78
-95
lines changed

‎app/pages/ProjectsPage.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useCallback, useMemo } from 'react'
10-
import { Link, Outlet, useNavigate } from 'react-router-dom'
10+
import { Outlet, useNavigate } from 'react-router-dom'
1111

1212
import {
1313
apiQueryClient,
@@ -23,7 +23,7 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
2323
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
2424
import { Columns } from '~/table/columns/common'
2525
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
26-
import { buttonStyle } from '~/ui/lib/Button'
26+
import { CreateLink } from '~/ui/lib/CreateButton'
2727
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
2828
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
2929
import { TableActions } from '~/ui/lib/Table'
@@ -123,9 +123,7 @@ export function ProjectsPage() {
123123
<PageTitle icon={<Folder24Icon />}>Projects</PageTitle>
124124
</PageHeader>
125125
<TableActions>
126-
<Link to={pb.projectsNew()} className={buttonStyle({ size: 'sm' })}>
127-
New Project
128-
</Link>
126+
<CreateLink to={pb.projectsNew()}>New Project</CreateLink>
129127
</TableActions>
130128
<Table columns={columns} emptyState={<EmptyState />} />
131129
<Outlet />

‎app/pages/SiloAccessPage.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
3131
import { getActionsCol } from '~/table/columns/action-col'
3232
import { Table } from '~/table/Table'
3333
import { Badge } from '~/ui/lib/Badge'
34-
import { Button } from '~/ui/lib/Button'
34+
import { CreateButton } from '~/ui/lib/CreateButton'
3535
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3636
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3737
import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
@@ -165,9 +165,7 @@ export function SiloAccessPage() {
165165
</PageHeader>
166166

167167
<TableActions>
168-
<Button size="sm" onClick={() => setAddModalOpen(true)}>
169-
Add user or group
170-
</Button>
168+
<CreateButton onClick={() => setAddModalOpen(true)}>Add user or group</CreateButton>
171169
</TableActions>
172170
{siloPolicy && addModalOpen && (
173171
<SiloAccessAddUserSideModal

‎app/pages/project/access/ProjectAccessPage.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
3535
import { getActionsCol } from '~/table/columns/action-col'
3636
import { Table } from '~/table/Table'
3737
import { Badge } from '~/ui/lib/Badge'
38-
import { Button } from '~/ui/lib/Button'
38+
import { CreateButton } from '~/ui/lib/CreateButton'
3939
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
4040
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
4141
import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
@@ -199,9 +199,7 @@ export function ProjectAccessPage() {
199199
</PageHeader>
200200

201201
<TableActions>
202-
<Button size="sm" onClick={() => setAddModalOpen(true)}>
203-
Add user or group
204-
</Button>
202+
<CreateButton onClick={() => setAddModalOpen(true)}>Add user or group</CreateButton>
205203
</TableActions>
206204
{projectPolicy && addModalOpen && (
207205
<ProjectAccessAddUserSideModal

‎app/pages/project/disks/DisksPage.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useCallback } from 'react'
10-
import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
10+
import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
1111

1212
import {
1313
apiQueryClient,
@@ -27,7 +27,7 @@ import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
2727
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
2828
import { Columns } from '~/table/columns/common'
2929
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
30-
import { buttonStyle } from '~/ui/lib/Button'
30+
import { CreateLink } from '~/ui/lib/CreateButton'
3131
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3232
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3333
import { TableActions } from '~/ui/lib/Table'
@@ -164,9 +164,7 @@ export function DisksPage() {
164164
<PageTitle icon={<Storage24Icon />}>Disks</PageTitle>
165165
</PageHeader>
166166
<TableActions>
167-
<Link to={pb.disksNew({ project })} className={buttonStyle({ size: 'sm' })}>
168-
New Disk
169-
</Link>
167+
<CreateLink to={pb.disksNew({ project })}>New Disk</CreateLink>
170168
</TableActions>
171169
<Table columns={columns} emptyState={<EmptyState />} />
172170
<Outlet />

‎app/pages/project/floating-ips/FloatingIpsPage.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,13 @@ import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
3030
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
3131
import { Columns } from '~/table/columns/common'
3232
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
33+
import { CreateLink } from '~/ui/lib/CreateButton'
3334
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3435
import { Listbox } from '~/ui/lib/Listbox'
3536
import { Message } from '~/ui/lib/Message'
3637
import { Modal } from '~/ui/lib/Modal'
3738
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
38-
import { TableControls, TableControlsLink, TableControlsText } from '~/ui/lib/Table'
39+
import { TableControls, TableControlsText } from '~/ui/lib/Table'
3940
import { links } from '~/util/links'
4041
import { pb } from '~/util/path-builder'
4142

@@ -192,9 +193,7 @@ export function FloatingIpsPage() {
192193
your instances to be reachable from the internet. Learn more about{' '}
193194
<ExternalLink href={links.floatingIpsDocs}>managing floating IPs</ExternalLink>.
194195
</TableControlsText>
195-
<TableControlsLink to={pb.floatingIpsNew({ project })}>
196-
New Floating IP
197-
</TableControlsLink>
196+
<CreateLink to={pb.floatingIpsNew({ project })}>New Floating IP</CreateLink>
198197
</TableControls>
199198
<Table columns={columns} emptyState={<EmptyState />} />
200199
<Outlet />

‎app/pages/project/images/ImagesPage.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useCallback, useMemo, useState } from 'react'
10-
import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
10+
import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
1111

1212
import { apiQueryClient, useApiMutation, useApiQueryClient, type Image } from '@oxide/api'
1313
import { Images24Icon } from '@oxide/design-system/icons/react'
@@ -19,7 +19,7 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
1919
import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
2020
import { Columns } from '~/table/columns/common'
2121
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
22-
import { buttonStyle } from '~/ui/lib/Button'
22+
import { CreateLink } from '~/ui/lib/CreateButton'
2323
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
2424
import { Message } from '~/ui/lib/Message'
2525
import { Modal } from '~/ui/lib/Modal'
@@ -100,9 +100,7 @@ export function ImagesPage() {
100100
<PageTitle icon={<Images24Icon />}>Images</PageTitle>
101101
</PageHeader>
102102
<TableActions>
103-
<Link to={pb.projectImagesNew({ project })} className={buttonStyle({ size: 'sm' })}>
104-
Upload image
105-
</Link>
103+
<CreateLink to={pb.projectImagesNew({ project })}>Upload image</CreateLink>
106104
</TableActions>
107105
<Table columns={columns} emptyState={<EmptyState />} />
108106
{promoteImageName && (

‎app/pages/project/instances/InstancesPage.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useMemo } from 'react'
10-
import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
10+
import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
1111

1212
import {
1313
apiQueryClient,
@@ -25,7 +25,7 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
2525
import { getActionsCol } from '~/table/columns/action-col'
2626
import { Columns } from '~/table/columns/common'
2727
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
28-
import { buttonStyle } from '~/ui/lib/Button'
28+
import { CreateLink } from '~/ui/lib/CreateButton'
2929
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3030
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3131
import { TableActions } from '~/ui/lib/Table'
@@ -127,9 +127,7 @@ export function InstancesPage() {
127127
</PageHeader>
128128
<TableActions>
129129
<RefreshButton onClick={refetchInstances} />
130-
<Link to={pb.instancesNew({ project })} className={buttonStyle({ size: 'sm' })}>
131-
New Instance
132-
</Link>
130+
<CreateLink to={pb.instancesNew({ project })}>New Instance</CreateLink>
133131
</TableActions>
134132
<Table columns={columns} emptyState={<EmptyState />} rowHeight="large" />
135133
</>

‎app/pages/project/instances/instance/tabs/NetworkingTab.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
3535
import { Columns, DescriptionCell } from '~/table/columns/common'
3636
import { Table } from '~/table/Table'
3737
import { Badge } from '~/ui/lib/Badge'
38-
import { Button } from '~/ui/lib/Button'
38+
import { CreateButton } from '~/ui/lib/CreateButton'
3939
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
4040
import { TableControls, TableEmptyBox, TableTitle } from '~/ui/lib/Table'
4141
import { TipIcon } from '~/ui/lib/TipIcon'
@@ -323,14 +323,13 @@ export function NetworkingTab() {
323323
<>
324324
<TableControls>
325325
<TableTitle id="attached-ips-label">External IPs</TableTitle>
326-
<Button
327-
size="sm"
326+
<CreateButton
328327
onClick={() => setAttachModalOpen(true)}
329328
disabled={!!disabledReason}
330329
disabledReason={disabledReason}
331330
>
332331
Attach floating IP
333-
</Button>
332+
</CreateButton>
334333
{attachModalOpen && (
335334
<AttachFloatingIpModal
336335
floatingIps={availableIps}
@@ -344,8 +343,7 @@ export function NetworkingTab() {
344343

345344
<TableControls className="mt-8">
346345
<TableTitle id="nics-label">Network interfaces</TableTitle>
347-
<Button
348-
size="sm"
346+
<CreateButton
349347
onClick={() => setCreateModalOpen(true)}
350348
disabled={!canUpdateNic}
351349
disabledReason={
@@ -356,7 +354,7 @@ export function NetworkingTab() {
356354
}
357355
>
358356
Add network interface
359-
</Button>
357+
</CreateButton>
360358
{createModalOpen && (
361359
<CreateNetworkInterfaceForm
362360
onDismiss={() => setCreateModalOpen(false)}

‎app/pages/project/snapshots/SnapshotsPage.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useCallback } from 'react'
10-
import { Link, Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
10+
import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
1111

1212
import {
1313
apiQueryClient,
@@ -26,7 +26,7 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
2626
import { Columns } from '~/table/columns/common'
2727
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
2828
import { Badge } from '~/ui/lib/Badge'
29-
import { buttonStyle } from '~/ui/lib/Button'
29+
import { CreateLink } from '~/ui/lib/CreateButton'
3030
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3131
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3232
import { TableActions } from '~/ui/lib/Table'
@@ -136,9 +136,7 @@ export function SnapshotsPage() {
136136
<PageTitle icon={<Snapshots24Icon />}>Snapshots</PageTitle>
137137
</PageHeader>
138138
<TableActions>
139-
<Link to={pb.snapshotsNew({ project })} className={buttonStyle({ size: 'sm' })}>
140-
New Snapshot
141-
</Link>
139+
<CreateLink to={pb.snapshotsNew({ project })}>New snapshot</CreateLink>
142140
</TableActions>
143141
<Table columns={columns} emptyState={<EmptyState />} />
144142
<Outlet />

‎app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { TypeValueCell } from '~/table/cells/TypeValueCell'
2626
import { getActionsCol } from '~/table/columns/action-col'
2727
import { Columns } from '~/table/columns/common'
2828
import { Table } from '~/table/Table'
29-
import { Button } from '~/ui/lib/Button'
29+
import { CreateButton } from '~/ui/lib/CreateButton'
3030
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3131
import { TableEmptyBox } from '~/ui/lib/Table'
3232
import { sortBy } from '~/util/array'
@@ -134,9 +134,7 @@ export const VpcFirewallRulesTab = () => {
134134
return (
135135
<>
136136
<div className="mb-3 flex justify-end space-x-2">
137-
<Button size="sm" onClick={() => setCreateModalOpen(true)}>
138-
New rule
139-
</Button>
137+
<CreateButton onClick={() => setCreateModalOpen(true)}>New rule</CreateButton>
140138
{createModalOpen && (
141139
<CreateFirewallRuleForm
142140
existingRules={rules}

0 commit comments

Comments
 (0)