Removed import type React

src/frontend/src/App.tsx

@@ -1,8 +1,8 @@
 import { Box } from '@mui/material';
-import type React from 'react';
+import { type FC } from 'react';
 import { AppRoutes } from './routes';
 
-const App: React.FC = () => {
+const App: FC = () => {
   return (
     <Box component="main" position="relative">
       <AppRoutes />

src/frontend/src/AppProvider.tsx

@@ -1,7 +1,7 @@
 import { CssBaseline, StyledEngineProvider, type Theme, ThemeProvider } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import type React from 'react';
+import { type PropsWithChildren, type FC } from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { type Store } from 'redux';
@@ -15,7 +15,7 @@ interface AppProviderProps {
   store: Store;
 }
 
-const AppProvider: React.FC<React.PropsWithChildren<AppProviderProps>> = ({ children, store }) => {
+const AppProvider: FC<PropsWithChildren<AppProviderProps>> = ({ children, store }) => {
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>

src/frontend/src/components/AppButton/AppButton.tsx

@@ -1,12 +1,12 @@
 import { Button, type ButtonProps } from '@mui/material';
-import type React from 'react';
+import { type FC } from 'react';
 import { AppButtonProgress, AppButtonRoot, AppButtonWrapper } from './AppButton.styles';
 
 interface AppButtonProps extends ButtonProps {
   isLoading?: boolean;
 }
 
-const AppButton: React.FC<AppButtonProps> = ({ isLoading, disabled, ...props }) => {
+const AppButton: FC<AppButtonProps> = ({ isLoading, disabled, ...props }) => {
   return (
     <AppButtonRoot>
       <AppButtonWrapper>

src/frontend/src/components/AppSelect/AppSelect.test.tsx

@@ -1,7 +1,6 @@
 import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import type React from 'react';
-import { useState } from 'react';
+import { type FC, useState } from 'react';
 import { type SelectOption } from 'src/types';
 import AppSelect from './AppSelect';
 
@@ -26,7 +25,7 @@ interface AppSelectTestProps {
   errorText?: string;
 }
 
-const AppSelectTest: React.FC<AppSelectTestProps> = ({
+const AppSelectTest: FC<AppSelectTestProps> = ({
   initialValue = null,
   allowEmptyOptions,
   errorText,

src/frontend/src/components/AppSelect/AppSelect.tsx

@@ -1,5 +1,5 @@
 import { Autocomplete, CircularProgress, TextField } from '@mui/material';
-import type React from 'react';
+import { type SyntheticEvent, type ReactElement } from 'react';
 
 interface AppSelectProps<TOption> {
   availableOptions: TOption[];
@@ -27,8 +27,8 @@ const AppSelect = <TOption,>({
   helperText,
   isLoading,
   isInvalid,
-}: AppSelectProps<TOption>): React.ReactElement => {
-  const handleChange = (event: React.SyntheticEvent, newValue: TOption | null): void => {
+}: AppSelectProps<TOption>): ReactElement => {
+  const handleChange = (event: SyntheticEvent, newValue: TOption | null): void => {
     onChange(newValue);
   };
 

src/frontend/src/components/DatePicker/DatePicker.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { type FC } from 'react';
 import { useInput } from 'src/hooks';
 import { create } from 'src/test-utils';
 import { mapToDateInputProps } from 'src/utils/inputMapping';
@@ -14,7 +14,7 @@ interface DatePickerTestProps {
   errorHelperText?: string;
 }
 
-const DatePickerTest: React.FC<DatePickerTestProps> = ({
+const DatePickerTest: FC<DatePickerTestProps> = ({
   label,
   placeholder,
   date: initialDate = null,
@@ -52,7 +52,7 @@ test('date can be changed', async () => {
 test('date can be validated', async () => {
   const ui = create
     .component(
-      <React.Fragment>
+      <>
         <DatePickerTest
           label="First"
           placeholder="Select first"
@@ -65,7 +65,7 @@ test('date can be validated', async () => {
           date={new Date('2022-06-26')}
           errorHelperText="Second is invalid"
         />
-      </React.Fragment>,
+      </>,
     )
     .please();
 

src/frontend/src/components/DatePicker/DatePicker.tsx

@@ -1,9 +1,9 @@
 import { TextField } from '@mui/material';
 import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers';
-import type React from 'react';
+import { type FC } from 'react';
 import { type DatePickerProps } from './DatePicker.types';
 
-const DatePicker: React.FC<DatePickerProps> = ({
+const DatePicker: FC<DatePickerProps> = ({
   label,
   placeholder,
   date,

src/frontend/src/features/__shared__/hooks/types.ts

@@ -1,4 +1,5 @@
 import { type TextFieldProps } from '@mui/material';
+import { type Dispatch, type SetStateAction } from 'react';
 
 export type BindFunction<TBindingProps> = () => TBindingProps;
 export type ValidatorFunction<TValue> = (value: TValue) => boolean;
@@ -10,19 +11,19 @@ export type BaseInputHook<TValue, TResult extends unknown[], TArg = void> = (
 
 export type InputHook<TValue, TBindingProps, TArg = void> = BaseInputHook<
   TValue,
-  [TValue, React.Dispatch<React.SetStateAction<TValue>>, BindFunction<TBindingProps>],
+  [TValue, Dispatch<SetStateAction<TValue>>, BindFunction<TBindingProps>],
   TArg
 >;
 
 export type ValidatedInputHook<TValue, TBindingProps, TArg = void> = BaseInputHook<
   TValue,
-  [TValue, React.Dispatch<React.SetStateAction<TValue>>, BindFunction<TBindingProps>, boolean],
+  [TValue, Dispatch<SetStateAction<TValue>>, BindFunction<TBindingProps>, boolean],
   TArg
 >;
 
 export type BindingCreatorFunction<TValue, TBindingProps> = (
   value: TValue,
-  setValue: React.Dispatch<React.SetStateAction<TValue>>,
+  setValue: Dispatch<SetStateAction<TValue>>,
 ) => TBindingProps;
 
 export interface InputOptions<TValue> {

src/frontend/src/features/__shared__/hooks/usePopover.ts

@@ -1,7 +1,7 @@
 import { type PopoverProps } from '@mui/material';
-import { useState } from 'react';
+import { useState, type MouseEvent } from 'react';
 
-export type ShowPopoverFn<TAnchorElement> = (event: React.MouseEvent<TAnchorElement>) => void;
+export type ShowPopoverFn<TAnchorElement> = (event: MouseEvent<TAnchorElement>) => void;
 
 export default function usePopover<TAnchorElement extends Element>(): [
   PopoverProps,

src/frontend/src/features/auth/components/AuthCallbackProgress.tsx

@@ -1,11 +1,11 @@
 import { Box, CircularProgress, Typography } from '@mui/material';
-import type React from 'react';
+import { type FC } from 'react';
 
 interface AuthCallbackProgressProps {
   label: string;
 }
 
-const AuthCallbackProgress: React.FC<AuthCallbackProgressProps> = ({ label }) => {
+const AuthCallbackProgress: FC<AuthCallbackProgressProps> = ({ label }) => {
   return (
     <Box height="100vh" display="flex" justifyContent="center" alignItems="center">
       <Box display="flex" alignItems="center" gap={2} p={4}>

src/frontend/src/features/auth/components/DemoAuthWarning.tsx

@@ -1,7 +1,7 @@
 import { Alert } from '@mui/material';
-import type React from 'react';
+import { type FC } from 'react';
 
-const DemoAuthWarning: React.FC = () => {
+const DemoAuthWarning: FC = () => {
   return (
     <Alert severity="warning">
       {`This application is running in demo mode and is not using real authentication. You will be signed in as a fake user`}

src/frontend/src/features/auth/components/GoogleIcon.tsx

@@ -1,7 +1,7 @@
 import { SvgIcon, type SvgIconProps } from '@mui/material';
-import type React from 'react';
+import { type FC } from 'react';
 
-const GoogleIcon: React.FC<SvgIconProps> = ({ ...props }) => {
+const GoogleIcon: FC<SvgIconProps> = ({ ...props }) => {
   return (
     <SvgIcon {...props} viewBox="-.5 0 48 48">
       <g fill="none" fillRule="evenodd">

src/frontend/src/features/auth/components/Login.tsx

@@ -1,5 +1,5 @@
 import { Box, Paper, Stack, Typography } from '@mui/material';
-import type React from 'react';
+import { type FC } from 'react';
 import { Navigate } from 'react-router-dom';
 import { AppButton } from 'src/components';
 import { DEMO_MODE_ENABLED } from 'src/config';
@@ -8,7 +8,7 @@ import DemoAuthWarning from './DemoAuthWarning';
 import GoogleIcon from './GoogleIcon';
 import Logo from './Logo';
 
-const Login: React.FC = () => {
+const Login: FC = () => {
   const returnUrl = useReturnUrl();
   const { user, isLoggingIn, login } = useAuth();
 

src/frontend/src/features/auth/components/PostLogin.tsx

@@ -1,10 +1,9 @@
-import type React from 'react';
-import { useEffect } from 'react';
+import { type FC, useEffect } from 'react';
 import { Navigate, useParams } from 'react-router-dom';
 import { useAuth } from '../hooks';
 import AuthCallbackProgress from './AuthCallbackProgress';
 
-const PostLogin: React.FC = () => {
+const PostLogin: FC = () => {
   const { user, completeLogin } = useAuth();
   const params = useParams();
 

src/frontend/src/features/auth/components/PostLogout.tsx

@@ -1,10 +1,9 @@
-import type React from 'react';
-import { useEffect } from 'react';
+import { type FC, useEffect } from 'react';
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '../hooks';
 import AuthCallbackProgress from './AuthCallbackProgress';
 
-const PostLogout: React.FC = () => {
+const PostLogout: FC = () => {
   const { user, completeLogout } = useAuth();
 
   useEffect(() => {

src/frontend/src/features/categories/components/CategoriesListItem.tsx

@@ -1,8 +1,7 @@
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import { Card, CardHeader, CardActions, Button } from '@mui/material';
-import type React from 'react';
-import { useEffect, useState } from 'react';
+import { type FC, useEffect, useState } from 'react';
 import { categoriesApi } from '../api';
 import { type Category, type CategoryFormData } from '../types';
 import CategoryInputDialog from './CategoryInputDialog';
@@ -14,7 +13,7 @@ interface CategoriesListItemProps {
   category: Category;
 }
 
-const CategoriesListItem: React.FC<CategoriesListItemProps> = ({ category }) => {
+const CategoriesListItem: FC<CategoriesListItemProps> = ({ category }) => {
   const [isEditDialogOpened, setIsEditDialogOpened] = useState(false);
   const [isDeleteDialogOpened, setIsDeleteDialogOpened] = useState(false);
   const [editCategory, editCategoryRequest] = categoriesApi.useEditCategoryMutation();

src/frontend/src/features/categories/components/CategoryInputDialog.tsx

@@ -1,7 +1,5 @@
 import { TextField } from '@mui/material';
-import type React from 'react';
-import { type Dispatch, type SetStateAction } from 'react';
-import { useEffect } from 'react';
+import { type FC, useEffect, type Dispatch, type SetStateAction } from 'react';
 import { AppButton, AppDialog } from 'src/components';
 import { useInput } from 'src/hooks';
 import { mapToTextInputProps } from 'src/utils/inputMapping';
@@ -18,7 +16,7 @@ interface CreateEditCategoryDialogProps {
   category?: Category;
 }
 
-const CategoryInputDialog: React.FC<CreateEditCategoryDialogProps> = ({
+const CategoryInputDialog: FC<CreateEditCategoryDialogProps> = ({
   isOpened: isDialogOpened,
   setIsOpened: setIsDialogOpened,
   title,

src/frontend/src/features/categories/components/CategorySelect.tsx

@@ -1,9 +1,9 @@
-import type React from 'react';
+import { type FC } from 'react';
 import { AppSelect } from 'src/components';
 import { type SelectOption, type SelectProps } from 'src/types';
 import { categoriesApi } from '../api';
 
-const CategorySelect: React.FC<SelectProps<SelectOption>> = ({
+const CategorySelect: FC<SelectProps<SelectOption>> = ({
   label,
   placeholder,
   value = null,

src/frontend/src/features/categories/components/CreateCategory.tsx

@@ -1,11 +1,11 @@
 import AddIcon from '@mui/icons-material/Add';
-import React, { useEffect, useState } from 'react';
+import { type FC, useEffect, useState } from 'react';
 import { AppFab } from 'src/components';
 import { categoriesApi } from '../api';
 import { type CategoryFormData } from '../types';
 import CategoryInputDialog from './CategoryInputDialog';
 
-const CreateCategory: React.FC = () => {
+const CreateCategory: FC = () => {
   const [isCreateDialogOpened, setIsCreateDialogOpened] = useState(false);
   const [createCategory, createCategoryRequest] = categoriesApi.useCreateCategoryMutation();
   const categoriesQuery = categoriesApi.useGetCategoriesQuery();
@@ -25,7 +25,7 @@ const CreateCategory: React.FC = () => {
   };
 
   return (
-    <React.Fragment>
+    <>
       <AppFab
         aria-label="Create new category"
         color="primary"
@@ -43,7 +43,7 @@ const CreateCategory: React.FC = () => {
         onSubmit={handleDialogSubmit}
         isLoading={createCategoryRequest.isLoading}
       />
-    </React.Fragment>
+    </>
   );
 };
 

src/frontend/src/features/categories/components/DeleteCategoryDialog.tsx

@@ -1,17 +1,16 @@
 import { Typography } from '@mui/material';
-import type React from 'react';
-import { useEffect } from 'react';
+import { useEffect, type FC, type Dispatch, type SetStateAction } from 'react';
 import { AppButton, AppDialog } from 'src/components';
 import { categoriesApi } from '../api';
 import { type Category } from '../types';
 
 interface DeleteCategoryDialogProps {
   isOpened: boolean;
-  setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpened: Dispatch<SetStateAction<boolean>>;
   category: Category;
 }
 
-const DeleteCategoryDialog: React.FC<DeleteCategoryDialogProps> = ({
+const DeleteCategoryDialog: FC<DeleteCategoryDialogProps> = ({
   isOpened: isDialogOpened,
   setIsOpened: setIsDialogOpened,
   category,

src/frontend/src/features/categories/routes/Categories.tsx

@@ -1,15 +1,15 @@
 import { Box, Container, Typography } from '@mui/material';
-import React from 'react';
+import { type FC } from 'react';
 import { AppLinearProgress } from 'src/components';
 import { categoriesApi } from '../api';
 import CategoriesList from '../components/CategoriesList';
 import CreateCategory from '../components/CreateCategory';
 
-const Categories: React.FC = () => {
+const Categories: FC = () => {
   const categoriesQuery = categoriesApi.useGetCategoriesQuery();
 
   return (
-    <React.Fragment>
+    <>
       {categoriesQuery.isFetching && <AppLinearProgress />}
       <Container>
         <Box py={3}>
@@ -20,7 +20,7 @@ const Categories: React.FC = () => {
           <CreateCategory />
         </Box>
       </Container>
-    </React.Fragment>
+    </>
   );
 };
 

src/frontend/src/features/navigation/components/Menu.tsx

@@ -1,9 +1,9 @@
 import { Box, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
-import type React from 'react';
+import { type FC } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { NAV_LINKS } from '../constants';
 
-const Menu: React.FC = () => {
+const Menu: FC = () => {
   const location = useLocation();
 
   return (

src/frontend/src/features/navigation/components/MobileMenu.tsx

@@ -11,12 +11,11 @@ import {
   ListItemText,
   Typography,
 } from '@mui/material';
-import type React from 'react';
-import { useState } from 'react';
+import { type FC, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { APP_BAR_HEIGHT, APP_NAME, NAV_LINKS } from '../constants';
 
-const MobileMenu: React.FC = () => {
+const MobileMenu: FC = () => {
   const [isOpened, setIsOpened] = useState(false);
 
   const handleMenuToggle = (): void => {