Refactor to use @tanstack/react-query for data fetching in various components

src/views/Labels/LabelQueries.jsx

@@ -1,8 +1,9 @@
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { GetLabels } from '../../utils/Fetcher'
-
 export const useLabels = () => {
-  return useQuery('labels', GetLabels, {
+  return useQuery({
+    queryKey: ['labels'],
+    queryFn: GetLabels,
     initialData: [],
   })
 }

src/views/Labels/LabelView.jsx

@@ -15,7 +15,7 @@ import { useLabels } from './LabelQueries'
 
 // import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Add } from '@mui/icons-material'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from 'react-router-dom'
 import { getTextColorFromBackgroundColor } from '../../utils/Colors'
 import { DeleteLabel } from '../../utils/Fetcher'

src/views/Modals/Inputs/LabelModal.jsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/joy'
 import { useEffect, useState } from 'react'
 
-import { useMutation, useQueryClient } from 'react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import LABEL_COLORS from '../../../utils/Colors.jsx'
 import { CreateLabel, UpdateLabel } from '../../../utils/Fetcher'
 import { useLabels } from '../../Labels/LabelQueries'
@@ -109,7 +109,7 @@ function LabelModal({ isOpen, onClose, label }) {
               <Typography
                 startDecorator={
                   <Box
-                    className='h-4 w-4'
+                    className='size-4'
                     borderRadius={10}
                     sx={{ background: selected.value }}
                   />