Alerts page icons

client/src/pages/alerts/components/AlertsTable/AlertsTable.tsx

@@ -4,6 +4,7 @@ import { DataTable } from '@/components/DataTable'
 import { useState } from 'preact/hooks'
 import { useMutation, useQuery } from 'react-query'
 import { AlertFormModal } from './components/AlertFormModal'
+import { EditIcon, PlusIcon, RefreshIcon } from '@/icons'
 
 export const AlertsTable = () => {
 	const alerts = useQuery('/alerts', () => getAlerts())
@@ -23,8 +24,14 @@ export const AlertsTable = () => {
 		<div className="alerts">
 			<div className="section-title">
 				<h2>Alerts</h2>
-				<button onClick={() => alerts.refetch()}>Refresh</button>
-				<button onClick={() => setShowNew(true)}>Add alert</button>
+				<div>
+					<button onClick={() => alerts.refetch()}>
+						<RefreshIcon /> Refresh
+					</button>{' '}
+					<button onClick={() => setShowNew(true)}>
+						<PlusIcon /> Add alert
+					</button>
+				</div>
 			</div>
 
 			<div className="box-shadow">
@@ -45,7 +52,9 @@ export const AlertsTable = () => {
 							className: 'actions',
 							render: (c) => (
 								<div>
-									<button onClick={() => setEdited(c)}>Edit</button>
+									<button onClick={() => setEdited(c)}>
+										<EditIcon /> Edit
+									</button>{' '}
 									<button onClick={() => setShowDelete(c)}>Delete</button>
 								</div>
 							),

client/src/pages/alerts/components/ContactPointsTable/ContactPointsTable.tsx

@@ -8,6 +8,7 @@ import { useMutation, useQuery } from 'react-query'
 import { ContactPointFormModal } from './components/ContactPointFormModal'
 import { DataTable } from '@/components/DataTable'
 import { ConfirmModal } from '@/components/ConfirmModal'
+import { PlusIcon } from '@/icons'
 
 export const ContactPointsTable = () => {
 	const contactPoints = useQuery('/contact-points', () => getContactPoints())
@@ -27,7 +28,9 @@ export const ContactPointsTable = () => {
 		<div className="contact-points">
 			<div className="section-title">
 				<h2>Contact Points</h2>
-				<button onClick={() => setShowNew(true)}>Add contact point</button>
+				<button onClick={() => setShowNew(true)}>
+					<PlusIcon /> Add contact point
+				</button>
 			</div>
 
 			<div className="box-shadow">