chore: update @heroicons/react library

components/application.js

@@ -1,8 +1,8 @@
 import { Card, Button, Link, Dropdown, Input, Select, useModal, useNotification } from '@johackim/design-system';
 import { useRouter } from 'next/router';
 import { useAuth, useForm, FormContext } from '@lib/contexts';
-import { ExternalLinkIcon } from '@heroicons/react/solid';
-import { TrashIcon } from '@heroicons/react/outline';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
+import { TrashIcon } from '@heroicons/react/24/outline';
 import { useTranslation } from 'react-i18next';
 import Percentage from '@components/percentage';
 
@@ -189,7 +189,7 @@ export default (app) => {
         >
             <Percentage updatedAt={updatedAt} />
             <div className="flex">
-                <ExternalLinkIcon className="w-4 h-4 text-gray-500 mr-1" />
+                <ArrowTopRightOnSquareIcon className="w-4 h-4 text-gray-500 mr-1" />
                 <Link href={`https://${domain}`} target="_blank" className="text-xs underline">{`https://${domain}`}</Link>
             </div>
             <div className="mt-8">

components/sidebarLayout.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { SidebarLayout, useNotification } from '@johackim/design-system';
-import { HomeIcon, ViewGridIcon, DocumentTextIcon, CogIcon, LogoutIcon } from '@heroicons/react/outline';
+import { HomeIcon, Squares2X2Icon, DocumentTextIcon, Cog8ToothIcon, ArrowRightOnRectangleIcon } from '@heroicons/react/24/outline';
 import { useAuth } from '@lib/contexts';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';
@@ -30,10 +30,10 @@ export default ({ children, className }) => {
 
     const sidebarLinks = [
         { name: t('Home'), href: '/', active: isActive('/'), icon: <HomeIcon className="mr-4 h-6 w-6" fill="none" /> },
-        { name: t('Applications'), href: '/apps', active: isActive('/apps'), icon: <ViewGridIcon className="mr-4 w-6 h-6" fill="none" /> },
+        { name: t('Applications'), href: '/apps', active: isActive('/apps'), icon: <Squares2X2Icon className="mr-4 w-6 h-6" fill="none" /> },
         { name: t('Invoices'), href: '/invoices', active: isActive('/invoices'), icon: <DocumentTextIcon className="mr-4 w-6 h-6" fill="none" /> },
-        { name: t('Settings'), href: '/settings', active: isActive('/settings'), icon: <CogIcon className="mr-4 w-6 h-6" fill="none" /> },
-        { name: t('Sign out'), href: '/logout', active: isActive('/logout'), icon: <LogoutIcon className="mr-4 w-6 h-6" fill="none" />, footer: true, 'data-test': 'logout' },
+        { name: t('Settings'), href: '/settings', active: isActive('/settings'), icon: <Cog8ToothIcon className="mr-4 w-6 h-6" fill="none" /> },
+        { name: t('Sign out'), href: '/logout', active: isActive('/logout'), icon: <ArrowRightOnRectangleIcon className="mr-4 w-6 h-6" fill="none" />, footer: true, 'data-test': 'logout' },
     ];
 
     return (

package.json

@@ -36,7 +36,7 @@
     "test:ci": "concurrently -k -s first \"npm run dev\" \"npm run test\""
   },
   "dependencies": {
-    "@heroicons/react": "^1.0.6",
+    "@heroicons/react": "^2.0.18",
     "@johackim/design-system": "^1.31.2",
     "bcrypt": "^5.1.0",
     "cron": "^2.3.1",

pages/apps.js

@@ -8,7 +8,7 @@ import { postQuery } from '@api/apps';
 import { Button, Empty, Loading } from '@johackim/design-system';
 import { useApi } from '@lib/contexts';
 import { useTranslation } from 'react-i18next';
-import { ViewGridIcon } from '@heroicons/react/outline';
+import { Squares2X2Icon } from '@heroicons/react/24/outline';
 
 export default ({ confetti }) => {
     const router = useRouter();
@@ -33,7 +33,7 @@ export default ({ confetti }) => {
                 <Empty
                     title={t('No applications yet')}
                     subtitle={t('You can create your first application by clicking the button below')}
-                    icon={<ViewGridIcon className="w-20 m-auto text-gray-600" fille="none" />}
+                    icon={<Squares2X2Icon className="w-20 m-auto text-gray-600" fille="none" />}
                     button={<Button onClick={() => router.push('/')} type="button">{t('Go to the store')}</Button>}
                 />
             </SidebarLayout>

pages/index.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { Card, Button, Link, useNotification } from '@johackim/design-system';
-import { ExternalLinkIcon } from '@heroicons/react/solid';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
 import { useAuth } from '@lib/contexts';
 import { useTranslation } from 'react-i18next';
 import SidebarLayout from '@components/sidebarLayout';
@@ -60,7 +60,7 @@ export default (props) => {
                                 small
                             >
                                 <div className="flex">
-                                    <ExternalLinkIcon className="w-4 h-4 text-gray-500 mr-1" />
+                                    <ArrowTopRightOnSquareIcon className="w-4 h-4 text-gray-500 mr-1" />
                                     <Link href={website} target="_blank" className="text-xs underline">{t('More infos')}</Link>
                                 </div>
                                 <div className="mt-10">

pages/invoices.js

@@ -2,7 +2,7 @@ import { Empty, Button, Table, Loading } from '@johackim/design-system';
 import { useRouter } from 'next/router';
 import { useApi } from '@lib/contexts';
 import { useTranslation } from 'react-i18next';
-import { DocumentTextIcon } from '@heroicons/react/outline';
+import { DocumentTextIcon } from '@heroicons/react/24/outline';
 import SidebarLayout from '@components/sidebarLayout';
 
 export default () => {