Fix modal. Re-add form css.

components/common/Modal.module.css

@@ -5,7 +5,7 @@
   right: 0;
   bottom: 0;
   margin: auto;
-  z-index: 2;
+  z-index: 3;
 }
 
 .modal:before {

components/layout/Layout.js

@@ -27,6 +27,7 @@ export default function Layout({ title, children, header = true, footer = true }
       {header && <Header />}
       <main>{children}</main>
       {footer && <Footer />}
+      <div id="__modals" dir={dir} />
     </Container>
   );
 }

components/pages/WebsiteDetails.js

@@ -1,27 +1,30 @@
-import { useState } from 'react';
-import { Column } from 'react-basics';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Arrow from 'assets/arrow-right.svg';
 import classNames from 'classnames';
-import WebsiteChart from 'components/metrics/WebsiteChart';
-import WorldMap from 'components/common/WorldMap';
-import Page from 'components/layout/Page';
-import GridRow from 'components/layout/GridRow';
-import MenuLayout from 'components/layout/MenuLayout';
+import EventDataButton from 'components/common/EventDataButton';
 import Link from 'components/common/Link';
 import Loading from 'components/common/Loading';
-import PagesTable from 'components/metrics/PagesTable';
-import ReferrersTable from 'components/metrics/ReferrersTable';
+import WorldMap from 'components/common/WorldMap';
+import GridRow from 'components/layout/GridRow';
+import MenuLayout from 'components/layout/MenuLayout';
+import Page from 'components/layout/Page';
 import BrowsersTable from 'components/metrics/BrowsersTable';
-import OSTable from 'components/metrics/OSTable';
-import DevicesTable from 'components/metrics/DevicesTable';
 import CountriesTable from 'components/metrics/CountriesTable';
+import DevicesTable from 'components/metrics/DevicesTable';
+import EventsChart from 'components/metrics/EventsChart';
+import EventsTable from 'components/metrics/EventsTable';
 import LanguagesTable from 'components/metrics/LanguagesTable';
-import ScreenTable from 'components/metrics/ScreenTable';
+import OSTable from 'components/metrics/OSTable';
+import PagesTable from 'components/metrics/PagesTable';
 import QueryParametersTable from 'components/metrics/QueryParametersTable';
+import ReferrersTable from 'components/metrics/ReferrersTable';
+import ScreenTable from 'components/metrics/ScreenTable';
+import WebsiteChart from 'components/metrics/WebsiteChart';
 import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
-import Arrow from 'assets/arrow-right.svg';
+import { useState } from 'react';
+import { Column } from 'react-basics';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import styles from './WebsiteDetails.module.css';
 
 const messages = defineMessages({
@@ -33,6 +36,7 @@ const messages = defineMessages({
   devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
   countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
   languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
+  events: { id: 'metrics.events', defaultMessage: 'Events' },
   query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
 });
 
@@ -45,6 +49,7 @@ const views = {
   screen: ScreenTable,
   country: CountriesTable,
   language: LanguagesTable,
+  event: EventsTable,
   query: QueryParametersTable,
 };
 
@@ -52,6 +57,7 @@ export default function WebsiteDetails({ websiteId }) {
   const { data } = useFetch(`/websites/${websiteId}`);
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
+  const [eventsData, setEventsData] = useState();
   const {
     resolve,
     query: { view },
@@ -102,6 +108,10 @@ export default function WebsiteDetails({ websiteId }) {
       label: formatMessage(messages.screens),
       value: resolve({ view: 'screen' }),
     },
+    {
+      label: formatMessage(messages.events),
+      value: resolve({ view: 'event' }),
+    },
     {
       label: formatMessage(messages.query),
       value: resolve({ view: 'query' }),
@@ -166,6 +176,15 @@ export default function WebsiteDetails({ websiteId }) {
               <CountriesTable {...tableProps} onDataLoad={setCountryData} />
             </Column>
           </GridRow>
+          <GridRow className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
+            <Column xs={12} md={12} lg={12} defaultSize={4}>
+              <EventsTable {...tableProps} onDataLoad={setEventsData} />
+            </Column>
+            <Column xs={12} md={12} lg={12} defaultSize={8}>
+              <EventDataButton websiteId={websiteId} />
+              <EventsChart className={styles.eventschart} websiteId={websiteId} />
+            </Column>
+          </GridRow>
         </>
       )}
       {view && chartLoaded && (

components/pages/WebsiteDetails.module.css

@@ -29,3 +29,7 @@
 .hidden {
   display: none;
 }
+
+.eventschart {
+  padding-top: 30px;
+}

styles/index.css

@@ -88,3 +88,41 @@ svg {
   height: 100%;
   flex: 1;
 }
+
+input[type='text'],
+input[type='password'],
+select,
+textarea {
+  color: var(--base900);
+  background: var(--base50);
+  padding: 4px 8px;
+  font-size: var(--font-size-normal);
+  line-height: 1.8;
+  border: 1px solid var(--base500);
+  border-radius: 4px;
+  outline: none;
+  resize: none;
+  flex: 1;
+}
+
+input[type='checkbox'] + label {
+  margin-left: 10px;
+}
+
+label {
+  flex: 1;
+  margin-right: 20px;
+}
+
+label:empty {
+  flex: 0;
+}
+
+dt {
+  font-weight: 600;
+  margin: 0 0 5px 0;
+}
+
+dd {
+  margin: 0 0 30px 0;
+}