Fixes to Tooltip

frontend/src/pages/HomePage.tsx

@@ -37,22 +37,15 @@ function HomePage() {
         <LoadingOverlay visible={loader} />
         {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
             navigator("/"+srv.id)
-        }} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the "+" button above</Title>
-        <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                }}>
-                <Tooltip label="Add a new service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
+        }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" button above</Title>
+            <Space h="xl" /> <Space h="xl" /> 
+            <div className='center-flex'>
+                <Tooltip label="Add a new service" transition="pop" transitionDuration={200} openDelay={500} zIndex={0} transitionTimingFunction="ease" color="blue">
                     <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
                 </Tooltip>
             </div>
         </>}
-
-        <Modal size="xl" title="Add a new service" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
-            <AddNewService closePopup={closeModal} />
-        </Modal>
+        <AddNewService opened={open} onClose={closeModal} />
     </div>
 }