pterodactyl · mrxbox98 · Oct 26, 2022 · Oct 26, 2022 · Oct 30, 2022
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.11",
         "@headlessui/react": "^1.6.4",
-        "@heroicons/react": "^1.0.6",
+        "@heroicons/react": "2.0.12",
         "@hot-loader/react-dom": "^16.14.0",
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",

diff --git a/resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx b/resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx
@@ -5,7 +5,7 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Link } from 'react-router-dom';
 import PaginationFooter from '@/components/elements/table/PaginationFooter';
-import { DesktopComputerIcon, XCircleIcon } from '@heroicons/react/solid';
+import { ComputerDesktopIcon, XCircleIcon } from '@heroicons/react/24/solid';
 import Spinner from '@/components/elements/Spinner';
 import { styles as btnStyles } from '@/components/elements/button/index';
 import classNames from 'classnames';
@@ -53,7 +53,7 @@ export default () => {
                             {typeof activity.properties.useragent === 'string' && (
                                 <Tooltip content={activity.properties.useragent} placement={'top'}>
                                     <span>
-                                        <DesktopComputerIcon />
+                                        <ComputerDesktopIcon />
                                     </span>
                                 </Tooltip>
                             )}

diff --git a/resources/scripts/components/elements/activity/ActivityLogEntry.tsx b/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
@@ -5,7 +5,7 @@ import Translate from '@/components/elements/Translate';
 import { format, formatDistanceToNowStrict } from 'date-fns';
 import { ActivityLog } from '@definitions/user';
 import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton';
-import { FolderOpenIcon, TerminalIcon } from '@heroicons/react/solid';
+import { FolderOpenIcon, CommandLineIcon } from '@heroicons/react/24/solid';
 import classNames from 'classnames';
 import style from './style.module.css';
 import Avatar from '@/components/Avatar';
@@ -66,7 +66,7 @@ export default ({ activity, children }: Props) => {
                         <div className={classNames(style.icons, 'group-hover:text-gray-300')}>
                             {activity.isApi && (
                                 <Tooltip placement={'top'} content={'Using API Key'}>
-                                    <TerminalIcon />
+                                    <CommandLineIcon />
                                 </Tooltip>
                             )}
                             {activity.event.startsWith('server:sftp.') && (

diff --git a/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx b/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ClipboardListIcon } from '@heroicons/react/outline';
+import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline';
 import { Dialog } from '@/components/elements/dialog';
 import { Button } from '@/components/elements/button/index';
 
@@ -27,7 +27,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
                 }
                 onClick={() => setOpen(true)}
             >
-                <ClipboardListIcon className={'w-5 h-5'} />
+                <ClipboardDocumentListIcon className={'w-5 h-5'} />
             </button>
         </div>
     );

diff --git a/resources/scripts/components/elements/alert/Alert.tsx b/resources/scripts/components/elements/alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { ExclamationIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
+import { ExclamationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/24/outline';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -23,7 +23,7 @@ export default ({ type, className, children }: AlertProps) => {
             {type === 'danger' ? (
                 <ShieldExclamationIcon className={'w-6 h-6 text-red-400 mr-2'} />
             ) : (
-                <ExclamationIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
+                <ExclamationCircleIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
             )}
             {children}
         </div>

diff --git a/resources/scripts/components/elements/dialog/Dialog.tsx b/resources/scripts/components/elements/dialog/Dialog.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { Dialog as HDialog } from '@headlessui/react';
 import { Button } from '@/components/elements/button/index';
-import { XIcon } from '@heroicons/react/solid';
+import { XMarkIcon } from '@heroicons/react/24/solid';
 import { AnimatePresence, motion } from 'framer-motion';
 import { DialogContext, IconPosition, RenderDialogProps, styles } from './';
 
@@ -116,7 +116,7 @@ export default ({
                                                 onClick={onClose}
                                                 className={'group'}
                                             >
-                                                <XIcon className={styles.close_icon} />
+                                                <XMarkIcon className={styles.close_icon} />
                                             </Button.Text>
                                         </div>
                                     )}

diff --git a/resources/scripts/components/elements/dialog/DialogIcon.tsx b/resources/scripts/components/elements/dialog/DialogIcon.tsx
@@ -1,11 +1,16 @@
 import React, { useContext, useEffect } from 'react';
-import { CheckIcon, ExclamationIcon, InformationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
+import {
+    CheckIcon,
+    ExclamationCircleIcon,
+    InformationCircleIcon,
+    ShieldExclamationIcon,
+} from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import { DialogContext, DialogIconProps, styles } from './';
 
 const icons = {
     danger: ShieldExclamationIcon,
-    warning: ExclamationIcon,
+    warning: ExclamationCircleIcon,
     success: CheckIcon,
     info: InformationCircleIcon,
 };

diff --git a/resources/scripts/components/elements/dropdown/DropdownButton.tsx b/resources/scripts/components/elements/dropdown/DropdownButton.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import styles from '@/components/elements/dropdown/style.module.css';
-import { ChevronDownIcon } from '@heroicons/react/solid';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import { Menu } from '@headlessui/react';
 import React from 'react';
 

diff --git a/resources/scripts/components/elements/table/PaginationFooter.tsx b/resources/scripts/components/elements/table/PaginationFooter.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { PaginationDataSet } from '@/api/http';
 import classNames from 'classnames';
 import { Button } from '@/components/elements/button/index';
-import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from '@heroicons/react/solid';
+import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from '@heroicons/react/24/solid';
 
 interface Props {
     className?: string;

diff --git a/resources/scripts/components/server/ServerActivityLogContainer.tsx b/resources/scripts/components/server/ServerActivityLogContainer.tsx
@@ -10,7 +10,7 @@ import { ActivityLogFilters } from '@/api/account/activity';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import { styles as btnStyles } from '@/components/elements/button/index';
-import { XCircleIcon } from '@heroicons/react/solid';
+import { XCircleIcon } from '@heroicons/react/24/solid';
 import useLocationHash from '@/plugins/useLocationHash';
 
 export default () => {

diff --git a/resources/scripts/components/server/console/Console.tsx b/resources/scripts/components/server/console/Console.tsx
@@ -14,7 +14,7 @@ import { debounce } from 'debounce';
 import { usePersistedState } from '@/plugins/usePersistedState';
 import { SocketEvent, SocketRequest } from '@/components/server/events';
 import classNames from 'classnames';
-import { ChevronDoubleRightIcon } from '@heroicons/react/solid';
+import { ChevronDoubleRightIcon } from '@heroicons/react/24/solid';
 
 import 'xterm/css/xterm.css';
 import styles from './style.module.css';

diff --git a/resources/scripts/components/server/console/StatGraphs.tsx b/resources/scripts/components/server/console/StatGraphs.tsx
@@ -6,7 +6,7 @@ import { Line } from 'react-chartjs-2';
 import { useChart, useChartTickLabel } from '@/components/server/console/chart';
 import { hexToRgba } from '@/lib/helpers';
 import { bytesToString } from '@/lib/formatters';
-import { CloudDownloadIcon, CloudUploadIcon } from '@heroicons/react/solid';
+import { CloudArrowDownIcon, CloudArrowUpIcon } from '@heroicons/react/24/solid';
 import { theme } from 'twin.macro';
 import ChartBlock from '@/components/server/console/ChartBlock';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
@@ -79,10 +79,10 @@ export default () => {
                 legend={
                     <>
                         <Tooltip arrow content={'Inbound'}>
-                            <CloudDownloadIcon className={'mr-2 w-4 h-4 text-yellow-400'} />
+                            <CloudArrowDownIcon className={'mr-2 w-4 h-4 text-yellow-400'} />
                         </Tooltip>
                         <Tooltip arrow content={'Outbound'}>
-                            <CloudUploadIcon className={'w-4 h-4 text-cyan-400'} />
+                            <CloudArrowUpIcon className={'w-4 h-4 text-cyan-400'} />
                         </Tooltip>
                     </>
                 }

diff --git a/resources/scripts/components/server/files/FileManagerStatus.tsx b/resources/scripts/components/server/files/FileManagerStatus.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
-import { CloudUploadIcon } from '@heroicons/react/solid';
+import { CloudArrowUpIcon } from '@heroicons/react/24/solid';
 import asDialog from '@/hoc/asDialog';
 import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
 import { Button } from '@/components/elements/button/index';
@@ -80,7 +80,7 @@ export default () => {
                 <Tooltip content={`${count} files are uploading, click to view`}>
                     <button className={'flex items-center justify-center w-10 h-10'} onClick={setOpen.bind(this, true)}>
                         <Spinner progress={(progress.uploaded / progress.total) * 100} className={'w-8 h-8'} />
-                        <CloudUploadIcon className={'h-3 absolute mx-auto animate-pulse'} />
+                        <CloudArrowUpIcon className={'h-3 absolute mx-auto animate-pulse'} />
                     </button>
                 </Tooltip>
             )}

diff --git a/resources/scripts/components/server/files/UploadButton.tsx b/resources/scripts/components/server/files/UploadButton.tsx
@@ -11,7 +11,7 @@ import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import { ServerContext } from '@/state/server';
 import { WithClassname } from '@/components/types';
 import Portal from '@/components/elements/Portal';
-import { CloudUploadIcon } from '@heroicons/react/outline';
+import { CloudArrowUpIcon } from '@heroicons/react/24/outline';
 
 function isFileOrDirectory(event: DragEvent): boolean {
     if (!event.dataTransfer?.types) {
@@ -124,7 +124,7 @@ export default ({ className }: WithClassname) => {
                                     'flex items-center space-x-4 bg-black w-full ring-4 ring-blue-200 ring-opacity-60 rounded p-6 mx-10 max-w-sm'
                                 }
                             >
-                                <CloudUploadIcon className={'w-10 h-10 flex-shrink-0'} />
+                                <CloudArrowUpIcon className={'w-10 h-10 flex-shrink-0'} />
                                 <p className={'font-header flex-1 text-lg text-neutral-100 text-center'}>
                                     Drag and drop files to upload.
                                 </p>

diff --git a/yarn.lock b/yarn.lock
@@ -1170,10 +1170,10 @@
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.4.tgz#c73084e23386bef5fb86cd16da3352c3a844bb4c"
   integrity sha512-0yqz1scwbFtwljmbbKjXsSGl5ABEYNICVHZnMCWo0UtOZodo2Tpu94uOVgCRjRZ77l2WcTi2S0uidINDvG7lsA==
 
-"@heroicons/react@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
-  integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
+"@heroicons/react@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.12.tgz#7e5a16c82512f89a30266dd36f8b8465b3e3e216"
+  integrity sha512-FZxKh3i9aKIDxyALTgIpSF2t6V6/eZfF5mRu41QlwkX3Oxzecdm1u6dpft6PQGxIBwO7TKYWaMAYYL8mp/EaOg==
 
 "@hot-loader/react-dom@^16.14.0":
   version "16.14.0"