Намутил визуал FAB

app/assets/mui/themes/home.ts

@@ -78,6 +78,20 @@ const customTheme = (outerTheme: Theme) =>
                         maxWidth: '90%!important'
                     }
                 }
+            },
+            MuiFab: {
+                styleOverrides: {
+                    root: {
+                        '--Fab-text-color': '#E0E3E7',
+                        '--Fab-bg-color': '#282c34',
+                        '--Fab-bg-color-hover': '#3b444c',
+                        backgroundColor: 'var(--Fab-bg-color)',
+                        color: 'var(--Fab-text-color)',
+                        '&:hover': {
+                            backgroundColor: 'var(--Fab-bg-color-hover)',
+                        },
+                    }
+                }
             }
         }
     });

app/routes/home.tsx

@@ -1,9 +1,10 @@
 import {useEffect, useState} from "react";
 import '../assets/styles/home.css';
 import {
-    Divider,
+    Box,
+    Divider, Fab,
     TextField,
-    ThemeProvider,
+    ThemeProvider, Typography,
     useTheme
 } from "@mui/material";
 import {getAll} from '~/api';
@@ -12,6 +13,7 @@ import {BlacklistItem} from "~/classes/blacklistItem";
 import {ResponseError} from "~/classes/responseError";
 import ItemList from "~/components/itemList";
 import ItemDialog from "~/components/itemDialog";
+import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag';
 
 export default function Home() {
     const outerTheme = useTheme();
@@ -21,6 +23,7 @@ export default function Home() {
     const [blacklistItems, setBlacklistItems] = useState<BlacklistItem[]>([]);
     const [showDialog, setShowDialog] = useState(false);
     const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState<BlacklistItem|null>(null);
+    const [fabIsHovered, setFabIsHovered] = useState(false);
 
     useEffect(() => {
         let isIgnore = false;
@@ -73,6 +76,32 @@ export default function Home() {
                 </div>
                 <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems} showDialog={handleItemClick}></ItemList>
                 <ItemDialog blacklistItem={currentDialogBlacklistItem} open={showDialog} handleClose={handleDialogClose}></ItemDialog>
+                <Fab
+                    onMouseEnter={() => setFabIsHovered(true)}
+                    onMouseLeave={() => setFabIsHovered(false)}
+                    variant={fabIsHovered ? 'extended' : 'circular'}
+                    sx={{
+                        position: 'absolute',
+                        bottom: 16,
+                        right: 16,
+                        width: fabIsHovered ? '160px' : '56px', // Переход между кругом и овалом
+                        transition: 'width 0.3s ease-in-out',
+                        overflow: 'hidden',
+                    }}
+                >
+                    <OutlinedFlagIcon />
+                    <Box
+                        sx={{
+                            opacity: fabIsHovered ? 1 : 0,
+                            ml: fabIsHovered ? 1 : 0,
+                            width: fabIsHovered ? 'auto' : 0,
+                            transition: 'all 0.1s ease-in-out',
+                            whiteSpace: 'nowrap',
+                        }}
+                    >
+                        <Typography variant="button">{fabIsHovered ? 'Send report' : ''}</Typography>
+                    </Box>
+                </Fab>
             </div>
         </ThemeProvider>
     );