Fixes, and made firegex responsive

frontend/src/pages/HomePage.tsx

@@ -1,9 +1,11 @@
-import { LoadingOverlay, Space, Title } from '@mantine/core';
+import { ActionIcon, LoadingOverlay, Modal, Space, Title, Tooltip } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
+import { BsPlusLg } from "react-icons/bs";
 import { useNavigate } from 'react-router-dom';
 import ServiceRow from '../components/ServiceRow';
 import { Service, update_freq } from '../js/models';
 import { errorNotify, servicelist } from '../js/utils';
+import AddNewService from '../components/AddNewService';
 
 
 function HomePage() {
@@ -11,6 +13,8 @@ function HomePage() {
     const [services, setServices] = useState<Service[]>([]);
     const [loader, setLoader] = useState(true);
     const navigator = useNavigate()
+    const [open, setOpen] = useState(false);
+    const closeModal = () => {setOpen(false);}
     
     const updateInfo = async () => {
         await servicelist().then(res => {
@@ -33,7 +37,22 @@ 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"/> <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">
+                    <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>
     </div>
 }