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;
 }

package.json

@@ -94,7 +94,7 @@
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
-    "react-basics": "^0.74.0",
+    "react-basics": "^0.75.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-intl": "^5.24.7",

yarn.lock

@@ -6727,10 +6727,10 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-basics@^0.74.0:
+react-basics@^0.75.0:
-  version "0.74.0"
+  version "0.75.0"
-  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.74.0.tgz#153433bc485d6b71d8edf377d1a83f1d55133e24"
+  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.75.0.tgz#501ba7fae6e0659ec8f7e811a4303ef83bd57b13"
-  integrity sha512-Z9XwgEOSRvcPqFqFZL6HR59t/XrqhIB8uoYwbmon3IFX2W0kOPqkX1Box0c+2BibJoHp4N4mbfuZWK2kSEnq9g==
+  integrity sha512-mDm+L/cw4LX4LylJW0MyV+YFxhZ0tMa/bCIs1QsApcRGvF4ahlB1rdwWn6/p01PVSHe7xS/55lSklp3b7IWOaw==
   dependencies:
     classnames "^2.3.1"
     date-fns "^2.29.3"