From 300418b9f15925747c898b8da0435ae80c847dce Mon Sep 17 00:00:00 2001
From: ze0s <43699394+zze0s@users.noreply.github.com>
Date: Thu, 22 Sep 2022 16:39:05 +0200
Subject: [PATCH] feat(irc): improve list view (#466)

* feat(irc): add irc status examples

* feat(irc): add dropdown menu to list

* feat(irc): update heroicons and add expand button

* feat(irc): update heroicons and add expand button
---
 internal/http/irc.go                          |  17 ++
 internal/irc/service.go                       |  10 +
 web/package.json                              |   2 +-
 web/src/api/APIClient.ts                      |   3 +-
 web/src/components/alerts/ErrorPage.tsx       |   4 +-
 web/src/components/alerts/index.tsx           |   5 +-
 web/src/components/data-table/Cells.tsx       |   6 +-
 web/src/components/emptystates/index.tsx      |   2 +-
 web/src/components/fields/text.tsx            |   6 +-
 web/src/components/inputs/input.tsx           |  22 +-
 web/src/components/inputs/input_wide.tsx      |   6 +-
 web/src/components/inputs/select.tsx          |  12 +-
 web/src/components/inputs/text.tsx            |  17 +-
 web/src/components/modals/index.tsx           |   6 +-
 web/src/components/notifications/Toast.tsx    |   6 +-
 web/src/components/panels/index.tsx           |  16 +-
 web/src/forms/filters/FilterAddForm.tsx       |   6 +-
 web/src/forms/settings/APIKeyAddForm.tsx      |   4 +-
 .../forms/settings/DownloadClientForms.tsx    |  14 +-
 web/src/forms/settings/IndexerForms.tsx       |   4 +-
 web/src/forms/settings/IrcForms.tsx           |  28 +-
 web/src/forms/settings/NotificationForms.tsx  |  30 +--
 web/src/screens/Base.tsx                      |  10 +-
 web/src/screens/Logs.tsx                      |  16 +-
 web/src/screens/Settings.tsx                  |  18 +-
 web/src/screens/filters/action.tsx            |  28 +-
 web/src/screens/filters/details.tsx           |  28 +-
 web/src/screens/filters/list.tsx              |  42 +--
 web/src/screens/releases/Filters.tsx          |  19 +-
 web/src/screens/releases/ReleaseTable.tsx     |  25 +-
 web/src/screens/settings/Api.tsx              |  22 +-
 web/src/screens/settings/Feed.tsx             |  37 ++-
 web/src/screens/settings/Irc.tsx              | 255 ++++++++++++++++--
 web/yarn.lock                                 |  10 +-
 34 files changed, 478 insertions(+), 258 deletions(-)

diff --git a/internal/http/irc.go b/internal/http/irc.go
index 0a45cae..00df374 100644
--- a/internal/http/irc.go
+++ b/internal/http/irc.go
@@ -19,6 +19,7 @@ type ircService interface {
 	StoreNetwork(ctx context.Context, network *domain.IrcNetwork) error
 	UpdateNetwork(ctx context.Context, network *domain.IrcNetwork) error
 	StoreChannel(networkID int64, channel *domain.IrcChannel) error
+	RestartNetwork(ctx context.Context, id int64) error
 }
 
 type ircHandler struct {
@@ -38,6 +39,7 @@ func (h ircHandler) Routes(r chi.Router) {
 	r.Post("/", h.storeNetwork)
 	r.Put("/network/{networkID}", h.updateNetwork)
 	r.Post("/network/{networkID}/channel", h.storeChannel)
+	r.Get("/network/{networkID}/restart", h.restartNetwork)
 	r.Get("/network/{networkID}", h.getNetworkByID)
 	r.Delete("/network/{networkID}", h.deleteNetwork)
 }
@@ -69,6 +71,21 @@ func (h ircHandler) getNetworkByID(w http.ResponseWriter, r *http.Request) {
 	h.encoder.StatusResponse(ctx, w, network, http.StatusOK)
 }
 
+func (h ircHandler) restartNetwork(w http.ResponseWriter, r *http.Request) {
+	var (
+		ctx       = r.Context()
+		networkID = chi.URLParam(r, "networkID")
+	)
+
+	id, _ := strconv.Atoi(networkID)
+
+	if err := h.service.RestartNetwork(ctx, int64(id)); err != nil {
+		h.encoder.Error(w, err)
+	}
+
+	h.encoder.NoContent(w)
+}
+
 func (h ircHandler) storeNetwork(w http.ResponseWriter, r *http.Request) {
 	var data domain.IrcNetwork
 
diff --git a/internal/irc/service.go b/internal/irc/service.go
index 33f6a3c..869b23a 100644
--- a/internal/irc/service.go
+++ b/internal/irc/service.go
@@ -20,6 +20,7 @@ type Service interface {
 	StartHandlers()
 	StopHandlers()
 	StopNetwork(key handlerKey) error
+	RestartNetwork(ctx context.Context, id int64) error
 	ListNetworks(ctx context.Context) ([]domain.IrcNetwork, error)
 	GetNetworksWithHealth(ctx context.Context) ([]domain.IrcNetworkWithHealth, error)
 	GetNetworkByID(ctx context.Context, id int64) (*domain.IrcNetwork, error)
@@ -279,6 +280,15 @@ func (s *service) checkIfNetworkRestartNeeded(network *domain.IrcNetwork) error
 	return nil
 }
 
+func (s *service) RestartNetwork(ctx context.Context, id int64) error {
+	network, err := s.repo.GetNetworkByID(ctx, id)
+	if err != nil {
+		return err
+	}
+
+	return s.restartNetwork(*network)
+}
+
 func (s *service) restartNetwork(network domain.IrcNetwork) error {
 	// look if we have the network in handlers, if so restart it
 	if existingHandler, found := s.handlers[handlerKey{network.Server, network.NickServ.Account}]; found {
diff --git a/web/package.json b/web/package.json
index c94aa57..877b986 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@fontsource/inter": "^4.5.11",
     "@headlessui/react": "^1.6.4",
-    "@heroicons/react": "^1.0.6",
+    "@heroicons/react": "^2.0.11",
     "@hookform/error-message": "^2.0.0",
     "date-fns": "^2.28.0",
     "formik": "^2.2.9",
diff --git a/web/src/api/APIClient.ts b/web/src/api/APIClient.ts
index 93aff5d..644ba5a 100644
--- a/web/src/api/APIClient.ts
+++ b/web/src/api/APIClient.ts
@@ -139,7 +139,8 @@ export const APIClient = {
     getNetworks: () => appClient.Get<IrcNetworkWithHealth[]>("api/irc"),
     createNetwork: (network: IrcNetworkCreate) => appClient.Post("api/irc", network),
     updateNetwork: (network: IrcNetwork) => appClient.Put(`api/irc/network/${network.id}`, network),
-    deleteNetwork: (id: number) => appClient.Delete(`api/irc/network/${id}`)
+    deleteNetwork: (id: number) => appClient.Delete(`api/irc/network/${id}`),
+    restartNetwork: (id: number) => appClient.Get(`api/irc/network/${id}/restart`)
   },
   events: {
     logs: () => new EventSource(`${sseBaseUrl()}api/events?stream=logs`, { withCredentials: true })
diff --git a/web/src/components/alerts/ErrorPage.tsx b/web/src/components/alerts/ErrorPage.tsx
index e228c52..4fe5437 100644
--- a/web/src/components/alerts/ErrorPage.tsx
+++ b/web/src/components/alerts/ErrorPage.tsx
@@ -1,6 +1,6 @@
 import StackTracey from "stacktracey";
 import type { FallbackProps } from "react-error-boundary";
-import { RefreshIcon } from "@heroicons/react/solid";
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
 
 export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
   const stack = new StackTracey(error);
@@ -73,7 +73,7 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
               resetErrorBoundary();
             }}
           >
-            <RefreshIcon className="-ml-0.5 mr-2 h-5 w-5"/>
+            <ArrowPathIcon className="-ml-0.5 mr-2 h-5 w-5"/>
             Reset page state
           </button>
         </div>
diff --git a/web/src/components/alerts/index.tsx b/web/src/components/alerts/index.tsx
index 981b6f0..9c9af9a 100644
--- a/web/src/components/alerts/index.tsx
+++ b/web/src/components/alerts/index.tsx
@@ -1,5 +1,4 @@
-
-import { ExclamationIcon } from "@heroicons/react/solid";
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 
 interface props {
   title?: string;
@@ -11,7 +10,7 @@ export function AlertWarning({ title, text }: props) {
     <div className="my-4 rounded-md bg-yellow-50 dark:bg-yellow-100 p-4 border border-yellow-300 dark:border-none">
       <div className="flex">
         <div className="flex-shrink-0">
-          <ExclamationIcon
+          <ExclamationTriangleIcon
             className="h-5 w-5 text-yellow-400 dark:text-yellow-600"
             aria-hidden="true"
           />
diff --git a/web/src/components/data-table/Cells.tsx b/web/src/components/data-table/Cells.tsx
index 5cb4dba..fc25402 100644
--- a/web/src/components/data-table/Cells.tsx
+++ b/web/src/components/data-table/Cells.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { formatDistanceToNowStrict } from "date-fns";
-import { CheckIcon } from "@heroicons/react/solid";
-import { ClockIcon, BanIcon, ExclamationCircleIcon } from "@heroicons/react/outline";
+import { CheckIcon } from "@heroicons/react/24/solid";
+import { ClockIcon, ExclamationCircleIcon, NoSymbolIcon } from "@heroicons/react/24/outline";
 
 import { classNames, simplifyDate } from "../../utils";
 import { Tooltip } from "../tooltips/Tooltip";
@@ -41,7 +41,7 @@ const StatusCellMap: Record<string, StatusCellMapEntry> = {
   },
   "PUSH_REJECTED": {
     colors: "bg-blue-200 dark:bg-blue-100 text-blue-400 dark:text-blue-800 hover:bg-blue-300 dark:hover:bg-blue-400",
-    icon: <BanIcon className="h-5 w-5" aria-hidden="true" />
+    icon: <NoSymbolIcon className="h-5 w-5" aria-hidden="true" />
   },
   "PUSH_APPROVED": {
     colors: "bg-green-100 text-green-800 hover:bg-green-300",
diff --git a/web/src/components/emptystates/index.tsx b/web/src/components/emptystates/index.tsx
index 96c3160..d96a668 100644
--- a/web/src/components/emptystates/index.tsx
+++ b/web/src/components/emptystates/index.tsx
@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 
 interface EmptySimpleProps {
     title: string;
diff --git a/web/src/components/fields/text.tsx b/web/src/components/fields/text.tsx
index e4e4220..ac94526 100644
--- a/web/src/components/fields/text.tsx
+++ b/web/src/components/fields/text.tsx
@@ -1,5 +1,5 @@
 import { useToggle } from "../../hooks/hooks";
-import { ClipboardCopyIcon, EyeIcon, EyeOffIcon, CheckIcon } from "@heroicons/react/outline";
+import { CheckIcon, DocumentDuplicateIcon, EyeIcon, EyeSlashIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 
 interface KeyFieldProps {
@@ -52,7 +52,7 @@ export const KeyField = ({ value }: KeyFieldProps) => {
           onClick={toggleVisibility}
           title="show"
         >
-          {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
+          {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
         </button>
         <button
           type="button"
@@ -65,7 +65,7 @@ export const KeyField = ({ value }: KeyFieldProps) => {
               className="text-blue-500 w-5 h-5"
               aria-hidden="true"
             />
-            : <ClipboardCopyIcon
+            : <DocumentDuplicateIcon
               className="text-blue-500 w-5 h-5"
               aria-hidden="true"
             />
diff --git a/web/src/components/inputs/input.tsx b/web/src/components/inputs/input.tsx
index c521b9a..a0bed21 100644
--- a/web/src/components/inputs/input.tsx
+++ b/web/src/components/inputs/input.tsx
@@ -1,6 +1,6 @@
 import { Field, FieldProps } from "formik";
 import { classNames } from "../../utils";
-import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
+import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import { useToggle } from "../../hooks/hooks";
 
 type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
@@ -24,7 +24,7 @@ export const TextField = ({
   columns,
   autoComplete,
   hidden,
-  disabled,
+  disabled
 }: TextFieldProps) => (
   <div
     className={classNames(
@@ -52,7 +52,7 @@ export const TextField = ({
             className={classNames(
               meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
               disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed" : "dark:bg-gray-800",
-              "mt-2 block w-full dark:text-gray-100 rounded-md",
+              "mt-2 block w-full dark:text-gray-100 rounded-md"
             )}
             disabled={disabled}
             placeholder={placeholder}
@@ -88,7 +88,7 @@ export const TextArea = ({
   rows,
   autoComplete,
   hidden,
-  disabled,
+  disabled
 }: TextAreaProps) => (
   <div
     className={classNames(
@@ -103,9 +103,9 @@ export const TextArea = ({
     )}
     <Field name={name}>
       {({
-          field,
-          meta
-        }: FieldProps) => (
+        field,
+        meta
+      }: FieldProps) => (
         <div>
           <textarea
             {...field}
@@ -116,7 +116,7 @@ export const TextArea = ({
             className={classNames(
               meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
               disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed" : "dark:bg-gray-800",
-              "mt-2 block w-full dark:text-gray-100 rounded-md",
+              "mt-2 block w-full dark:text-gray-100 rounded-md"
             )}
             placeholder={placeholder}
             disabled={disabled}
@@ -181,7 +181,7 @@ export const PasswordField = ({
             />
 
             <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
-              {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
+              {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
             </div>
 
             {help && (
@@ -211,7 +211,7 @@ export const NumberField = ({
   label,
   placeholder,
   step,
-  disabled,
+  disabled
 }: NumberFieldProps) => (
   <div className="col-span-12 sm:col-span-6">
     <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
@@ -233,7 +233,7 @@ export const NumberField = ({
                 ? "focus:ring-red-500 focus:border-red-500 border-red-500"
                 : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300",
               "mt-2 block w-full border border-gray-300 dark:border-gray-700 dark:text-gray-100 rounded-md",
-              disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed" : "dark:bg-gray-800",
+              disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed" : "dark:bg-gray-800"
             )}
             placeholder={placeholder}
             disabled={disabled}
diff --git a/web/src/components/inputs/input_wide.tsx b/web/src/components/inputs/input_wide.tsx
index be2fa67..62ac8fe 100644
--- a/web/src/components/inputs/input_wide.tsx
+++ b/web/src/components/inputs/input_wide.tsx
@@ -1,8 +1,8 @@
-import { Field } from "formik";
 import type { FieldProps } from "formik";
+import { Field } from "formik";
 import { classNames } from "../../utils";
 import { useToggle } from "../../hooks/hooks";
-import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
+import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import { Switch } from "@headlessui/react";
 import { ErrorField } from "./common";
 
@@ -103,7 +103,7 @@ export const PasswordFieldWide = ({
                 placeholder={placeholder}
               />
               <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
-                {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
+                {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
               </div>
             </div>
           )}
diff --git a/web/src/components/inputs/select.tsx b/web/src/components/inputs/select.tsx
index 54d3788..4df8d4a 100644
--- a/web/src/components/inputs/select.tsx
+++ b/web/src/components/inputs/select.tsx
@@ -1,8 +1,8 @@
 import { Fragment } from "react";
 import { Field, FieldProps } from "formik";
-import { Transition, Listbox } from "@headlessui/react";
-import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";
-import { MultiSelect as RMSC }  from "react-multi-select-component";
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/solid";
+import { MultiSelect as RMSC } from "react-multi-select-component";
 
 import { classNames, COL_WIDTHS } from "../../utils";
 import { SettingsContext } from "../../utils/Context";
@@ -162,7 +162,7 @@ export function DownloadClientSelect({
                         : "Choose a client"}
                     </span>
                     <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                      <SelectorIcon
+                      <ChevronUpDownIcon
                         className="h-5 w-5 text-gray-400 dark:text-gray-300"
                         aria-hidden="true" />
                     </span>
@@ -274,7 +274,7 @@ export const Select = ({
                       }
                     </span>
                     <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                      <SelectorIcon
+                      <ChevronUpDownIcon
                         className="h-5 w-5 text-gray-400 dark:text-gray-300"
                         aria-hidden="true"
                       />
@@ -379,7 +379,7 @@ export const SelectWide = ({
                         }
                       </span>
                       <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                        <SelectorIcon
+                        <ChevronUpDownIcon
                           className="h-5 w-5 text-gray-400 dark:text-gray-300"
                           aria-hidden="true"
                         />
diff --git a/web/src/components/inputs/text.tsx b/web/src/components/inputs/text.tsx
index 018cb64..754624f 100644
--- a/web/src/components/inputs/text.tsx
+++ b/web/src/components/inputs/text.tsx
@@ -1,17 +1,8 @@
-import React, {
-  FC,
-  forwardRef,
-  ReactNode
-} from "react";
-import {
-  FieldError,
-  UseFormRegister,
-  Path,
-  RegisterOptions, DeepMap
-} from "react-hook-form";
+import React, { FC, forwardRef, ReactNode } from "react";
+import { DeepMap, FieldError, Path, RegisterOptions, UseFormRegister } from "react-hook-form";
 import { classNames, get } from "../../utils";
 import { useToggle } from "../../hooks/hooks";
-import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
+import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import { ErrorMessage } from "@hookform/error-message";
 
 export type FormErrorMessageProps = {
@@ -183,7 +174,7 @@ export const PasswordInput = <TFormValues extends Record<string, unknown>>({
             {...(register && register(name, rules))}
           />
           <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
-            {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
+            {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
           </div>
         </div>
         <ErrorMessage
diff --git a/web/src/components/modals/index.tsx b/web/src/components/modals/index.tsx
index 6368ce6..7a500ed 100644
--- a/web/src/components/modals/index.tsx
+++ b/web/src/components/modals/index.tsx
@@ -1,6 +1,6 @@
-import React, { Fragment, FC } from "react";
+import React, { FC, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import { ExclamationIcon } from "@heroicons/react/solid";
+import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 
 interface DeleteModalProps {
     isOpen: boolean;
@@ -49,7 +49,7 @@ export const DeleteModal: FC<DeleteModalProps> = ({ isOpen, buttonRef, toggle, d
           <div className="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
             <div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
               <div className="sm:flex sm:items-start">
-                <ExclamationIcon className="h-16 w-16 text-red-500 dark:text-red-500" aria-hidden="true" />
+                <ExclamationTriangleIcon className="h-16 w-16 text-red-500 dark:text-red-500" aria-hidden="true" />
                 <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                   <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                     {title}
diff --git a/web/src/components/notifications/Toast.tsx b/web/src/components/notifications/Toast.tsx
index 6f4f2be..7ac7b41 100644
--- a/web/src/components/notifications/Toast.tsx
+++ b/web/src/components/notifications/Toast.tsx
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { XIcon, CheckCircleIcon, ExclamationIcon, ExclamationCircleIcon } from "@heroicons/react/solid";
+import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { toast, Toast as Tooast } from "react-hot-toast";
 import { classNames } from "../../utils";
 
@@ -18,7 +18,7 @@ const Toast: FC<Props> = ({ type, body, t }) => (
         <div className="flex-shrink-0">
           {type === "success" && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />}
           {type === "error" && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />}
-          {type === "warning" && <ExclamationIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
+          {type === "warning" && <ExclamationTriangleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
         </div>
         <div className="ml-3 w-0 flex-1 pt-0.5">
           <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
@@ -36,7 +36,7 @@ const Toast: FC<Props> = ({ type, body, t }) => (
             }}
           >
             <span className="sr-only">Close</span>
-            <XIcon className="h-5 w-5" aria-hidden="true" />
+            <XMarkIcon className="h-5 w-5" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/web/src/components/panels/index.tsx b/web/src/components/panels/index.tsx
index 6eb213c..442aea2 100644
--- a/web/src/components/panels/index.tsx
+++ b/web/src/components/panels/index.tsx
@@ -1,11 +1,11 @@
-import React, { Fragment, useRef } from "react";
-import { XIcon } from "@heroicons/react/solid";
-import { Dialog, Transition } from "@headlessui/react";
-import { Form, Formik } from "formik";
+import React, {Fragment, useRef} from "react";
+import {XMarkIcon} from "@heroicons/react/24/solid";
+import {Dialog, Transition} from "@headlessui/react";
+import {Form, Formik} from "formik";
 import DEBUG from "../debug";
-import { useToggle } from "../../hooks/hooks";
-import { DeleteModal } from "../modals";
-import { classNames } from "../../utils";
+import {useToggle} from "../../hooks/hooks";
+import {DeleteModal} from "../modals";
+import {classNames} from "../../utils";
 
 interface SlideOverProps<DataType> {
     title: string;
@@ -101,7 +101,7 @@ function SlideOver<DataType>({
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
-                                <XIcon className="h-6 w-6" aria-hidden="true" />
+                                <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                               </button>
                             </div>
                           </div>
diff --git a/web/src/forms/filters/FilterAddForm.tsx b/web/src/forms/filters/FilterAddForm.tsx
index c147f3e..6fdd98e 100644
--- a/web/src/forms/filters/FilterAddForm.tsx
+++ b/web/src/forms/filters/FilterAddForm.tsx
@@ -1,10 +1,10 @@
 import { Fragment } from "react";
 import { useMutation } from "react-query";
 import { toast } from "react-hot-toast";
-import { XIcon } from "@heroicons/react/solid";
+import { XMarkIcon } from "@heroicons/react/24/solid";
 import { Dialog, Transition } from "@headlessui/react";
-import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
 import type { FieldProps } from "formik";
+import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
 
 import { queryClient } from "../../App";
 import { APIClient } from "../../api/APIClient";
@@ -87,7 +87,7 @@ function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
-                                <XIcon className="h-6 w-6" aria-hidden="true" />
+                                <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                               </button>
                             </div>
                           </div>
diff --git a/web/src/forms/settings/APIKeyAddForm.tsx b/web/src/forms/settings/APIKeyAddForm.tsx
index 1ee9c72..8066a02 100644
--- a/web/src/forms/settings/APIKeyAddForm.tsx
+++ b/web/src/forms/settings/APIKeyAddForm.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from "react";
 import { useMutation } from "react-query";
 import { toast } from "react-hot-toast";
-import { XIcon } from "@heroicons/react/solid";
+import { XMarkIcon } from "@heroicons/react/24/solid";
 import { Dialog, Transition } from "@headlessui/react";
 import type { FieldProps } from "formik";
 import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
@@ -83,7 +83,7 @@ function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
-                                <XIcon className="h-6 w-6" aria-hidden="true"/>
+                                <XMarkIcon className="h-6 w-6" aria-hidden="true"/>
                               </button>
                             </div>
                           </div>
diff --git a/web/src/forms/settings/DownloadClientForms.tsx b/web/src/forms/settings/DownloadClientForms.tsx
index 8df3f01..21f9d98 100644
--- a/web/src/forms/settings/DownloadClientForms.tsx
+++ b/web/src/forms/settings/DownloadClientForms.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useRef, useState } from "react";
 import { useMutation } from "react-query";
 import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/solid";
+import { XMarkIcon } from "@heroicons/react/24/solid";
 import { classNames, sleep } from "../../utils";
 import { Form, Formik, useFormikContext } from "formik";
 import DEBUG from "../../components/debug";
@@ -13,7 +13,13 @@ import { toast } from "react-hot-toast";
 import Toast from "../../components/notifications/Toast";
 import { useToggle } from "../../hooks/hooks";
 import { DeleteModal } from "../../components/modals";
-import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide, RadioFieldsetWide } from "../../components/inputs";
+import {
+  NumberFieldWide,
+  PasswordFieldWide,
+  RadioFieldsetWide,
+  SwitchGroupWide,
+  TextFieldWide
+} from "../../components/inputs";
 import DownloadClient from "../../screens/settings/DownloadClient";
 
 interface InitialValuesSettings {
@@ -511,7 +517,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
-                                <XIcon
+                                <XMarkIcon
                                   className="h-6 w-6"
                                   aria-hidden="true"
                                 />
@@ -710,7 +716,7 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
                                   onClick={toggle}
                                 >
                                   <span className="sr-only">Close panel</span>
-                                  <XIcon
+                                  <XMarkIcon
                                     className="h-6 w-6"
                                     aria-hidden="true"
                                   />
diff --git a/web/src/forms/settings/IndexerForms.tsx b/web/src/forms/settings/IndexerForms.tsx
index 3caad2d..4a21ab3 100644
--- a/web/src/forms/settings/IndexerForms.tsx
+++ b/web/src/forms/settings/IndexerForms.tsx
@@ -5,7 +5,7 @@ import Select, { components, ControlProps, InputProps, MenuProps, OptionProps }
 import type { FieldProps } from "formik";
 import { Field, Form, Formik, FormikValues } from "formik";
 
-import { XIcon } from "@heroicons/react/solid";
+import { XMarkIcon } from "@heroicons/react/24/solid";
 import { Dialog, Transition } from "@headlessui/react";
 
 import { sleep, slugify } from "../../utils";
@@ -381,7 +381,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
-                                <XIcon className="h-6 w-6" aria-hidden="true" />
+                                <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                               </button>
                             </div>
                           </div>
diff --git a/web/src/forms/settings/IrcForms.tsx b/web/src/forms/settings/IrcForms.tsx
index 36ab871..90d22f6 100644
--- a/web/src/forms/settings/IrcForms.tsx
+++ b/web/src/forms/settings/IrcForms.tsx
@@ -1,20 +1,16 @@
-import { useMutation } from "react-query";
-import { toast } from "react-hot-toast";
-import { XIcon } from "@heroicons/react/solid";
-import { Field, FieldArray, FormikErrors, FormikValues } from "formik";
-import type { FieldProps } from "formik";
+import {useMutation} from "react-query";
+import {toast} from "react-hot-toast";
+import {XMarkIcon} from "@heroicons/react/24/solid";
+import type {FieldProps} from "formik";
+import {Field, FieldArray, FormikErrors, FormikValues} from "formik";
 
-import { queryClient } from "../../App";
-import { APIClient } from "../../api/APIClient";
+import {queryClient} from "../../App";
+import {APIClient} from "../../api/APIClient";
 
-import {
-  TextFieldWide,
-  PasswordFieldWide,
-  SwitchGroupWide,
-  NumberFieldWide
-} from "../../components/inputs";
-import { SlideOver } from "../../components/panels";
+import {NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide} from "../../components/inputs";
+import {SlideOver} from "../../components/panels";
 import Toast from "../../components/notifications/Toast";
+import {ExclamationTriangleIcon} from "@heroicons/react/24/outline";
 
 interface ChannelsFieldArrayProps {
   channels: IrcChannel[];
@@ -62,7 +58,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
                   onClick={() => remove(index)}
                 >
                   <span className="sr-only">Remove</span>
-                  <XIcon className="h-6 w-6" aria-hidden="true" />
+                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                 </button>
               </div>
             ))
@@ -160,6 +156,8 @@ export function IrcNetworkAddForm({ isOpen, toggle }: AddFormProps) {
     >
       {(values) => (
         <div className="flex flex-col space-y-4 px-1 py-6 sm:py-0 sm:space-y-0">
+          <div className="flex justify-center dark:bg-red-300 text-sm font-bold text-center p-4 py-8 dark:text-red-800"><span className="flex"><ExclamationTriangleIcon className="mr-2 h-6 w-6" /> ADD NETWORKS VIA INDEXERS! ONLY USE THIS IS YOU DELETED NETWORKS</span></div>
+
           <TextFieldWide
             name="name"
             label="Name"
diff --git a/web/src/forms/settings/NotificationForms.tsx b/web/src/forms/settings/NotificationForms.tsx
index 5055bb3..0bb1e5a 100644
--- a/web/src/forms/settings/NotificationForms.tsx
+++ b/web/src/forms/settings/NotificationForms.tsx
@@ -1,19 +1,19 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment } from "react";
-import type { FieldProps } from "formik";
-import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
-import { XIcon } from "@heroicons/react/solid";
-import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
-import { PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs";
+import {Dialog, Transition} from "@headlessui/react";
+import {Fragment} from "react";
+import type {FieldProps} from "formik";
+import {Field, Form, Formik, FormikErrors, FormikValues} from "formik";
+import {XMarkIcon} from "@heroicons/react/24/solid";
+import Select, {components, ControlProps, InputProps, MenuProps, OptionProps} from "react-select";
+import {PasswordFieldWide, SwitchGroupWide, TextFieldWide} from "../../components/inputs";
 import DEBUG from "../../components/debug";
-import { EventOptions, NotificationTypeOptions, SelectOption } from "../../domain/constants";
-import { useMutation } from "react-query";
-import { APIClient } from "../../api/APIClient";
-import { queryClient } from "../../App";
-import { toast } from "react-hot-toast";
+import {EventOptions, NotificationTypeOptions, SelectOption} from "../../domain/constants";
+import {useMutation} from "react-query";
+import {APIClient} from "../../api/APIClient";
+import {queryClient} from "../../App";
+import {toast} from "react-hot-toast";
 import Toast from "../../components/notifications/Toast";
-import { SlideOver } from "../../components/panels";
-import { componentMapType } from "./DownloadClientForms";
+import {SlideOver} from "../../components/panels";
+import {componentMapType} from "./DownloadClientForms";
 
 const Input = (props: InputProps) => {
   return (
@@ -230,7 +230,7 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
-                                <XIcon className="h-6 w-6" aria-hidden="true" />
+                                <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                               </button>
                             </div>
                           </div>
diff --git a/web/src/screens/Base.tsx b/web/src/screens/Base.tsx
index 87242c8..1667f57 100644
--- a/web/src/screens/Base.tsx
+++ b/web/src/screens/Base.tsx
@@ -1,8 +1,8 @@
 import { Fragment } from "react";
 import { Link, NavLink, Outlet } from "react-router-dom";
 import { Disclosure, Menu, Transition } from "@headlessui/react";
-import { ExternalLinkIcon } from "@heroicons/react/solid";
-import { ChevronDownIcon, MenuIcon, XIcon } from "@heroicons/react/outline";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { Bars3Icon, ChevronDownIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 import { AuthContext } from "../utils/Context";
 
@@ -76,7 +76,7 @@ export default function Base() {
                           )}
                         >
                           Docs
-                          <ExternalLinkIcon className="inline ml-1 h-5 w-5"
+                          <ArrowTopRightOnSquareIcon className="inline ml-1 h-5 w-5"
                             aria-hidden="true"/>
                         </a>
                       </div>
@@ -157,9 +157,9 @@ export default function Base() {
                       className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
                       <span className="sr-only">Open main menu</span>
                       {open ? (
-                        <XIcon className="block h-6 w-6" aria-hidden="true"/>
+                        <XMarkIcon className="block h-6 w-6" aria-hidden="true"/>
                       ) : (
-                        <MenuIcon className="block h-6 w-6" aria-hidden="true"/>
+                        <Bars3Icon className="block h-6 w-6" aria-hidden="true"/>
                       )}
                     </Disclosure.Button>
                   </div>
diff --git a/web/src/screens/Logs.tsx b/web/src/screens/Logs.tsx
index 4e945f0..8d7cf11 100644
--- a/web/src/screens/Logs.tsx
+++ b/web/src/screens/Logs.tsx
@@ -1,12 +1,12 @@
-import { useEffect, useRef, useState } from "react";
-import { ExclamationIcon } from "@heroicons/react/solid";
+import {useEffect, useRef, useState} from "react";
+import {ExclamationTriangleIcon} from "@heroicons/react/24/solid";
 import format from "date-fns/format";
-import { DebounceInput } from "react-debounce-input";
+import {DebounceInput} from "react-debounce-input";
 
-import { APIClient } from "../api/APIClient";
-import { Checkbox } from "../components/Checkbox";
-import { classNames } from "../utils";
-import { SettingsContext } from "../utils/Context";
+import {APIClient} from "../api/APIClient";
+import {Checkbox} from "../components/Checkbox";
+import {classNames} from "../utils";
+import {SettingsContext} from "../utils/Context";
 
 type LogEvent = {
   time: string;
@@ -79,7 +79,7 @@ export const Logs = () => {
         <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
           <h1 className="text-3xl font-bold text-black dark:text-white">Logs</h1>
           <div className="flex justify-center">
-            <ExclamationIcon
+            <ExclamationTriangleIcon
               className="h-5 w-5 text-yellow-400"
               aria-hidden="true"
             />
diff --git a/web/src/screens/Settings.tsx b/web/src/screens/Settings.tsx
index 38ad36f..536bbe7 100644
--- a/web/src/screens/Settings.tsx
+++ b/web/src/screens/Settings.tsx
@@ -1,15 +1,15 @@
-import { NavLink, Outlet, useLocation } from "react-router-dom";
+import {NavLink, Outlet, useLocation} from "react-router-dom";
 import {
   BellIcon,
-  ChatAlt2Icon,
+  ChatBubbleLeftRightIcon,
   CogIcon,
-  CollectionIcon,
-  DownloadIcon,
+  FolderArrowDownIcon,
   KeyIcon,
+  RectangleStackIcon,
   RssIcon
-} from "@heroicons/react/outline";
+} from "@heroicons/react/24/outline";
 
-import { classNames } from "../utils";
+import {classNames} from "../utils";
 
 interface NavTabType {
   name: string;
@@ -20,12 +20,12 @@ interface NavTabType {
 const subNavigation: NavTabType[] = [
   { name: "Application", href: "", icon: CogIcon },
   { name: "Indexers", href: "indexers", icon: KeyIcon },
-  { name: "IRC", href: "irc", icon: ChatAlt2Icon },
+  { name: "IRC", href: "irc", icon: ChatBubbleLeftRightIcon },
   { name: "Feeds", href: "feeds", icon: RssIcon },
-  { name: "Clients", href: "clients", icon: DownloadIcon },
+  { name: "Clients", href: "clients", icon: FolderArrowDownIcon },
   { name: "Notifications", href: "notifications", icon: BellIcon },
   { name: "API keys", href: "api-keys", icon: KeyIcon },
-  { name: "Releases", href: "releases", icon: CollectionIcon }
+  { name: "Releases", href: "releases", icon: RectangleStackIcon }
   // {name: 'Regex Playground', href: 'regex-playground', icon: CogIcon, current: false}
   // {name: 'Rules', href: 'rules', icon: ClipboardCheckIcon, current: false},
 ];
diff --git a/web/src/screens/filters/action.tsx b/web/src/screens/filters/action.tsx
index 0543724..80d5062 100644
--- a/web/src/screens/filters/action.tsx
+++ b/web/src/screens/filters/action.tsx
@@ -1,17 +1,17 @@
-import { AlertWarning } from "../../components/alerts";
-import { DownloadClientSelect, NumberField, Select, SwitchGroup, TextField } from "../../components/inputs";
-import { ActionContentLayoutOptions, ActionTypeNameMap, ActionTypeOptions } from "../../domain/constants";
-import React, { Fragment, useRef } from "react";
-import { useQuery } from "react-query";
-import { APIClient } from "../../api/APIClient";
-import { Field, FieldArray, FieldProps, FormikValues } from "formik";
-import { EmptyListState } from "../../components/emptystates";
-import { useToggle } from "../../hooks/hooks";
-import { classNames } from "../../utils";
-import { Dialog, Switch as SwitchBasic, Transition } from "@headlessui/react";
-import { ChevronRightIcon } from "@heroicons/react/solid";
-import { DeleteModal } from "../../components/modals";
-import { CollapsableSection } from "./details";
+import {AlertWarning} from "../../components/alerts";
+import {DownloadClientSelect, NumberField, Select, SwitchGroup, TextField} from "../../components/inputs";
+import {ActionContentLayoutOptions, ActionTypeNameMap, ActionTypeOptions} from "../../domain/constants";
+import React, {Fragment, useRef} from "react";
+import {useQuery} from "react-query";
+import {APIClient} from "../../api/APIClient";
+import {Field, FieldArray, FieldProps, FormikValues} from "formik";
+import {EmptyListState} from "../../components/emptystates";
+import {useToggle} from "../../hooks/hooks";
+import {classNames} from "../../utils";
+import {Dialog, Switch as SwitchBasic, Transition} from "@headlessui/react";
+import {ChevronRightIcon} from "@heroicons/react/24/solid";
+import {DeleteModal} from "../../components/modals";
+import {CollapsableSection} from "./details";
 
 interface FilterActionsProps {
   filter: Filter;
diff --git a/web/src/screens/filters/details.tsx b/web/src/screens/filters/details.tsx
index 4ff8f00..6ccf5c5 100644
--- a/web/src/screens/filters/details.tsx
+++ b/web/src/screens/filters/details.tsx
@@ -1,9 +1,9 @@
-import React, { useRef } from "react";
-import { useMutation, useQuery } from "react-query";
-import { NavLink, Route, Routes, useLocation, useNavigate, useParams } from "react-router-dom";
-import { toast } from "react-hot-toast";
-import { Form, Formik, FormikValues, useFormikContext } from "formik";
-import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/solid";
+import React, {useRef} from "react";
+import {useMutation, useQuery} from "react-query";
+import {NavLink, Route, Routes, useLocation, useNavigate, useParams} from "react-router-dom";
+import {toast} from "react-hot-toast";
+import {Form, Formik, FormikValues, useFormikContext} from "formik";
+import {ChevronDownIcon, ChevronRightIcon} from "@heroicons/react/24/solid";
 
 import {
   CODECS_OPTIONS,
@@ -19,10 +19,10 @@ import {
   SOURCES_MUSIC_OPTIONS,
   SOURCES_OPTIONS
 } from "../../domain/constants";
-import { queryClient } from "../../App";
-import { APIClient } from "../../api/APIClient";
-import { useToggle } from "../../hooks/hooks";
-import { classNames } from "../../utils";
+import {queryClient} from "../../App";
+import {APIClient} from "../../api/APIClient";
+import {useToggle} from "../../hooks/hooks";
+import {classNames} from "../../utils";
 
 import {
   CheckboxField,
@@ -35,10 +35,10 @@ import {
 } from "../../components/inputs";
 import DEBUG from "../../components/debug";
 import Toast from "../../components/notifications/Toast";
-import { DeleteModal } from "../../components/modals";
-import { TitleSubtitle } from "../../components/headings";
-import { TextArea } from "../../components/inputs/input";
-import { FilterActions } from "./action";
+import {DeleteModal} from "../../components/modals";
+import {TitleSubtitle} from "../../components/headings";
+import {TextArea} from "../../components/inputs/input";
+import {FilterActions} from "./action";
 
 interface tabType {
   name: string;
diff --git a/web/src/screens/filters/list.tsx b/web/src/screens/filters/list.tsx
index 8af11ca..bd171c5 100644
--- a/web/src/screens/filters/list.tsx
+++ b/web/src/screens/filters/list.tsx
@@ -1,26 +1,26 @@
-import { Dispatch, FC, Fragment, MouseEventHandler, useReducer, useRef, useState } from "react";
-import { Link } from "react-router-dom";
-import { toast } from "react-hot-toast";
-import { Listbox, Menu, Switch, Transition } from "@headlessui/react";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+import {Dispatch, FC, Fragment, MouseEventHandler, useReducer, useRef, useState} from "react";
+import {Link} from "react-router-dom";
+import {toast} from "react-hot-toast";
+import {Listbox, Menu, Switch, Transition} from "@headlessui/react";
+import {useMutation, useQuery, useQueryClient} from "react-query";
 import {
+  ArrowsRightLeftIcon,
   CheckIcon,
   ChevronDownIcon,
-  DotsHorizontalIcon,
-  DuplicateIcon,
-  PencilAltIcon,
-  SwitchHorizontalIcon,
+  DocumentDuplicateIcon,
+  EllipsisHorizontalIcon,
+  PencilSquareIcon,
   TrashIcon
-} from "@heroicons/react/outline";
+} from "@heroicons/react/24/outline";
 
-import { queryClient } from "../../App";
-import { classNames } from "../../utils";
-import { FilterAddForm } from "../../forms";
-import { useToggle } from "../../hooks/hooks";
-import { APIClient } from "../../api/APIClient";
+import {queryClient} from "../../App";
+import {classNames} from "../../utils";
+import {FilterAddForm} from "../../forms";
+import {useToggle} from "../../hooks/hooks";
+import {APIClient} from "../../api/APIClient";
 import Toast from "../../components/notifications/Toast";
-import { EmptyListState } from "../../components/emptystates";
-import { DeleteModal } from "../../components/modals";
+import {EmptyListState} from "../../components/emptystates";
+import {DeleteModal} from "../../components/modals";
 
 type FilterListState = {
   indexerFilter: string[],
@@ -250,7 +250,7 @@ const FilterItemDropdown = ({
         text="Are you sure you want to remove this filter? This action cannot be undone."
       />
       <Menu.Button className="px-4 py-2">
-        <DotsHorizontalIcon
+        <EllipsisHorizontalIcon
           className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
           aria-hidden="true"
         />
@@ -277,7 +277,7 @@ const FilterItemDropdown = ({
                     "font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm"
                   )}
                 >
-                  <PencilAltIcon
+                  <PencilSquareIcon
                     className={classNames(
                       active ? "text-white" : "text-blue-500",
                       "w-5 h-5 mr-2"
@@ -297,7 +297,7 @@ const FilterItemDropdown = ({
                   )}
                   onClick={() => onToggle(!filter.enabled)}
                 >
-                  <SwitchHorizontalIcon
+                  <ArrowsRightLeftIcon
                     className={classNames(
                       active ? "text-white" : "text-blue-500",
                       "w-5 h-5 mr-2"
@@ -317,7 +317,7 @@ const FilterItemDropdown = ({
                   )}
                   onClick={() => duplicateMutation.mutate(filter.id)}
                 >
-                  <DuplicateIcon
+                  <DocumentDuplicateIcon
                     className={classNames(
                       active ? "text-white" : "text-blue-500",
                       "w-5 h-5 mr-2"
diff --git a/web/src/screens/releases/Filters.tsx b/web/src/screens/releases/Filters.tsx
index dee841c..f796b70 100644
--- a/web/src/screens/releases/Filters.tsx
+++ b/web/src/screens/releases/Filters.tsx
@@ -1,16 +1,13 @@
 import * as React from "react";
-import { useQuery } from "react-query";
-import { Listbox, Transition } from "@headlessui/react";
-import {
-  CheckIcon,
-  ChevronDownIcon
-} from "@heroicons/react/solid";
+import {useQuery} from "react-query";
+import {Listbox, Transition} from "@headlessui/react";
+import {CheckIcon, ChevronDownIcon} from "@heroicons/react/24/solid";
 
-import { APIClient } from "../../api/APIClient";
-import { classNames } from "../../utils";
-import { PushStatusOptions } from "../../domain/constants";
-import { FilterProps } from "react-table";
-import { DebounceInput } from "react-debounce-input";
+import {APIClient} from "../../api/APIClient";
+import {classNames} from "../../utils";
+import {PushStatusOptions} from "../../domain/constants";
+import {FilterProps} from "react-table";
+import {DebounceInput} from "react-debounce-input";
 
 interface ListboxFilterProps {
     id: string;
diff --git a/web/src/screens/releases/ReleaseTable.tsx b/web/src/screens/releases/ReleaseTable.tsx
index 0ae5a2d..210fc30 100644
--- a/web/src/screens/releases/ReleaseTable.tsx
+++ b/web/src/screens/releases/ReleaseTable.tsx
@@ -1,29 +1,20 @@
 import * as React from "react";
-import { useQuery } from "react-query";
-import {
-  useTable,
-  useSortBy,
-  usePagination,
-  useFilters,
-  Column
-} from "react-table";
+import {useQuery} from "react-query";
+import {Column, useFilters, usePagination, useSortBy, useTable} from "react-table";
 import {
   ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
   ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronDoubleRightIcon
-} from "@heroicons/react/solid";
+  ChevronRightIcon
+} from "@heroicons/react/24/solid";
 
-import { APIClient } from "../../api/APIClient";
-import { EmptyListState } from "../../components/emptystates";
+import {APIClient} from "../../api/APIClient";
+import {EmptyListState} from "../../components/emptystates";
 
 import * as Icons from "../../components/Icons";
 import * as DataTable from "../../components/data-table";
 
-import {
-  IndexerSelectColumnFilter,
-  PushStatusSelectColumnFilter, SearchColumnFilter
-} from "./Filters";
+import {IndexerSelectColumnFilter, PushStatusSelectColumnFilter, SearchColumnFilter} from "./Filters";
 
 type TableState = {
     queryPageIndex: number;
diff --git a/web/src/screens/settings/Api.tsx b/web/src/screens/settings/Api.tsx
index 5cc13b0..c6e1db9 100644
--- a/web/src/screens/settings/Api.tsx
+++ b/web/src/screens/settings/Api.tsx
@@ -1,16 +1,16 @@
-import { queryClient } from "../../App";
-import { useRef } from "react";
-import { useMutation, useQuery } from "react-query";
-import { KeyField } from "../../components/fields/text";
-import { DeleteModal } from "../../components/modals";
+import {queryClient} from "../../App";
+import {useRef} from "react";
+import {useMutation, useQuery} from "react-query";
+import {KeyField} from "../../components/fields/text";
+import {DeleteModal} from "../../components/modals";
 import APIKeyAddForm from "../../forms/settings/APIKeyAddForm";
 import Toast from "../../components/notifications/Toast";
-import { APIClient } from "../../api/APIClient";
-import { useToggle } from "../../hooks/hooks";
-import { toast } from "react-hot-toast";
-import { classNames } from "../../utils";
-import { TrashIcon } from "@heroicons/react/outline";
-import { EmptySimple } from "../../components/emptystates";
+import {APIClient} from "../../api/APIClient";
+import {useToggle} from "../../hooks/hooks";
+import {toast} from "react-hot-toast";
+import {classNames} from "../../utils";
+import {TrashIcon} from "@heroicons/react/24/outline";
+import {EmptySimple} from "../../components/emptystates";
 
 function APISettings() {
   const [addFormIsOpen, toggleAddForm] = useToggle(false);
diff --git a/web/src/screens/settings/Feed.tsx b/web/src/screens/settings/Feed.tsx
index cf0d05b..c5274f4 100644
--- a/web/src/screens/settings/Feed.tsx
+++ b/web/src/screens/settings/Feed.tsx
@@ -1,23 +1,18 @@
-import { useToggle } from "../../hooks/hooks";
-import { useMutation, useQuery, useQueryClient } from "react-query";
-import { APIClient } from "../../api/APIClient";
-import { Menu, Switch, Transition } from "@headlessui/react";
+import {useToggle} from "../../hooks/hooks";
+import {useMutation, useQuery, useQueryClient} from "react-query";
+import {APIClient} from "../../api/APIClient";
+import {Menu, Switch, Transition} from "@headlessui/react";
 
-import { classNames } from "../../utils";
-import { Fragment, useRef, useState } from "react";
-import { toast } from "react-hot-toast";
+import {classNames} from "../../utils";
+import {Fragment, useRef, useState} from "react";
+import {toast} from "react-hot-toast";
 import Toast from "../../components/notifications/Toast";
-import { queryClient } from "../../App";
-import { DeleteModal } from "../../components/modals";
-import {
-  DotsHorizontalIcon,
-  PencilAltIcon,
-  SwitchHorizontalIcon,
-  TrashIcon
-} from "@heroicons/react/outline";
-import { FeedUpdateForm } from "../../forms/settings/FeedForms";
-import { EmptySimple } from "../../components/emptystates";
-import { ImplementationBadges } from "./Indexer";
+import {queryClient} from "../../App";
+import {DeleteModal} from "../../components/modals";
+import {ArrowsRightLeftIcon, EllipsisHorizontalIcon, PencilSquareIcon, TrashIcon} from "@heroicons/react/24/outline";
+import {FeedUpdateForm} from "../../forms/settings/FeedForms";
+import {EmptySimple} from "../../components/emptystates";
+import {ImplementationBadges} from "./Indexer";
 
 function FeedSettings() {
   const { data } = useQuery(
@@ -183,7 +178,7 @@ const FeedItemDropdown = ({
         text="Are you sure you want to remove this feed? This action cannot be undone."
       />
       <Menu.Button className="px-4 py-2">
-        <DotsHorizontalIcon
+        <EllipsisHorizontalIcon
           className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
           aria-hidden="true"
         />
@@ -210,7 +205,7 @@ const FeedItemDropdown = ({
                   )}
                   onClick={() => toggleUpdate()}
                 >
-                  <PencilAltIcon
+                  <PencilSquareIcon
                     className={classNames(
                       active ? "text-white" : "text-blue-500",
                       "w-5 h-5 mr-2"
@@ -230,7 +225,7 @@ const FeedItemDropdown = ({
                   )}
                   onClick={() => onToggle(!feed.enabled)}
                 >
-                  <SwitchHorizontalIcon
+                  <ArrowsRightLeftIcon
                     className={classNames(
                       active ? "text-white" : "text-blue-500",
                       "w-5 h-5 mr-2"
diff --git a/web/src/screens/settings/Irc.tsx b/web/src/screens/settings/Irc.tsx
index b3bf1df..ee7d3ac 100644
--- a/web/src/screens/settings/Irc.tsx
+++ b/web/src/screens/settings/Irc.tsx
@@ -1,14 +1,28 @@
-import { useQuery } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 
-import { simplifyDate, IsEmptyDate, classNames } from "../../utils";
+import { classNames, IsEmptyDate, simplifyDate } from "../../utils";
 import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "../../forms";
 import { useToggle } from "../../hooks/hooks";
 import { APIClient } from "../../api/APIClient";
 import { EmptySimple } from "../../components/emptystates";
-import { ExclamationCircleIcon } from "@heroicons/react/outline";
-import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/solid";
+import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/solid";
+import { Menu, Transition } from "@headlessui/react";
+import { Fragment, useRef } from "react";
+import { DeleteModal } from "../../components/modals";
+
+import { toast } from "react-hot-toast";
+import Toast from "../../components/notifications/Toast";
+import {
+  ArrowsPointingInIcon,
+  ArrowsPointingOutIcon,
+  EllipsisHorizontalIcon,
+  ExclamationCircleIcon,
+  PencilSquareIcon,
+  TrashIcon
+} from "@heroicons/react/24/outline";
 
 export const IrcSettings = () => {
+  const [expandNetworks, toggleExpand] = useToggle(false);
   const [addNetworkIsOpen, toggleAddNetwork] = useToggle(false);
 
   const { data } = useQuery("networks", () => APIClient.irc.getNetworks(), {
@@ -42,23 +56,63 @@ export const IrcSettings = () => {
             </button>
           </div>
         </div>
+
+        <div className="flex justify-between flex-col sm:flex-row mt-10 px-1">
+          <ol className="flex flex-col sm:flex-row sm:gap-2 pb-4 sm:pb-0 sm:divide-x sm:divide-gray-200 sm:dark:divide-gray-700">
+            <li className="flex items-center">
+              <span
+                className="mr-2 flex h-4 w-4 relative"
+                title="Network healthy"
+              >
+                <span className="animate-ping inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+                <span className="inline-flex absolute rounded-full h-4 w-4 bg-green-500" />
+              </span>
+              <span className="text-sm text-gray-800 dark:text-gray-500">Network healthy</span>
+            </li>
+
+            <li className="flex items-center sm:pl-2">
+              <span
+                className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-yellow-400 over:text-yellow-600"
+                title="Network unhealthy"
+              />
+              <span className="text-sm text-gray-800 dark:text-gray-500">Network unhealthy</span>
+            </li>
+
+            <li className="flex items-center sm:pl-2">
+              <span
+                className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-gray-500"
+                title="Network disabled"
+              >
+              </span>
+              <span className="text-sm text-gray-800 dark:text-gray-500">Network disabled</span>
+            </li>
+          </ol>
+          <div className="flex gap-x-2">
+            <button className="flex items-center text-sm text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" onClick={toggleExpand} title={expandNetworks ? "collapse" : "expand"}>
+              {expandNetworks
+                ? <span className="flex items-center">Collapse <ArrowsPointingInIcon className="ml-1 w-4 h-4"/></span>
+                : <span className="flex items-center">Expand <ArrowsPointingOutIcon className="ml-1 w-4 h-4"/></span>
+              }</button>
+          </div>
+        </div>
+
         {data && data.length > 0 ? (
           <section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
-            <ol className="min-w-full">
+            <ol className="min-w-full relative">
               <li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
                 <div className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                   Network
                 </div>
-                <div className="col-span-5 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                <div className="hidden sm:flex col-span-5 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                   Server
                 </div>
-                <div className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                <div className="hidden sm:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                   Nick
                 </div>
               </li>
               {data &&
                 data.map((network, idx) => (
-                  <ListItem key={idx} idx={idx} network={network} />
+                  <ListItem key={idx} idx={idx} expanded={expandNetworks} network={network} />
                 ))}
             </ol>
           </section>
@@ -78,15 +132,16 @@ export const IrcSettings = () => {
 interface ListItemProps {
   idx: number;
   network: IrcNetworkWithHealth;
+  expanded: boolean;
 }
 
-const ListItem = ({ idx, network }: ListItemProps) => {
+const ListItem = ({ idx, network, expanded }: ListItemProps) => {
   const [updateIsOpen, toggleUpdate] = useToggle(false);
   const [edit, toggleEdit] = useToggle(false);
 
   return (
     <li key={idx}>
-      <div className={classNames("grid grid-cols-12 gap-2 lg:gap-4 items-center py-4", network.enabled && !network.healthy ? "bg-red-50 dark:bg-red-900 hover:bg-red-100 dark:hover:bg-red-800" : "hover:bg-gray-50 dark:hover:bg-gray-700 ")}>
+      <div className={classNames("grid grid-cols-12 gap-2 lg:gap-4 items-center py-2", network.enabled && !network.healthy ? "bg-red-50 dark:bg-red-900 hover:bg-red-100 dark:hover:bg-red-800" : "hover:bg-gray-50 dark:hover:bg-gray-700 ")}>
         <IrcNetworkUpdateForm
           isOpen={updateIsOpen}
           toggle={toggleUpdate}
@@ -94,7 +149,7 @@ const ListItem = ({ idx, network }: ListItemProps) => {
         />
 
         <div
-          className="col-span-3 items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-white cursor-pointer"
+          className="col-span-10 xs:col-span-3 sm:col-span-3 items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-white cursor-pointer"
           onClick={toggleEdit}
         >
           <div className="flex">
@@ -126,7 +181,7 @@ const ListItem = ({ idx, network }: ListItemProps) => {
           </div>
         </div>
         <div
-          className="col-span-5 sm:px-6 text-sm text-gray-500 dark:text-gray-400 cursor-pointer"
+          className="hidden sm:flex col-span-5 sm:px-6 text-sm text-gray-500 dark:text-gray-400 cursor-pointer"
           onClick={toggleEdit}
         >
           <div
@@ -155,7 +210,7 @@ const ListItem = ({ idx, network }: ListItemProps) => {
         </div>
         {network.nickserv && network.nickserv.account ? (
           <div
-            className="col-span-3 items-center sm:px-6 text-sm text-gray-500 dark:text-gray-400 cursor-pointer"
+            className="hidden sm:flex col-span-3 items-center sm:px-6 text-sm text-gray-500 dark:text-gray-400 cursor-pointer"
             onClick={toggleEdit}
           >
             <div className="overflow-x-auto flex">
@@ -166,15 +221,10 @@ const ListItem = ({ idx, network }: ListItemProps) => {
           <div className="col-span-3" />
         )}
         <div className="col-span-1 text-sm text-gray-500 dark:text-gray-400">
-          <span
-            className="text-indigo-600 dark:text-gray-300 hover:text-indigo-900 cursor-pointer"
-            onClick={toggleUpdate}
-          >
-            Edit
-          </span>
+          <ListItemDropdown network={network} toggleUpdate={toggleUpdate} />
         </div>
       </div>
-      {edit && (
+      {(edit || expanded) && (
         <div className="px-4 py-4 flex border-b border-x-0 dark:border-gray-600 dark:bg-gray-700">
           <div className="min-w-full">
             {network.channels.length > 0 ? (
@@ -238,3 +288,168 @@ const ListItem = ({ idx, network }: ListItemProps) => {
     </li>
   );
 };
+
+interface ListItemDropdownProps {
+  network: IrcNetwork;
+  toggleUpdate: () => void;
+}
+
+const ListItemDropdown = ({
+  network,
+  toggleUpdate
+}: ListItemDropdownProps) => {
+  const cancelModalButtonRef = useRef(null);
+
+  const queryClient = useQueryClient();
+
+  const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
+  const deleteMutation = useMutation(
+    (id: number) => APIClient.irc.deleteNetwork(id),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["networks"]);
+        queryClient.invalidateQueries(["networks", network.id]);
+
+        toast.custom((t) => <Toast type="success" body={`Network ${network.name} was deleted`} t={t}/>);
+      }
+    }
+  );
+
+  const restartMutation = useMutation(
+    (id: number) => APIClient.irc.restartNetwork(id),
+    {
+      onSuccess: () => {
+        toast.custom((t) => <Toast type="success"
+          body={`${network.name} was successfully restarted`}
+          t={t}/>);
+
+        queryClient.invalidateQueries(["networks"]);
+        queryClient.invalidateQueries(["networks", network.id]);
+      }
+    }
+  );
+
+  const restart = (id: number) => {
+    restartMutation.mutate(id);
+  };
+
+  return (
+    <Menu as="div">
+      <DeleteModal
+        isOpen={deleteModalIsOpen}
+        toggle={toggleDeleteModal}
+        buttonRef={cancelModalButtonRef}
+        deleteAction={() => {
+          deleteMutation.mutate(network.id);
+          toggleDeleteModal();
+        }}
+        title={`Remove network: ${network.name}`}
+        text="Are you sure you want to remove this network? This action cannot be undone."
+      />
+      <Menu.Button className="px-4 py-2">
+        <EllipsisHorizontalIcon
+          className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
+          aria-hidden="true"
+        />
+      </Menu.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items
+          className="absolute right-0 w-32 sm:w-56 mt-2 origin-top-right bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
+        >
+          <div className="px-1 py-1">
+            <Menu.Item>
+              {({ active }) => (
+                <button
+                  className={classNames(
+                    active ? "bg-blue-600 text-white" : "text-gray-900 dark:text-gray-300",
+                    "font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm"
+                  )}
+                  onClick={() => toggleUpdate()}
+                >
+                  <PencilSquareIcon
+                    className={classNames(
+                      active ? "text-white" : "text-blue-500",
+                      "w-5 h-5 mr-2"
+                    )}
+                    aria-hidden="true"
+                  />
+                  Edit
+                </button>
+              )}
+            </Menu.Item>
+            {/*<Menu.Item>*/}
+            {/*  {({ active }) => (*/}
+            {/*    <button*/}
+            {/*      className={classNames(*/}
+            {/*        active ? "bg-blue-600 text-white" : "text-gray-900 dark:text-gray-300",*/}
+            {/*        "font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm"*/}
+            {/*      )}*/}
+            {/*      onClick={() => onToggle(!network.enabled)}*/}
+            {/*    >*/}
+            {/*      <SwitchHorizontalIcon*/}
+            {/*        className={classNames(*/}
+            {/*          active ? "text-white" : "text-blue-500",*/}
+            {/*          "w-5 h-5 mr-2"*/}
+            {/*        )}*/}
+            {/*        aria-hidden="true"*/}
+            {/*      />*/}
+            {/*      {network.enabled ? "Disable" : "Enable"}*/}
+            {/*    </button>*/}
+            {/*  )}*/}
+            {/*</Menu.Item>*/}
+            <Menu.Item>
+              {({ active }) => (
+                <button
+                  className={classNames(
+                    active ? "bg-blue-600 text-white" : "text-gray-900 dark:text-gray-300",
+                    "font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm"
+                  )}
+                  onClick={() => restart(network.id)}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={classNames(
+                    active ? "text-white" : "text-blue-500",
+                    "w-5 h-5 mr-2"
+                  )}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5.636 5.636a9 9 0 1012.728 0M12 3v9" />
+                  </svg>
+
+                  Restart
+                </button>
+              )}
+            </Menu.Item>
+          </div>
+          <div className="px-1 py-1">
+            <Menu.Item>
+              {({ active }) => (
+                <button
+                  className={classNames(
+                    active ? "bg-red-600 text-white" : "text-gray-900 dark:text-gray-300",
+                    "font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm"
+                  )}
+                  onClick={() => toggleDeleteModal()}
+                >
+                  <TrashIcon
+                    className={classNames(
+                      active ? "text-white" : "text-red-500",
+                      "w-5 h-5 mr-2"
+                    )}
+                    aria-hidden="true"
+                  />
+                  Delete
+                </button>
+              )}
+            </Menu.Item>
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
diff --git a/web/yarn.lock b/web/yarn.lock
index c337aba..605c15c 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2012,12 +2012,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@heroicons/react@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "@heroicons/react@npm:1.0.6"
+"@heroicons/react@npm:^2.0.11":
+  version: 2.0.11
+  resolution: "@heroicons/react@npm:2.0.11"
   peerDependencies:
     react: ">= 16"
-  checksum: 372b1eda3ce735ef069777bc96304f70de585ebb71a6d1cedc121bb695f9bca235619112e3ee14e8779e95a03096813cbbe3b755927a54b7580d1ce084fa4096
+  checksum: 9049e12bdb9bb1cc2ebc555877f538055ae01828bda781f0a7f3b2fe17aff8b6337d8562c5984bfe09ee77e95befd4e62854a58c9900c2e2650798b15ab807c3
   languageName: node
   linkType: hard
 
@@ -12886,7 +12886,7 @@ __metadata:
   dependencies:
     "@fontsource/inter": ^4.5.11
     "@headlessui/react": ^1.6.4
-    "@heroicons/react": ^1.0.6
+    "@heroicons/react": ^2.0.11
     "@hookform/error-message": ^2.0.0
     "@tailwindcss/forms": ^0.5.2
     "@types/node": ^18.0.0