fix(deps): update dependency @heroicons/react to v2 (#2970)

* fix(deps): update dependency @heroicons/react to v2

* fix: update imports and fix icon name changes for heroicons

* fix: also update MiniStatusBadge to use new check icon

* fix: update last place with old import

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: sct <ryan@sct.dev>

src/components/Settings/SettingsMain/DiscoverCustomization/DiscoverOption/index.tsx

@@ -2,7 +2,7 @@ import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import SlideCheckbox from '@app/components/Common/SlideCheckbox';
 import Tooltip from '@app/components/Common/Tooltip';
-import { MenuIcon, XIcon } from '@heroicons/react/solid';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-aria';
@@ -135,7 +135,7 @@ const DiscoverOption = ({
           isDragging ? 'opacity-0' : 'opacity-100'
         }`}
       >
-        <MenuIcon className="h-6 w-6" />
+        <Bars3Icon className="h-6 w-6" />
 
         <span className="flex-1">{title}</span>
         {subtitle && <Badge>{subtitle}</Badge>}
@@ -147,7 +147,7 @@ const DiscoverOption = ({
               buttonSize="sm"
               onClick={() => deleteSlider()}
             >
-              <XIcon />
+              <XMarkIcon />
               <span>{intl.formatMessage(messages.remove)}</span>
             </Button>
           </div>

src/components/Settings/SettingsMain/DiscoverCustomization/index.tsx

@@ -5,7 +5,10 @@ import { sliderTitles } from '@app/components/Discover/constants';
 import CreateSlider from '@app/components/Settings/SettingsMain/DiscoverCustomization/CreateSlider';
 import DiscoverOption from '@app/components/Settings/SettingsMain/DiscoverCustomization/DiscoverOption';
 import globalMessages from '@app/i18n/globalMessages';
-import { RefreshIcon, SaveIcon } from '@heroicons/react/solid';
+import {
+  ArrowDownOnSquareIcon,
+  ArrowPathIcon,
+} from '@heroicons/react/24/solid';
 import { DiscoverSliderType } from '@server/constants/discover';
 import type DiscoverSlider from '@server/entity/DiscoverSlider';
 import axios from 'axios';
@@ -194,7 +197,7 @@ const DiscoverCustomization = () => {
           <span className="ml-3 inline-flex rounded-md shadow-sm">
             <Tooltip content={intl.formatMessage(messages.resetwarning)}>
               <Button buttonType="default" onClick={() => resetSliders()}>
-                <RefreshIcon />
+                <ArrowPathIcon />
                 <span>{intl.formatMessage(messages.resettodefault)}</span>
               </Button>
             </Tooltip>
@@ -207,7 +210,7 @@ const DiscoverCustomization = () => {
               onClick={() => updateSliders()}
               data-testid="discover-customize-submit"
             >
-              <SaveIcon />
+              <ArrowDownOnSquareIcon />
               <span>{intl.formatMessage(globalMessages.save)}</span>
             </Button>
           </span>

src/components/Settings/SettingsMain/index.tsx

@@ -13,8 +13,8 @@ import { availableLanguages } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { SaveIcon } from '@heroicons/react/outline';
-import { RefreshIcon } from '@heroicons/react/solid';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
+import { ArrowPathIcon } from '@heroicons/react/24/solid';
 import type { UserSettingsGeneralResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import type { MainSettings } from '@server/lib/settings';
 import axios from 'axios';
@@ -215,7 +215,7 @@ const SettingsMain = () => {
                           }}
                           className="input-action"
                         >
-                          <RefreshIcon />
+                          <ArrowPathIcon />
                         </button>
                       </div>
                     </div>
@@ -439,7 +439,7 @@ const SettingsMain = () => {
                         type="submit"
                         disabled={isSubmitting || !isValid}
                       >
-                        <SaveIcon />
+                        <ArrowDownOnSquareIcon />
                         <span>
                           {isSubmitting
                             ? intl.formatMessage(globalMessages.saving)