Converted popup into modal.

components/pages/reports/funnel/FunnelParameters.js

@@ -6,8 +6,8 @@ import {
   FormButtons,
   FormInput,
   FormRow,
-  PopupTrigger,
-  Popup,
+  ModalTrigger,
+  Modal,
   SubmitButton,
   Text,
   TextField,
@@ -85,29 +85,34 @@ function AddURLButton({ onAdd }) {
   const handleChange = e => {
     setUrl(e.target.value);
   };
+  const handleClose = close => {
+    setUrl('');
+    close();
+  };
 
   return (
-    <PopupTrigger>
+    <ModalTrigger>
       <Icon>
         <Icons.Plus />
       </Icon>
-      <Popup className={styles.popup} position="right" alignment="start">
+      <Modal>
         {close => {
           return (
             <Form>
               <FormRow label={formatMessage(labels.url)}>
                 <TextField name="url" value={url} onChange={handleChange} autoComplete="off" />
               </FormRow>
-              <FormButtons>
+              <FormButtons align="center" flex>
                 <Button variant="primary" onClick={() => handleAdd(close)}>
                   {formatMessage(labels.add)}
                 </Button>
+                <Button onClick={() => handleClose(close)}>{formatMessage(labels.cancel)}</Button>
               </FormButtons>
             </Form>
           );
         }}
-      </Popup>
-    </PopupTrigger>
+      </Modal>
+    </ModalTrigger>
   );
 }
 

components/pages/reports/funnel/FunnelParameters.module.css

@@ -1,12 +1,3 @@
-.popup {
-  background: var(--base50);
-  padding: 20px;
-  margin-left: 10px;
-  border: 1px solid var(--base400);
-  border-radius: var(--border-radius);
-  width: 400px;
-}
-
 .urls {
   display: flex;
   flex-direction: column;