From 8ce85dc86734cdfadbf3ab3ff5e809fb21b7ef80 Mon Sep 17 00:00:00 2001
From: DomySh <me@domysh.com>
Date: Wed, 15 Jun 2022 01:52:33 +0200
Subject: [PATCH] Fixes to Tooltip

---
 frontend/src/components/Header/index.tsx     |  8 ++++----
 frontend/src/components/RegexView/index.tsx  |  2 +-
 frontend/src/components/ServiceRow/index.tsx |  6 +++---
 frontend/src/pages/HomePage.tsx              | 17 +++++------------
 frontend/src/pages/ServiceDetails.tsx        |  6 +++---
 5 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index 4a81fee..bab09b9 100755
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -77,7 +77,7 @@ function Header() {
   const closeModal = () => {setOpen(false);}
 
   return <div id="header-page" className={style.header}>
-        <FloatingTooltip label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
+        <FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
           <div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
             <Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
           </div>
@@ -115,7 +115,7 @@ function Header() {
         </Menu>
         <div style={{marginLeft:"20px"}}></div>
         { location.pathname !== "/"?
-          <Tooltip label="Home" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
+          <Tooltip zIndex={0} label="Home" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
             <ActionIcon color="teal" style={{marginRight:"10px"}}
               size="xl" radius="md" variant="filled"
               onClick={()=>navigator("/")}>
@@ -124,10 +124,10 @@ function Header() {
           </Tooltip>
         :null}
         { srv_id?
-          <Tooltip label="Add a new regex" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
+          <Tooltip label="Add a new regex" zIndex={0} position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
             <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
           </Tooltip>
-        : <Tooltip label="Add a new service" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
+        : <Tooltip label="Add a new service" zIndex={0} position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
             <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
           </Tooltip>
       }
diff --git a/frontend/src/components/RegexView/index.tsx b/frontend/src/components/RegexView/index.tsx
index ed7a7ae..1500731 100755
--- a/frontend/src/components/RegexView/index.tsx
+++ b/frontend/src/components/RegexView/index.tsx
@@ -43,7 +43,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
             <Text className={style.regex_text}> {regex_expr}</Text>
           </Grid.Col>
           <Grid.Col span={2}>
-            <Tooltip label="Delete regex" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
+            <Tooltip label="Delete regex" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
               <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
             </Tooltip>
             </Grid.Col>
diff --git a/frontend/src/components/ServiceRow/index.tsx b/frontend/src/components/ServiceRow/index.tsx
index f45f1f9..de11556 100755
--- a/frontend/src/components/ServiceRow/index.tsx
+++ b/frontend/src/components/ServiceRow/index.tsx
@@ -108,14 +108,14 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
                     {additional_buttons}
                     {["pause","wait"].includes(service.status)?
                         
-                        <Tooltip label="Stop service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="orange">
+                        <Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="orange">
                             <ActionIcon color="yellow" loading={buttonLoading}
                             onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
                             disabled={service.status === "stop"}>
                                 <FaStop size="20px" />
                             </ActionIcon>
                         </Tooltip>:
-                        <Tooltip label="Pause service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
+                        <Tooltip label="Pause service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
                             <ActionIcon color="red" loading={buttonLoading}
                                     onClick={pauseService} size="xl" radius="md" variant="filled"
                                     disabled={service.status === "stop"}>
@@ -125,7 +125,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
                     }
                     
                     <Space w="md"/>
-                    <Tooltip label="Start service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
+                    <Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
                         <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
                                     variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
                             <FaPlay size="20px" />
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 3d5535e..229c26f 100755
--- a/frontend/src/pages/HomePage.tsx
+++ b/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>
 }
 
diff --git a/frontend/src/pages/ServiceDetails.tsx b/frontend/src/pages/ServiceDetails.tsx
index 63f5b9c..ace0cf8 100755
--- a/frontend/src/pages/ServiceDetails.tsx
+++ b/frontend/src/pages/ServiceDetails.tsx
@@ -84,11 +84,11 @@ function ServiceDetails() {
     return <div>
         <LoadingOverlay visible={loader} />
         <ServiceRow service={serviceInfo} additional_buttons={<>
-            <Tooltip label="Delete service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">           
+            <Tooltip label="Delete service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">           
                 <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
             </Tooltip>
             <Space w="md"/>
-            <Tooltip label="Change proxy port" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">           
+            <Tooltip label="Change proxy port" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">           
                 <ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon>
             </Tooltip>
             <Space w="md"/>
@@ -99,7 +99,7 @@ function ServiceDetails() {
                 <Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" button</Title>
                 <Space h="xl" /> <Space h="xl" />
                 <div className='center-flex'>
-                    <Tooltip label="Add a new regex" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
+                    <Tooltip label="Add a new regex" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
                         <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
                     </Tooltip>
                 </div>