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

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>

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"
           />

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",

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;

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"
             />

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}

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>
           )}

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"
                         />

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

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}

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>

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>