fix(ui): fix add outside click for modal, fix right menu headers

frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx

@@ -29,7 +29,7 @@ function DashboardEditModal(props: Props) {
     const write = ({ target: { value, name } }) => dashboard.update({ [ name ]: value })
 
     return useObserver(() => (
-        <Modal open={ show }>
+        <Modal open={ show } onClose={closeHandler}>
             <Modal.Header className="flex items-center justify-between">
                 <div>{ 'Edit Dashboard' }</div>
                 <Icon

frontend/app/components/Dashboard/components/DashboardSelectionModal/DashboardSelectionModal.tsx

@@ -41,7 +41,7 @@ function DashboardSelectionModal(props: Props) {
     }, [])
 
     return useObserver(() => (
-        <Modal size="small" open={ show }>
+        <Modal size="small" open={ show } onClose={closeHandler}>
             <Modal.Header className="flex items-center justify-between">
                 <div>{ 'Add to selected dashboard' }</div>
                 <Icon 

frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx

@@ -102,10 +102,10 @@ function WidgetSessions(props: Props) {
                         show={filteredSessions.sessions.length === 0}
                     >
                         {filteredSessions.sessions.map((session: any) => (
-                            <>
-                                <SessionItem key={ session.sessionId } session={ session }  />
+                            <React.Fragment key={ session.sessionId }>
+                                <SessionItem session={ session }  />
                                 <div className="border-b" />
-                            </>
+                            </React.Fragment>
                         ))}
 
                         <div className="w-full flex items-center justify-center py-6">

frontend/app/components/Funnels/FunnelSaveModal/FunnelSaveModal.js

@@ -46,7 +46,7 @@ export default class FunnelSaveModal extends React.PureComponent {
     } = this.props;
     
     return (
-      <Modal size="small" open={ show }>
+      <Modal size="small" open={ show } onClose={this.props.closeHandler}>
         <Modal.Header className={ styles.modalHeader }>
           <div>{ 'Save Funnel' }</div>
           <Icon 

frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx

@@ -63,8 +63,9 @@ function PageInsightsPanel({
 
   return (
     <div className="p-4 bg-white">
-      <div className="pt-2 pb-3 flex items-center" style={{ maxWidth: '241px' }}>
-        <div className="-ml-1 text-lg">
+      <div className="pb-3 flex items-center" style={{ maxWidth: '241px', paddingTop: '5px' }}>
+        <div className="flex items-center">
+          <span className="mr-1 text-xl">Clicks</span>
           <SelectDateRange period={period} onChange={onDateChange} disableCustom />
         </div>
         <div

frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx

@@ -57,7 +57,7 @@ function SaveSearchModal(props: Props) {
 
 
   return (
-    <Modal size="small" open={ show }>
+    <Modal size="small" open={ show } onClose={closeHandler}>
       <Modal.Header className={ stl.modalHeader }>
         <div>{ 'Save Search' }</div>
         <Icon

frontend/app/components/ui/Confirmation/Confirmation.js

@@ -22,6 +22,7 @@ const Confirmation = ({
   return (
     <Modal
       open={show}
+      onClose={() => proceed(false)}
     >
       <Modal.Header>{header}</Modal.Header>
       <Modal.Content>

frontend/app/components/ui/Modal/Modal.tsx

@@ -5,6 +5,7 @@ interface Props {
     children: React.ReactNode;
     open?: boolean;
     size ?: 'tiny' | 'small' | 'large' | 'fullscreen';
+    onClose?: () => void;
 }
 function Modal(props: Props) {
     const { children, open = false, size = 'small' } = props;
@@ -28,10 +29,17 @@ function Modal(props: Props) {
         style.width = '100%';
     }
 
+    const handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.target === e.currentTarget) {
+            props.onClose && props.onClose();
+        }
+    }
+
     return open ? (
         <div
             className="fixed inset-0 flex items-center justify-center box-shadow animate-fade-in"
             style={{ zIndex: '999', backgroundColor: 'rgba(0, 0, 0, 0.2)'}}
+            onClick={handleClose}
         >
             <div className="absolute z-10 bg-white rounded border" style={style}>
                 {children}
@@ -85,4 +93,4 @@ Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 Modal.Content = ModalContent;
 
-export default Modal;
+export default Modal;