Fixed pages table loading. Fixed z-indexes.

components/common/ErrorMessage.module.css

@@ -5,7 +5,7 @@
   transform: translate(-50%, -50%);
   margin: auto;
   display: flex;
-  z-index: 1;
+  z-index: var(--z-index-above);
   background-color: var(--base50);
   padding: 10px;
 }

components/common/HoverTooltip.module.css

@@ -5,7 +5,7 @@
 .tooltip {
   position: fixed;
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--z-index-popup);
 }
 
 .content {

components/common/MobileMenu.module.css

@@ -5,10 +5,10 @@
   right: 0;
   bottom: 0;
   margin: auto;
-  z-index: 100;
   display: flex;
   flex-direction: column;
   background-color: var(--base50);
+  z-index: var(--z-index-popup);
   overflow: auto;
 }
 

components/common/UpdateNotice.module.css

@@ -8,7 +8,7 @@
   padding: 20px;
   border: 1px solid var(--base300);
   border-radius: var(--border-radius);
-  z-index: 1000;
+  z-index: var(--z-index-popup);
 }
 
 .message {

components/input/LanguageButton.module.css

@@ -5,7 +5,7 @@
   max-width: 100vw;
   padding: 10px;
   background: var(--base50);
-  z-index: var(--z-index100);
+  z-index: var(--z-index-popup);
   border-radius: 5px;
   border: 1px solid var(--border-color);
   margin-left: 10px;

components/input/ProfileButton.module.css

@@ -1,5 +1,6 @@
 .menu {
   width: 200px;
+  z-index: var(--z-index-popup);
 }
 
 .item {

components/input/SettingsButton.module.css

@@ -8,5 +8,4 @@
   top: 100%;
   right: 0;
   padding: 20px;
-  z-index: 100;
 }

components/layout/AppLayout.module.css

@@ -7,7 +7,7 @@
 .nav {
   height: 60px;
   width: 100vw;
-  z-index: 100;
+  z-index: var(--z-index-overlay);
   grid-column: 1;
   grid-row: 1 / 2;
 }

components/layout/FormLayout.js

@@ -1,31 +0,0 @@
-import { useSpring, animated } from 'react-spring';
-import classNames from 'classnames';
-import { ErrorMessage } from 'formik';
-import styles from './FormLayout.module.css';
-
-export default function FormLayout({ className, children }) {
-  return <div className={classNames(styles.form, className)}>{children}</div>;
-}
-
-export const FormButtons = ({ className, children }) => (
-  <div className={classNames(styles.buttons, className)}>{children}</div>
-);
-
-export const FormError = ({ name }) => {
-  return <ErrorMessage name={name}>{msg => <ErrorTag msg={msg} />}</ErrorMessage>;
-};
-
-const ErrorTag = ({ msg }) => {
-  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
-
-  return (
-    <animated.div className={styles.error} style={props}>
-      <div className={styles.msg}>{msg}</div>
-    </animated.div>
-  );
-};
-
-export const FormRow = ({ children }) => <div className={styles.row}>{children}</div>;
-
-export const FormMessage = ({ children }) =>
-  children ? <div className={styles.message}>{children}</div> : null;

components/layout/FormLayout.module.css

@@ -1,94 +0,0 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.form label {
-  display: block;
-  min-width: 100px;
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  position: relative;
-  margin-bottom: 20px;
-  line-height: 1.8;
-  padding: 0 20px;
-}
-
-.row > div {
-  position: relative;
-  flex: 1 1;
-}
-
-.row > div > input,
-.row > div > select {
-  width: 100%;
-  min-width: 240px;
-}
-
-.buttons {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.buttons button + button {
-  margin-left: 10px;
-}
-
-.error {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  top: 0;
-  left: calc(100% + 16px);
-  bottom: 0;
-  z-index: 1;
-}
-
-.msg {
-  color: var(--msgColor);
-  background: var(--red400);
-  padding: 4px 8px;
-  border-radius: 4px;
-  white-space: nowrap;
-}
-
-.error:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -5px;
-  bottom: 0;
-  margin: auto;
-  width: 10px;
-  height: 10px;
-  background: var(--red400);
-  transform: rotate(45deg);
-}
-
-.message {
-  text-align: center;
-  margin: 20px 0;
-  padding: 4px 8px;
-  border-radius: 4px;
-  color: var(--base50);
-  background: var(--base800);
-}
-
-@media only screen and (max-width: 576px) {
-  .error {
-    align-items: flex-start;
-    top: calc(100% + 7px);
-    left: 0;
-  }
-
-  .error:after {
-    left: 10px;
-  }
-}

components/metrics/PagesTable.js

@@ -8,7 +8,7 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
   const {
     router,
     resolveUrl,
-    query: { view },
+    query: { view = 'url' },
   } = usePageQuery();
   const { formatMessage, labels } = useMessages();
 

components/metrics/WebsiteChart.module.css

@@ -24,7 +24,7 @@
   min-height: 90px;
   margin-bottom: 20px;
   background: var(--base50);
-  z-index: var(--z-index300);
+  z-index: var(--z-index-above);
 }
 
 .sticky {

components/pages/realtime/RealtimeDashboard.module.css

@@ -11,6 +11,6 @@
   top: 0;
   background: var(--base50);
   border-bottom: 1px solid var(--base300);
-  z-index: 3;
+  z-index: var(--z-index-overlay);
   padding: 10px 0;
 }